Melt

Field notes

A showreel page for a film studio. Full-screen stills melt into each other in a WebGL shader, the big title melts with them, the cursor stirs the picture like water, and hovering a project in the work index melts the reel straight to it.

• WebGL shader
• Pointer interaction
• Portfolio
• Dark theme

Melt is the site of Tarn, a fictional film and commercial studio. A full-screen reel sits behind the whole page and cycles through six projects: each shot smears and drips into the next while the new one pushes in, and the project title in huge type warps and dissolves with it. Moving the mouse (or dragging a finger) stirs the picture, which settles back within a second. Scroll down and the reel darkens behind the work index: point at, tab to or tap a row and the reel melts to that project and holds it; move away and the reel carries on from there. A short studio note and a big contact link close the page.

Until someone moves the mouse or presses a key, a cursor swipes across the reel once per loop so the stir shows in the 10-second clip. The studio name, projects, stills, copy and email live in one file, and your own stills of any size or aspect ratio each cover-fit. Reduced motion gets a still reel whose images crossfade when you pick a row; without WebGL2 the same images crossfade on the loop.

How it's built

• One fragment shader does the melt: each pixel traces back 36 steps through a smooth noise field plus an invented camera move (push, pan or turn, by cut), averages the outgoing still along that path, and a soft value-noise mask lets the incoming still seep in as it pushes from 1.07 to 1.0.
• The reel is a pure function of time: the first melt starts at 0.4 s, the slot length is derived from the number of projects, and frame 0 equals frame 10 pixel for pixel. The recorder can jump to any frame.
• The stir is up to 16 pointer samples passed as uniforms; each pushes the picture along its velocity and fades over a second. The demo cursor's samples come from its path at t minus each age, so the stir in the clip is deterministic too.
• Hovering a row mid-melt copies the current canvas into a texture once and melts from that, so the reel never jumps back to a clean still.
• The titles stay real text: two stacked spans with SVG turbulence displacement filters whose strength follows the same melt progress as the shader.

Inside the prompt

Every file below is written out in full, so your agent creates the project exactly — no guessing, no missing pieces.

melt-showreel/
├─ .gitignore
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ App.tsx
   ├─ config.ts
   ├─ index.css
   ├─ main.tsx
   ├─ vite-env.d.ts
   ├─ components/
   │  ├─ Ghost.tsx
   │  ├─ Hero.tsx
   │  ├─ Reel.tsx
   │  ├─ Studio.tsx
   │  └─ WorkIndex.tsx
   ├─ gl/
   │  └─ melt.ts
   └─ lib/
      ├─ loop.ts
      ├─ time.ts
      └─ timeline.ts

Recut it

• Rename the studio and rewrite the projects and copysrc/config.ts → STUDIO / NAV / PROJECTS / STUDIO_COPY / EMAIL
• Use your own stills (any aspect ratio)src/config.ts → BASE / PROJECTS[].image
• A stronger or gentler cursor stirsrc/gl/melt.ts → STIR
• Retime the meltssrc/lib/timeline.ts → FIRST / meltFor
• Change the colourssrc/index.css → @theme