theme pour

pro

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

A motion study of a light / dark switch, on a 13.2-second loop, in a music artist's studio dashboard: frosted-glass cards over drifting light fields, with Streams in dot-matrix numerals and a field of dot columns, a Now mastering card with its album cover and a dot waveform that fills as the track plays, a 24-hour listening clock whose hand sweeps round lighting the bars behind it, the next release's countdown and steps, and Top tracks, Revenue and Top cities panels. In the light theme the cursor runs down the Top tracks list and the rows light up; a click on the sun and moon switch slides the knob and sends the dark theme pouring out of it as a thin stream of ink, which splashes at the bottom, throws up drops and rises up the page with a rippling, bright-edged surface until the whole dashboard is dark, its cards glowing orange, blue and teal. The cursor rests on the clock, goes back to the switch, and a second click pours the light theme back the same way. Both themes are full pages; the incoming one is revealed through a clip path rebuilt every frame from the liquid's surface and the stream. React with a single frame loop, CSS and inline SVG, Geist and Geist Mono, Phosphor icons, a 1440 × 900 stage that scales to fit any window, and frame-exact rendering (?rec, window.__render(t), window.__LOOP). The artist, the wordmark and the figures are invented; the album cover is the team's own AI image.

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

  • dark mode toggle
  • theme switch
  • liquid reveal
  • clip path
  • dashboard
  • glass cards
  • dot matrix numerals
  • listening clock
  • dot waveform
  • music player
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • svg
  • css clip-path

fonts

Geist, Geist Mono

Free fonts, linked in the prompt.

colors

  • #F1F0ED
  • #141319
  • #060609
  • #F4F2F8
  • #E07A2E
  • #2F6BFF
  • #14A3A8

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