library

effects

mcp

night dial

free

The 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