Abbe

Qué incluye

Prompts

HTML · 555 líneas / React · 553 líneas

Medios

Escena WebGL · image · svg

Alojamiento

cdn.orbital.supply, ya incluido en el prompt

Tipografías

Mona Sans · Google Fonts

HTML

Un archivo · gsap 3.15.0 + ScrollTrigger (jsDelivr) · lenis 1.3.26 (jsDelivr) · prism-engine-v1 (CDN ES module · three.js 0.186.1 inside)

React

react 19.3.0 · vite 8.3.2 · typescript 6.0.3 · tailwindcss 4.3.3 · gsap 3.15.0 · @gsap/react 2.1.2 · lenis 1.3.26 · prism-engine-v1 (CDN ES module · three.js 0.186.1 inside)

Movimiento

optics-loader, glass-intro, overlapping-sheets, pinned-strip

Probada y documentada

21 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 / 553 líneas en el prompt completo

# Build: "Abbe" — a creative studio seen through glass

## 0. Brief

One-page site for Abbe, a fictional creative studio in Jena (the Abbe number: how much glass splits light). Line: "Clarity first. Colour after." The interface is grey; colour only appears through glass. One WebGL engine on one fixed canvas draws a glass object refracting what is behind it with spectral fringes: the studio's A mark over a giant ABBE, a capsule that gives six grey project photos their colour back, four shapes for four disciplines, the visitor's SVG logo over LET'S TALK. Paper and graphite sheets slide over the glass chapters; the loader is an optics bench.

El prompt completo se desbloquea en el lanzamiento.