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)

'use client'
import { useEffect, useRef } from 'react'

export function MyComponent() {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const container = containerRef.current
    if (!container) return

    // Dynamic import Three.js
    let alive = true
    import('three').then((THREE) => {
      if (!alive) return

      const W = container.clientWidth || 500
      const H = container.clientHeight || 500

      const scene = new THREE.Scene()
      const camera = new THREE.PerspectiveCamera(50, W / H, 0.1, 100)
      const renderer = new THREE.WebGLRenderer({ antialias: true })
      renderer.setSize(W, H)
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
      container.appendChild(renderer.domElement)

      let raf: number
      const loop = () => {
        raf = requestAnimationFrame(loop)
        // animate here
        renderer.render(scene, camera)
      }
      loop()

      // CLEANUP — non-negotiable
      return () => {
        cancelAnimationFrame(raf)
        renderer.dispose()
        container.removeChild(renderer.domElement)
      }
    })

    return () => { alive = false }
  }, [])

  return (
    <div ref={containerRef} className="flex h-full w-full items-center justify-center bg-sand-950" />
  )
}