keycap sphere
proGet the prompt, project and Figma file with monthly ($29 a month) or yearly ($249 a year). Plus tax where it applies.
A one-page website for a fictional language lab, "NOVERBA — An experiment in language", told as one continuous 3D scene over 11 screens of pinned scroll. A sphere of 77 real keycap models, each printed with its own legend, floats over a procedural mountain valley under a cold ultramarine sky, the keys breathing and springing outwards under the cursor. Scrolling decodes it: the rings spin up and spread, the inner light core flares through god rays and bloom, and the sphere breaks apart ring by ring along cones so no ring ever crosses another, while the valley dissolves into a near-black void under northern lights. Ten keys sink into the hollow centre and open out into MAKE IT REAL, and further down the same keys rearrange themselves, with weightless inertia, into MATERIAL. In the last two sections the cursor becomes a small sphere of light with a smoky trail that lights and tilts the keys, and keys under it turn to dark glass with a blue wireframe. Every key's pose is a pure function of scroll, so scrolling back rebuilds the perfect sphere, and a Node test checks the choreography for collisions. Titles in an extended grotesque rack-focus in, body copy fades up line by line, a phase indicator tracks Activation to Material, a dot-sphere preloader counts real loading and opens the scene with a circle, and a ring cursor follows the pointer. A ?demo=1 mode plays a frame-exact scripted take for reels, and phones get their own layout.
what you get
- prompt
- Paste it into Claude, Codex, Kimi or Cursor to rebuild this template. Tested: we rebuild every template from its prompt before it goes live.
- project
- The Vite + React source code as a .zip, ready to run.
- figma file
- The editable design as a .fig file to import into Figma.
what's inside
- preloader
- hero
- scroll animation
- custom cursor
- cursor tracking
- film grain
- webgl shader
- spring physics
- progress bars
- autoplay
stack
- react
- vite
- typescript
- three
- webgl
- gsap
- scrolltrigger
- postprocessing
fonts
Archivo, Inter
Free fonts, linked in the prompt.
colors
- #050A22
- #3A57A6
- #7F9BE6
- #C4DCFF
- #E8EEF0
- #3D7BFF
license
With monthly or yearly: personal and commercial work, client projects included. Don't resell or share the template, prompt or files.
read the license

