animating-advanced

# Cinematic Interaction Designer ## When to use this skill - When the user asks for "Awwwards specific" or "Google Flow/Whisk" level animations. - When creating a **Hero Section** that needs to wow the user. - When implementing **Smooth Scrolling**, **Parallax**, or **3D Objects**. ## Workflow 1. **Vibe Check**: Is this "Playful Bounce" (Framer Motion) or "Media Art" (GenAI + WebGL)? 2. **Stack Selection**: - **GSAP**: For timelines and scroll triggers. - **R3F (Three.js)**: For 3D models and shaders. - **Lenis**: For smooth, momentum-based scrolling. - **Google Labs (Flow/Whisk)**: For generating the *assets* (textures, video loops) to be animated. 3. **Performance Check**: - Usage of `will-change`. - Offloading heavy 3D to generic GPU shaders. - Loading states (Preloaders). ## Instructions ### 1. The "Labs.Google" Pipeline (GenAI Assets) To achieve the specific "Google Labs" aesthetic: 1. **Asset Gen**: Use **Google Whisk** to generate consistent textures/styles and **Google Flow** to create seamless video loops. 2. **Implementation**: - Use these assets as *textures* on 3D objects in R3F. - Or use them as full-screen background video layers with `mix-blend-mode`. 3. **Interaction**: Use GSAP to distort/scale these assets on scroll. ### 2. Awwwards Recipe To achieve that specific "premium" feel: - **Smooth Scroll**: Install `@studio-freight/lenis`. - **Typography**: Big, massive fonts that move slightly slower than the scroll (...