time switch

pro

Get the prompt, project and Figma file with monthly ($29 a month) or yearly ($249 a year). Plus tax where it applies.

A wide pill switch whose dark well holds a pixel panorama of seven eras: a volcano and a brachiosaurus, snowy peaks and a mammoth, a cave and a campfire, a pyramid and a temple, a castle on a hill, a smoking brick factory, and a night skyline. The knob is a glass lens that magnifies the world under it, column by column, inside a capsule. Everything left of the knob is alive in its own colours, with smoke, snow, fire, a waving flag and lit windows; everything ahead is frozen in a slate night palette with faint stars. Inside the lens a traveller of the current era walks along and changes form at every border in a dithered dissolve with amber sparkles: a T. rex, a mammoth, a cave dweller with a torch, a Greek with a spear, a knight, a Victorian in a top hat and someone with a phone, leaving amber ghosts and echoes of the lens behind and doing a little thing of its era on arrival (a roar, a puff of snow, a heart notification). It plays a 15-second loop by itself with a drawn pointer; grab the knob and it is yours: dragging scrubs through time and release snaps to the nearest era. The knob is a real slider for the keyboard and screen readers (each era read out with its caption), there are optional 8-bit blips per era, and reduced motion gets a still that still follows the hand. The 320 × 76 scene is drawn in code at 3× with nearest-neighbour sampling: sprite strings, ordered dither, no images. ?rec and window.__render(t) draw any moment for frame-exact video export.

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

  • toggle
  • slider
  • pixel art
  • timeline
  • glass lens
  • magnifier
  • drag interaction
  • snap to step
  • ordered dithering
  • sprite animation
  • canvas 2d
  • 8-bit sound
  • web audio
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • canvas

fonts

Geist Mono

Free fonts, linked in the prompt.

colors

  • #E9E8E4
  • #D3D2CD
  • #0D1524
  • #5A6A84
  • #E8B384
  • #B4CFDC
  • #F2A65A
  • #18191C

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