'scroll' 검색 결과

Build scroll animations with GSAP or Framer Motion, including fade-ins, parallax effects that move layers at different speeds, pinned sections, and horizontal scrolling. Provides implementation patterns for vanilla JavaScript, React, and Next.js, with accessibility guidance.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Fade cards in as they enter the screen
• Create parallax effects for images and text
• Build pinned sections with sequential animations

Design and build visual stories where scrolling changes charts, maps, or video. Plan meaningful scene transitions, choose suitable implementation tools, and provide mobile layouts and static alternatives for readers who prefer reduced motion.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a story with charts that change as readers scroll
• Create a timeline combining maps and video
• Compare scrolling narratives with step-by-step displays

Build web animations with GSAP ScrollTrigger that respond to scrolling. Move or reveal elements, keep sections pinned in place, link animation progress to scroll position, and create parallax effects or horizontal movement driven by vertical scrolling.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reveal cards as they enter the viewport
• Keep a section pinned during scrolling
• Link animation progress to scroll position

Build web animations with GSAP ScrollTrigger that respond to scrolling. Move or reveal elements, keep sections pinned in place, link animation progress to scroll position, and create parallax effects or horizontal movement driven by vertical scrolling.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reveal cards as they enter the viewport
• Keep a section pinned during scrolling
• Link animation progress to scroll position

Generate cinematic scrolltelling websites where scroll drives the narrative: Lenis smooth scroll, GSAP ScrollTrigger cinematic section reveals with fluid OKLCH color transitions, Three.js painted-texture shader backgrounds reactive to cursor, scroll, velocity, and chapter progress. Four modes — chapter-reveal (scroll-paced storytelling), painted-backdrop (reactive shader canvas), full-cinema (complete cinematic site), catalog (all shader presets side by side). This skill should be used when building storytelling websites, scroll-driven experiences, cinematic landing pages, or any page where sections reveal as chapters with color transitions and ambient 3D backgrounds. Triggers on scrollytelling, cinematic scroll, scroll-driven storytelling, Lenis smooth scroll, GSAP ScrollTrigger, scroll chapter reveal, scroll color transition, painted shader background, narrative scroll website, premium scroll experience, shader catalog.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

GSAP ScrollTrigger로 스크롤에 반응하는 웹 애니메이션을 구현합니다. 요소 고정, 진행도 연동, 가로 이동과 함께 위치 재계산 및 페이지 이동 시 정리도 다룹니다.

• 화면에 들어온 요소에 애니메이션 적용
• 스크롤 중 특정 구간을 고정해 표시
• 세로 스크롤로 콘텐츠를 가로 이동

Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing smooth scrolling experiences, creating parallax effects, building scroll-triggered animations, or developing immersive scrolling websites. Triggers on tasks involving Locomotive Scroll, smooth scrolling, parallax, scroll detection, scroll events, sticky elements, horizontal scrolling, or GSAP ScrollTrigger integration. Integrates with GSAP for advanced scroll-driven animations.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says "animate on scroll", "fade in as I scroll", "make it scroll like Apple", "parallax effect", "sticky section", "scroll progress bar", or "entrance animation". Also triggers for Copilot prompt patterns for GSAP or Framer Motion code generation. Pairs with the premium-frontend-ui skill for creative philosophy and design-level polish.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says "animate on scroll", "fade in as I scroll", "make it scroll like Apple", "parallax effect", "sticky section", "scroll progress bar", or "entrance animation". Also triggers for Copilot prompt patterns for GSAP or Framer Motion code generation. Pairs with the premium-frontend-ui skill for creative philosophy and design-level polish.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create landing pages that unfold as visitors scroll, using Lenis and GSAP ScrollTrigger. Combine sequential text reveals, layered sticky cards, backgrounds moving at different speeds, and loading transitions, with reduced-motion and mobile fallbacks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a landing page that unfolds section by section
• Present portfolio projects as layered sticky cards
• Reveal headlines and backgrounds as visitors scroll

Build chapter-based pages that move sideways as visitors scroll vertically. Deriving each scene from scroll position keeps reverse scrolling, jumps, and reloads consistent, with guidance for transitions, chapter links, keyboard controls, and reduced motion.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building a horizontal product tour
• Creating a chapter-based scrolling story
• Fixing scene mismatches after jumps or reloads

Build an award-winning "3D scroll" website of ANY kind from ONE prompt — product launch, portfolio, agency, contractor/home-services, restaurant, real estate, personal brand, event, app, etc. Generates a high-end cinematic hero visual + clips (360° orbit, fly-through, reveal, explode, parallax) fitting the site's subject with the Higgsfield MCP, slices them into a scroll-scrubbed canvas frame sequence with ffmpeg, builds a branded multi-section site (Lenis smooth scroll + scroll reveals), and launches it on localhost. Use when the user asks for a "3D scroll" site, scroll-driven hero/reveal, a cinematic landing page, a buckssauce/Apple/Awwwards-style scroll site, or "build me a website like X" — for a product OR a service, person, place, or brand. Trigger words: 3D scroll, scroll animation, cinematic hero, fly-through, turntable, scroll site, landing page, portfolio site, agency site, Higgsfield site.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

