Haar

Qué incluye

Prompts

HTML · 740 líneas / React · 890 líneas

Medios

Escena WebGL · Canvas

Alojamiento

cdn.orbital.supply, ya incluido en el prompt

Tipografías

Schibsted Grotesk + Fragment Mono · Google Fonts

HTML

Un archivo, sin librerías

React

React 19.3.0 · Tailwind 4.3.3 · Vite 8.3.2 · TypeScript 6.0.3

Movimiento

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

Probada y documentada

09 de octubre de 2026

• Reproducida en Claude
• Reconstruida a ciegas desde el prompt: React y HTML
• Revisada a 375, 768, 1440, 1920 px
• Revisor de la spec: 0 errores, sin enlaces a generadores

Cómo usarla

1. Claude

   Pega el prompt de HTML en un chat nuevo. Obtienes un index.html para servir por HTTP o publicar donde quieras.

2. Vite + React

   Abre un proyecto vacío de Vite + React y pega el prompt de React. Indica los paquetes exactos; las URLs de los recursos ya están dentro.

El prompt

Extracto / 890 líneas en el prompt completo

# 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.

El prompt completo se desbloquea en el lanzamiento.