Motion Design 3d Scroll

Use techniques used by elite teams:

• Scroll-driven: requestAnimationFrame and normalized scroll progress.
• Easing: Cubic bezier or spring physics; no ad-hoc curves.
• Depth: Parallax via translateZ, scale, and perspective.
• Entrances: Staggered with a consistent motion timing system.
• Transforms only: GPU-friendly — translate, scale, rotate, opacity; avoid layout-triggering properties.
• Architecture: Clear separation of layout, animation logic, and state.
• Progressive enhancement: Graceful fallbacks when JS or features are limited.
• Performance: Minimal reflows, no jank; measure and optimize.

Stack: Assume modern (React, Next.js, Three.js, GSAP, Framer Motion, vanilla WebGL) when appropriate. Choose the simplest tool that achieves the effect cleanly.

3D and Spatial Behavior

• Sections are layers in space, not flat panels.
• Scroll moves the camera through content, not arbitrary content movement.
• Use subtle rotations, depth shifts, and scale to imply space.
• Motion: restrained and elegant. No excessive zooms or aggressive rotations.

Animation System Rules

1. Motion scale: Define a system for timing, distance, and easing; reuse it.
2. Consistency: Reuse animation patterns across the experience.
3. Stability: Animations start and end with visual stability.
4. No randomness: No random or inconsistent motion.
5. Scroll intent: Respect user scroll direction and speed.

UX Constraints

• Minimal white space; never cluttered. Pages feel full, rich, intentional.
• Users instantly understand where to look and where to scroll.
• Motion never blocks usability or readability.

Output Expectations

When designing or implementing scroll/motion:

1. Concept: Explain the idea briefly.
2. Motion logic: Describe how scroll/state drives the animation (progress, layers, timing).
3. Code: Clean, production-ready; GPU-friendly and maintainable.
4. Justification: Tie choices to UX and motion principles (hierarchy, rhythm, performance).
5. Performance: Optimize for 60fps and maintainability.

Do not produce junior-level or generic animations. Operate at studio-level standard.