This skill should be used when the user asks to "build a scroll animation", "add ScrollTrigger", "pin a section while scrolling", "scrub an animation to scroll", "create a hero timeline", "do a horizontal scroll section", "split text and animate words", "animate a layout change with GSAP Flip", "sync ScrollTrigger with Lenis", "Lenis smooth scroll jittery", "ScrollTrigger markers drift", "ScrollTrigger pins break with Lenis/Locomotive", or "set up smooth scroll with GSAP pinning". Covers GSAP timelines, ScrollTrigger, SplitText, Flip, and Lenis/Locomotive smooth-scroll sync for code-driven web motion.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Build premium scroll-driven landing pages for service, product, food, and drink brands. Plan the visitor journey, page grammar, emotional peak, and bespoke signature move. Create dimensional heroes with independent visual planes, restrained motion, and separate mobile composition. Use supplied photos and footage or generate photoreal assets through kie.ai, write semantic HTML, and verify desktop, mobile, and reduced-motion scroll states visually. Use for "scrollcraft", "scroll craft", "layered hero", "premium hero", "cinematic hero", "scrollytelling", "scroll animation site", "a site where scrolling plays a video", "Apple-style landing page", "3D scroll world", "interactive landing page", "make my brand a scroll experience", "this looks like a template", or requests for a distinctive website that feels like an experience rather than a document.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Build product pages that reveal interfaces and explanations as visitors scroll. Uses GSAP ScrollTrigger to coordinate pinned scenes, gradual reveals, and section transitions while keeping the product story and interface readable.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Explain a product workflow through scrolling
• Reveal interface features in stages
• Connect product sections with coordinated transitions

Build web pages where scrolling controls animation and storytelling. Combine text reveals, pinned sections, and parallax, where layers move at different speeds, while considering mobile performance and accessibility.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Product feature walkthroughs
• Visual stories that unfold as readers scroll
• Before-and-after comparisons

Transform an article, case study, or brand story into a connected scrolling page. Choose scroll-controlled video, a real-time Three.js scene, or HTML with charts and typography, then organize the narrative into five to seven clear stages.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Turn a long article into a visual scrolling journey
• Present a product story through a connected 3D scene
• Explain report findings with scrolling charts and text

스크롤에 맞춰 영상과 시각 효과가 진행되는 랜딩 페이지를 제작합니다. 정보와 감정의 흐름을 설계하고 HTML 구현부터 스크롤 위치별 화면 검증까지 수행합니다.

• 스크롤로 영상이 진행되는 랜딩 페이지 제작
• 장면 변화로 브랜드 소개
• 보유한 사진과 영상으로 페이지 제작

Build websites with layered depth, scroll-driven transitions, and animated text using static images, CSS, and JavaScript. The skill covers asset inspection, visual planning, implementation, and checks for performance and motion accessibility.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a product landing page with scroll-driven effects
• Add layered depth and animated text to an existing site
• Inspect image transparency and plan asset placement

Build visual sequences that move forward and backward with page scrolling. Use video, image frames, canvas, SVG, or HTML elements in a sticky stage, while preserving keyboard access, static alternatives, and predictable visual states.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Showing product assembly through scrolling
• Explaining interface states or diagrams step by step
• Rotating objects or advancing photo sequences with scrolling

Build text that reveals word by word as readers scroll. Preserve inline links, emphasis, and responsive wrapping, while keeping complete text accessible to screen readers and immediately readable when reduced motion is preferred.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Revealing a headline as readers scroll
• Pacing the reading of a quote or manifesto
• Adding scroll-based text to product introductions

Add scroll-triggered text animations in which words rise into view one after another. Uses GSAP ScrollTrigger with hidden overflow masks, while preserving spaces, screen reader text, and static display for people who prefer reduced motion.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Animating a hero headline as it enters view
• Revealing section titles word by word
• Respecting reduced-motion preferences in text animations

Create coordinated website animations with GSAP, ScrollTrigger, and Lenis. Combine smooth scrolling, staged text and image reveals, pinned scenes, and pointer interactions, with guidance for performance, touch devices, and reduced-motion preferences.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Coordinating motion across a portfolio website
• Revealing text and images during scrolling
• Building pinned storytelling sections

Build a continuous 3D website where scrolling guides the camera, lighting, text, and interactions through planned chapters. The skill covers visual planning, responsive composition, progressive loading, accessibility, and performance checks for a live Three.js world.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a product story set in a continuous 3D world
• Build an interactive portfolio with a scrolling camera journey
• Present an exhibition through connected spatial chapters