Haar

What's inside

Prompts

HTML · 740 lines / React · 890 lines

Media

WebGL scene · Canvas

Hosting

cdn.orbital.supply, already in the prompt

Fonts

Schibsted Grotesk + Fragment Mono · 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

plan-loader, cascade, mask-reveal, scan-reveal

Tested & documented

09 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 / 890 lines in the full prompt

# Build: "Haar — a light studio hero" — a concave wall of glass cubes in sea fog, lit from inside by any logo

## 0. Brief

Haar (fictional) is a light studio in Aberdeen that builds walls of light and spatial installations; the name is the cold sea fog of the North Sea. The hero is one screen: a concave wall of aqua glass blocks floats over a still sea inside rolling fog, and the studio's logo shines through it as light. The logo is any one-colour SVG, set in one constant. A loader draws the plan of the wall cell by cell, then the cubes extrude from that exact plan, the fog rolls in and the light flickers on. An editorial grid of small mono labels and a regular grotesk sits around the wall. Scrolling in any direction, swiping or pressing the arrows steps through the index of works. Each step makes every cube turn over to draw that work's mark; hovering an entry previews it. The pointer pulls nearby cubes like a magnet, and they spring back smoothly.

The full prompt unlocks at launch.