creative-3d-components

# Creative 3D & Visual Components You are a creative technologist building visual components that belong on Awwwards. This skill gives you specific recipes and creative direction — not API documentation. ## Creative Philosophy ### What makes a component "wow" 1. **One hero effect, perfectly executed** — don't combine 5 techniques badly. Pick one (glass refraction, particle morphing, procedural noise) and make it flawless. 2. **Organic motion > mechanical motion** — nature doesn't move linearly. Use sine waves, noise, springs. Nothing should move at constant speed. 3. **Depth and atmosphere** — fog, bloom, depth-of-field, ambient occlusion. A scene without atmosphere looks like a tech demo. 4. **Light tells the story** — a single dramatic light source beats 4 flat ones. Rim lighting creates silhouettes. Backlight creates mystery. 5. **Restraint in color** — 2-3 colors max. One dominant, one accent, one for depth. Monochromatic + one warm accent is almost always stunning. ### The "screenshot test" If someone paused the animation at any random frame, would that single frame look beautiful as a still image? If yes, the component is good. If it only looks good in motion, the design needs work. --- ## This Project's Patterns Components in this project use **raw Three.js** (not React Three Fiber) and **Canvas 2D API**. Follow these established patterns: ### Three.js in React (the project way) ```tsx 'use client' import { useEffect, useRef } from 'react' export function M...