Abbe

What's inside

Prompts

HTML · 555 lines / React · 553 lines

Media

WebGL scene · image · svg

Hosting

cdn.orbital.supply, already in the prompt

Fonts

Mona Sans · Google Fonts

HTML

One file · 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)

Motion

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

Tested & documented

21 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 / 553 lines in the full prompt

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

The full prompt unlocks at launch.