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 (Parallax).
• •Images: Reveal effects (clip-path) upon scrolling into view.

3. GSAP Patterns

Always use useGSAP hook in React (safe cleanup).

useGSAP(() => {
  gsap.from(".hero-text", {
    y: 100,
    opacity: 0,
    stagger: 0.1,
    duration: 1.5,
    ease: "power4.out"
  });
}, { scope: containerRef });

4. Three.js / WebGL

• •Use drei for helpers (OrbitControls, Environment).
• •Optimization: Always compress .glb files using gltfjsx + modifiers.

Self-Correction Checklist

• •"Is this accessible?" -> Don't animate width/height (causes reflow). Animate transform.
• •"Does it lag on mobile?" -> Disable heavy WebGL on low-end devices.