RIME

What's inside

Prompts

HTML · 490 lines / React · 513 lines

Media

video-loop · video-scrub · Background image · WebGL scene · svg

Hosting

cdn.orbital.supply, already in the prompt

Fonts

Saira · Google Fonts

HTML

One file · gsap 3.15.0 (+ ScrollTrigger · jsDelivr) · lenis 1.3.26 (jsDelivr) · rime-planner-v1 (CDN ES module · three.js 0.186.1)

React

react 19.3.0 · vite 8.3.2 · typescript 6.0.3 · tailwindcss 4.3.3 · gsap 3.15.0 (+ ScrollTrigger) · @gsap/react 2.1.2 · lenis 1.3.26 · rime-planner-v1 (CDN ES module · three.js 0.186.1)

Motion

door-loader, pinned-video-scrub, pinned-monitor, sticky-sheets

Tested & documented

22 October 2026

• Reproduced in Claude
• 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 / 513 lines in the full prompt

# Build: "RIME" — cold rooms and refrigeration for kitchens and food businesses

## 0. Brief

A long, cold, technical landing for RIME, a fictional refrigeration contractor for restaurants, hotels and food businesses with a 24/7 breakdown line. Concept: the pull-down, from kitchen heat to setpoint. A door loader counts +21 °C → +2 °C as the page loads; each section holds a temperature that a rail, the nav readout and the type width follow. Blue is cold and focus; amber only heat or alarm. Moments: the hero door shutting with scroll, a monitor living a freezer's bad week, room sheets stacking to −40 °C, and a five-step planner modal where a 3D cut-away room builds itself and ends in a printable spec sheet.

The full prompt unlocks at launch.