Motion

The Motion domain owns terminology, review procedure, and evidence-bounded practice guidance for product-layer motion.

Scope Boundary

In scope: naming observable motion, reviewing declared behavior, distinguishing heuristics from measured contracts, and identifying evidence needs.

Out of scope: universal timing or easing rules, unmeasured performance claims, and permission to add animation or decorative properties to reusable Layout pattern CSS.

Start Here

Task	Route
Choose a behavior from the user task.	Motion Decision Tree
Record states, owners, interruption, and evidence.	Motion Brief
Build a scroll-driven product story and inspect runnable examples.	Scroll-driven Story and Scroll Story Lab
Keep the page fixed while navigating between full-screen chapters.	Full-viewport Scene Navigation and runnable example
Apply feedback, disclosure, modal, reorder, progress, and drag contracts.	Motion Interaction Recipes
Copy a working GSAP ScrollTrigger and Lenis setup, pinned horizontal travel, or a CSS scroll-timeline scrub.	Scroll Choreography Technique
Copy split-word headline rises, scroll-lit paragraphs, count-ups, or a marquee.	Kinetic Type Technique

These workflows and worked cases are usable experimental guidance. Expected-result tables are test designs; actual product, engine, and reader evidence must be recorded separately. Review on a failed task, a source change, or a changed ownership contract.

Documents

• Motion Vocabulary maps observed behavior to implementation-neutral terms while preserving ambiguity.
• Motion Review Workflow structures evidence-first review and remediation.
• Motion Practice Reference classifies mechanics, heuristics, platform notes, and unsupported claims.
• Observed Choreography Transcription transcribes an observed scroll choreography into Scene Composition Contract vocabulary.

Source-Backed Deep Dives

• Accessible Motion And Equivalent Feedback. Separate motion preferences, automatic updates, and equivalent feedback.
• Interruption And Retargeting. Resolve repeated input, cancellation, and stale completion callbacks.
• Motion Rendering And Performance. Choose native mechanisms and diagnose measured delivery failures.

Visual Reference: Motion Prompt

Motion Prompt by @ssaengcho is an external Korean motion dictionary for comparing effects visually and describing the intended movement. Its interface lists 36 effects and five combinations across entrance/exit, emphasis, sequencing, space, scene transitions, shape/focus, timing, and text.

Use it to select an observable effect, then record the actual product behavior in the Motion Brief: trigger, moving property, start/end state, interruption, reduced-motion alternative, and completion feedback. For example, distinguish moving an element from moving imagery inside a stationary frame, and distinguish changing opacity from revealing through a moving mask.

The dictionary's example durations and prompts are reference choices, not StyleGallery defaults or measured performance guarantees. Its naming is not a replacement for the Motion Vocabulary.

Run all 41 local examples. Every effect and combination has its own execution page, timeline scrubber, restart, pause, reverse, final-state control, and reduced-motion alternative. Local examples use StyleGallery's theme rather than copying the reference site's presentation.

Complete Effect Inventory

No.	Source effect	Local execution
1	Fade in	페이드 인
2	Slide in	슬라이드 인
3	Scale in	스케일 인
4	Mask reveal	마스크 리빌
5	Overshoot	오버슈트
6	Bounce	바운스
7	Pulse	펄스
8	Shake	셰이크
9	Stagger	스태거
10	Typewriter	타이프라이터
11	Tracking animation	트래킹 애니메이션
12	Trim paths	트림 패스
13	Zoom in	줌 인
14	Panning	패닝
15	Position inside mask	프레임 내부 이동
16	Parallax	패럴랙스
17	Cross dissolve	크로스 디졸브
18	Wipe	와이프
19	Push	푸시
20	Iris reveal	아이리스 리빌
21	Rotation	로테이션
22	Floating	플로팅
23	Morphing	모핑
24	Blur reveal	블러 리빌
25	Linear	리니어
26	Ease in	이즈 인
27	Ease out	이즈 아웃
28	Ease in out	이즈 인 아웃
29	Text scramble	텍스트 스크램블
30	Karaoke highlight	가라오케 하이라이트
31	Word by word	워드 바이 워드
32	Line by line reveal	라인 바이 라인 리빌
33	Text wave	텍스트 웨이브
34	Character flip	캐릭터 플립
35	Count up	카운트업
36	Text stroke reveal	텍스트 스트로크 리빌

Complete Combination Inventory

No.	Source combination	Local execution
1	Zoom and fade	제품을 부드럽게 보여주기
2	Upward slide and fade	제목이 올라오며 나타나기
3	Overshoot and rotation	로고가 돌면서 톡 나타나기
4	Tracking contraction and fade	넓게 퍼진 글자가 모이기
5	Staggered image and title	사진 다음에 제목 등장

Source And Verification Boundary

Source review: 2026-09-29. The public page, all 36 rendered effects, all five rendered combinations, and their Web Animations tracks were inspected. The first definition file contains 28 effects; a second script adds eight text effects. The local inventory checks both sets and the five combination presets rather than trusting the headline count alone.

The local implementations preserve the observed durations, delays, repetitions, keyframe sequence, and moving properties. Two corrections are explicit: the reference's whole-timeline step easing hides intermediate count-up and scramble values; the local versions step each segment so those values appear. Theme colors and image-example materials differ intentionally. Image combinations reuse an existing project photograph instead of the reference's schematic placeholder.

These are independent implementations with attribution to Motion Prompt / @ssaengcho, not a distribution of its source bundle, prompt collection, or a claim of an upstream license. The website repository records source-file hashes and captured tracks alongside its coverage tests. Chromium observations are not a cross-browser or native-platform conformance claim.

Domain Contract

See StyleGallery Domains for lifecycle, provenance, page membership, and staleness rules.

IA Navigation

Parent: StyleGallery. Next: Motion Decision Tree.