library

effects

mcp

round hub

pro

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

A 1080 × 1080 motion study of a round smart-home hub: a 640 px brushed-metal ring set into a pale wall, holding a dark glass face with a soft gloss. Four icons sit on an arc down the right of the glass (thermometer, lightbulb, music, wind) and a glass pill travels between them, stretching as it goes; a ring spreads from each icon as it's tapped. The face cycles through four modes, its text sliding up line by line out of its own windows: the climate, 21 °C, heating to 22°, ready in 12 minutes; the living room at 68 %, warm white, 2700K, dims at 23:00, under a warm wash of light; now playing in the kitchen, 2:14, Slow Lights by Nora Vale, with a bouncing waveform; and outside, air quality 32, the air is clean, with drifting particles. A gauge of 46 ticks down the left edge fills to each mode's level with a brighter tick at its edge, and a soft glow low on the glass takes each mode's colour, amber, warm white, silver or mint. Canvas 2D for the light, HTML and CSS with React for the rest, Geist and Geist Mono, four Lucide icons inlined, a stage that scales to fit any window, and frame-exact rendering (window.__render(t), window.__LOOP and a ?rec mode); reduced motion shows one still.

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

  • smart home
  • round display
  • mode switcher
  • gauge
  • music player
  • tap ripples
  • canvas 2D
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • canvas

fonts

Geist, Geist Mono

Free fonts, linked in the prompt.

colors

  • #060607
  • #D9D9D6
  • #A9A9A5
  • #FF8C50
  • #FFC878
  • #82E1C8
  • #FFFFFF

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