cinematic-gsap-lenis-motion-systemlisted

# Cinematic GSAP Lenis Motion System ## Use When - The site needs a full premium motion language, not one isolated animation. - Smooth scrolling, scroll reveals, pinned scenes, parallax, hover motion, and cursor behavior should feel connected. - The target feel is luxury editorial, Apple-level polish, creative studio portfolio, or immersive cinematic storytelling. - The stack can use GSAP, ScrollTrigger, and Lenis. ## Motion Taste - Smooth, elegant, slightly delayed, and intentional. - Staggered motion should guide reading order. - Layered movement should create depth without making the interface feel busy. - ScrollTrigger should start scenes when they enter the viewport, not react to every tiny scroll. - Prefer subtlety over intensity. Avoid: - Bounce, elastic, springy, or playful motion. - Fast abrupt transitions. - Large scale jumps. - Over-animated UI. - Flashy gaming-style effects. ## Base Tokens - Eases: `power3.out`, `power4.out`, `expo.out`. - Scroll scrub: `scrub: 0.8` to `1.4` for cinematic delay. - Reveals: `0.75s` to `1.1s`. - Hover: `0.35s` to `0.6s`. - Cursor lag: `0.25s` to `0.45s`. - Text stagger: words `0.035s` to `0.07s`, lines `0.08s` to `0.14s`. - Card stagger: `0.06s` to `0.1s`. - Reveal trigger: `start: "top 82%"`. - Pin handoff: `anticipatePin: 1`. ## Setup Install: ```bash npm i gsap lenis ``` Initialize once, after the DOM exists. Lenis drives its RAF through the GSAP ticker so ScrollTrigger and smooth scroll stay synced. ```js import Lenis f