night dial
freeThe prompt is free with an account: sign up with Google or email, and your copy starts right after. The project and Figma file come with monthly or yearly.
A sleep-schedule dial with no text, on a soft white card. A recessed ring with 48 ticks holds two white knobs, a moon at bedtime and a sun at wake-up, with a glossy arc between them that runs from deep indigo through violet to peach. In the centre sits a white sphere whose night side is the sleep window: the terminator follows the arc, and the night side is a deep indigo sky with twinkling stars and a faint nebula. Twenty-four thin bars under the dial fill with the hours of sleep in the arc's colours. It plays an 8-second seamless loop with a drawn cursor: the sun knob is dragged almost all the way round to 23 hours, so the sphere turns into a starry night and the card dims a little, then back to an hour, so it turns white again, then home to eight hours. The dial is one WebGL2 fragment shader on a 2160-pixel canvas; the card, knobs, bars and cursor are plain HTML on a 1080 stage that scales to the window. Every frame is a pure function of time, with window.__render(t) and a ?rec mode for frame-exact video export; reduced motion shows one still. No fonts or images, so it runs offline.
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
- sleep schedule
- circular range slider
- day and night sphere
- starfield shader
- hour bars
- demo cursor
- autoplay loop
- frame-exact recorder
stack
- react
- vite
- typescript
- webgl
colors
- #EBEBEF
- #F6F6F9
- #3D40A8
- #7A69F0
- #FCBD9E
- #F2A33A
license
Free account: personal use only. Monthly or yearly adds commercial and client work. Don't resell or share the template, prompt or files.
read the license

