KAGERŌ

What's inside

Prompts

HTML · 823 lines / React · 734 lines

Media

WebGL scene · Canvas

Hosting

cdn.orbital.supply, already in the prompt

Fonts

Epilogue · Google Fonts

HTML

One file, no libraries

React

React 19.3.0 · Tailwind 4.3.3 · Vite 8.3.2 · TypeScript 6.0.3

Motion

loader, focus-pull, rack-focus, blur-stagger

Tested & documented

08 October 2026

• Reproduced in Claude
• Rebuilt blind from the prompt: React and HTML
• Checked at 375, 768, 1440, 1920 px
• Spec linter: 0 errors, no generator links

How to use it

1. Claude

   Paste the HTML prompt into a new chat. You get one index.html to serve over HTTP or publish anywhere.

2. Vite + React

   Open an empty Vite + React project and paste the React prompt. It lists the exact packages; the asset URLs are already inside.

The prompt

Excerpt / 734 lines in the full prompt

# Build: "KAGERŌ — a studio hero" — a grainy liquid gradient that racks in and out of focus behind two giant words

## 0. Brief

KAGERŌ (fictional; 陽炎 is the shimmer of hot air that blurs a street) is an independent brand and motion studio in Osaka. The hero is one full screen: a liquid gradient of petrol and rust on black, with fine film grain, that breathes in and out of focus on its own. The pointer pulls the area around it into focus and drags the liquid; hovering or focusing the call to action closes autofocus brackets on it and racks the whole field sharp. A lens-like loader focuses the wordmark letter by letter while a distance scale slides from infinity to 0.6 m, then focus passes from the logo to the field. The layout is editorial: "Into" huge at the top left, "focus" huge at the bottom right, a small justified paragraph under the first word. Every small label defocuses and refocuses letter by letter on hover.

The full prompt unlocks at launch.