The list: every tool behind a crazy website

A library of finished cinematic websites, each with the full prompt that builds it. Pick a site you like, copy its prompt into Claude Code, and you get the whole build: the scroll, the 3D, the video and the type, not a hero section and a guess.

TipStarting from a finished site and changing it into yours beats starting from a blank file every time. You learn the moves by seeing them work.

The Site of the Day archive is the best free education in web design there is. Open one, scroll it slowly, and write down what moves, when, and why it feels expensive.

TipStudy one site properly instead of skimming fifty. Screenshot the hero, note the fonts, and time the transitions.

A hand-picked gallery of sites with every entry recorded as video, so you see the motion and not just a still. It's faster than Awwwards when you want to see a dozen hero ideas in five minutes.

The smooth scroll under most award sites. It takes the browser's jumpy wheel steps and turns them into one continuous glide, so everything tied to scroll moves like a film instead of stuttering. It's about two lines of code, and it's the single biggest feel upgrade you can make.

// npm i lenis
import Lenis from 'lenis'
import 'lenis/dist/lenis.css'

const lenis = new Lenis({ autoRaf: true })

// using GSAP too? let GSAP's clock drive it instead:
// const lenis = new Lenis()
// lenis.on('scroll', ScrollTrigger.update)
// gsap.ticker.add((t) => lenis.raf(t * 1000))
// gsap.ticker.lagSmoothing(0)

TipDon't add a second smoothing on top (a lerp in your own scroll handler). Smoothing smoothed scroll is what makes a site feel laggy.

The animation engine. ScrollTrigger ties any animation to the scrollbar, and SplitText breaks headings into lines, words or letters so they can reveal one at a time. Every plugin is free now, including the ones that used to be paid.

// npm i gsap
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

// the hero image drifts slower than the page: instant depth
gsap.to('.hero img', {
  yPercent: 20,
  ease: 'none',
  scrollTrigger: { trigger: '.hero', start: 'top top', end: 'bottom top', scrub: true },
})

If your site is React, Motion is the natural way to animate it: entrances, hover springs, layout changes and exit animations, written as props on the element. Use it for the interface and GSAP for long scroll-driven sequences.

// npm i motion
import { motion } from 'motion/react'

<motion.h2
  initial={{ opacity: 0, y: 24 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{ type: 'spring', bounce: 0 }}
/>

The library behind nearly every 3D website. It draws a real 3D scene into a canvas: models, lights, materials, particles, shaders. The first scene takes ten lines. Making it look good is about lighting and restraint, not more objects.

// npm i three
import * as THREE from 'three'

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(innerWidth, innerHeight)
document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(40, innerWidth / innerHeight, 0.1, 100)
camera.position.z = 4

const knot = new THREE.Mesh(
  new THREE.TorusKnotGeometry(1, 0.3, 200, 32),
  new THREE.MeshNormalMaterial()
)
scene.add(knot)

renderer.setAnimationLoop((t) => {
  knot.rotation.y = t / 1000
  renderer.render(scene, camera)
})

Three.js written as React components. drei is its toolbox: studio lighting, floating objects, glass and transmission materials, scroll controls and model loading, each one a single tag.

// npm i three @react-three/fiber @react-three/drei
import { Canvas } from '@react-three/fiber'
import { Environment, Float } from '@react-three/drei'

export default function Hero() {
  return (
    <Canvas camera={{ position: [0, 0, 4], fov: 40 }}>
      <Environment preset="studio" />
      <Float>
        <mesh>
          <torusKnotGeometry args={[1, 0.3, 200, 32]} />
          <meshStandardMaterial metalness={1} roughness={0.15} />
        </mesh>
      </Float>
    </Canvas>
  )
}

Figma for 3D. You model, light and animate a scene in the browser and export it as a link you drop into your site. It's the fastest route to a 3D hero if you'd rather design than code. Keep it to one simple shape with two or three materials; that reads as premium, a busy scene reads as a toy.

// npm i @splinetool/react-spline
import Spline from '@splinetool/react-spline'

<Spline scene="https://prod.spline.design/<your-scene>/scene.splinecode" />

Layer shader effects (grain, liquid distortion, light rays, dithering, mouse trails) on images and text in a visual editor, then embed the result with a script tag. Good for an animated background that would take days to write by hand.

When you need your own 3D object (a product, a prop, a set), you build it in Blender and export a .glb file for Three.js to load: File, Export, glTF 2.0, format .glb. Apply your transforms before exporting so it arrives at the right size and the right way up.

Where the photographic plates, products and hero films come from. Use Nano Banana Pro for stills and Kling for video, both in one place. A generated photoreal background behind real HTML type is the biggest quality jump there is for a landing page.

TipGet the still right first, then animate it. Ask the video for a slow camera push-in; "slow motion" tends to come back as a near-still frame.

Every video on a website should go through ffmpeg once. AI video tools often hand back HEVC, which Chrome frequently won't play: you get a black hero and no error. This turns any clip into a small H.264 file that starts instantly.

ffmpeg -i hero.mov -c:v libx264 -pix_fmt yuv420p -crf 22 \
  -movflags +faststart -an hero.mp4

# video you scrub with the scroll: make every frame a keyframe
ffmpeg -i hero.mov -c:v libx264 -pix_fmt yuv420p -crf 24 -g 1 \
  -movflags +faststart -an hero-scrub.mp4

3D models straight out of Blender or an AI generator are often 20 to 50 MB. One command compresses the mesh and textures, usually to a tenth of the size, without a visible difference.

npx @gltf-transform/cli optimize model.glb model.min.glb \
  --compress draco --texture-compress webp

Professional typefaces that are free for commercial use, and not the same five every AI site uses. Google Fonts (fonts.google.com) is the other free source. The rule that matters more than the font: one display face for headings and one plain sans for everything else. Two fonts, never three.

The AI that actually writes the site. It runs in your terminal, reads and edits real files, installs packages and runs the page to check its own work. Paste in a full build prompt and it builds the site end to end; then you change it in plain words.

npm install -g @anthropic-ai/claude-code
mkdir my-site && cd my-site
claude

TipLong, specific prompts win. "Make a cool landing page" gets you a template; a prompt that names the fonts, the colours, every section and how each one moves gets you a site.

Puts the site on a real URL in under a minute. Run one command in the site's folder, log in once, and you get a live link to send people.

npx vercel          # preview link
npx vercel --prod   # the real one