nocelle
proGet the prompt, project and Figma file with monthly ($29 a month) or yearly ($249 a year). Plus tax where it applies.
A full-screen hero for a fictional ambient lamp, Nocelle One: a black page in Inter with a soft violet iris light glowing on the left behind the copy ("Ambient light, zero glare", the ExtraLight headline "Soft light. Clear mind.", a subline, a cream pill button "Explore Nocelle One" and a "Scroll to discover" link), a top bar with the wordmark, three tabs in a glass pill and a Pre-order pill, and the giant words "nocelle one" fading out along the bottom edge. On the right, a big portrait of a woman on black that you can grab and stretch: the skin near the grab point travels with the pull and the rest of the face bends round it while the frame's edges stay pinned (a WebGL smudge whose inverse is solved per pixel), the skin trails the pointer a little and rubber-bands past 40% of the portrait, and a grimace snaps in while she's stretched. Let go and she springs home with one gentle overshoot and comes back with a new expression: the mood behind the grimace is switched while it's hidden and the grimace melts away in the fastest part of the spring, with a faint motion blur along the movement. Ten AI-generated moods of the same woman. A hint at the bottom right fades out on the first grab. Touch works the same way; on phones the portrait sits full width under the copy; on tall windows it's a square whose edges fade into the light. Includes reduced motion (no overshoot, no blur), a still portrait without WebGL, WebGL context-loss recovery, and a deterministic recording build (?rec, driven frame by frame through window.__sim) with a script that records the scripted cursor run.
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
- hero
- navigation
- webgl shader
- drag and stretch
- spring physics
- portrait
- film grain
stack
- react
- vite
- typescript
- webgl
fonts
Inter
Free fonts, linked in the prompt.
colors
- #000000
- #F4F2EE
- #D6CAFF
- #7A5EF0
- #341E96
- #E9E6E0
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

