Motion Plan for Premium Experience

Create a cinematic first impression with staged headline and media reveal.

Timing: 500ms to 700ms enters; 120ms to 180ms micro transitions.

Trigger: On initial viewport load.

• - Use masked line reveal for headline with stagger.
• - Animate CTA group after heading settles.
• - Keep motion smooth with transform + opacity only.

Preserve narrative continuity between route changes.

Timing: Exit 180ms to 240ms, enter 280ms to 360ms.

Trigger: Route navigation.

• - Use AnimatePresence at layout boundary.
• - Exit quickly, enter slightly slower for premium rhythm.
• - Avoid heavy blur effects on low-power devices.

Add subtle depth and responsiveness to premium surfaces.

Timing: 120ms to 180ms response.

Trigger: Pointer move over interactive surfaces.

• - Use pointer-driven transform interpolation for spotlight cards.
• - Clamp movement for stability.
• - Disable on touch devices.

Guide attention section-by-section with cinematic pacing.

Timing: 320ms to 560ms per section reveal.

Trigger: Elements entering viewport.

• - Use whileInView for most sections.
• - Apply staggered reveal for grouped cards.
• - Use GSAP only for pinned storytelling sequences.

Communicate interactivity with premium tactile feedback.

Timing: 140ms to 220ms.

Trigger: Hover/focus states.

• - Lift by 2 to 4px and increase shadow depth.
• - Add directional border/glow accent where needed.
• - Avoid overscaling cards.

Improve storytelling emphasis without harming readability.

Timing: 360ms to 560ms with 40ms to 70ms stagger.

Trigger: Initial render or section enter.

• - Use line-level reveal in hero and key section titles.
• - Keep body copy static or minimal fade.
• - Prefer mask-based upward reveal.

Add cinematic depth with layered movement.

Timing: Scroll-scrubbed, continuous.

Trigger: Scroll position.

• - Restrict GSAP usage to parallax and pinned process scenes.
• - Use data attributes for reusable parallax speed.
• - Gracefully disable for reduced-motion users.

Create a premium desktop interaction layer.

Timing: 60ms to 120ms lag smoothing.

Trigger: Pointer movement and hover states.

• - Use custom cursor ring with contextual states.
• - Differentiate hover targets with cursor morph.
• - Hide cursor effect for touch and reduced-motion.

Maintain ambient motion in hero and transition scenes.

Timing: 8s to 16s loops.

Trigger: Always-on ambient layer.

• - Use low-density particles with slow drift.
• - Keep opacity subtle to avoid visual noise.
• - Pause or simplify on lower performance devices.

Deliver high-end visual identity in the hero chapter.

Timing: Continuous low-speed animation.

Trigger: Hero viewport.

• - Keep one core mesh and minimal lights for performance.
• - Add gentle rotation and pointer-reactive tilt.
• - Lazy-load scene and avoid blocking first paint.

Provide elegant feedback during route and data transitions.

Timing: 200ms to 1200ms depending on loading state.

Trigger: Page/data loading boundaries.

• - Use branded shimmer/loader rather than generic spinner.
• - Keep loader short and non-disruptive.
• - Prefer skeletons for content-heavy sections.

Smoothly introduce each page with continuity.

Timing: 280ms to 420ms.

Trigger: Route mounted.

• - Fade + slight upward translation.
• - Respect route priority and above-the-fold readability.
• - Pair with subtle section stagger.

Avoid abrupt route changes and preserve premium feel.

Timing: 160ms to 240ms.

Trigger: Before route unmount.

• - Fast fade and slight downward shift.
• - Exit faster than enter for responsiveness.
• - Do not block navigation with long exits.