smartwatch widgets

pro

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

A smartwatch interface concept on a dark studio photo of an invented titanium watch, on a 1080 × 1080 stage that scales to the window and loops every 20 seconds. The UI is clipped to the watch's screen, a glass layer with blue and pink rim tint sits on top, and the case glows in the colour of whatever is on screen. A finger dot shows every gesture. The watch face (a big 10 and a lime 09) swipes up into five live colour tiles: Music with an equaliser, Steps with a week of bars, Heart with a beating icon, Timer and Weather with a pulsing sun. The Timer tile grows to full screen: two taps on plus, Start, and the screen becomes a liquid whose level drops with a wave while the digits recolour where it has left; it keeps counting on its tile. Music opens to a big equaliser: Next spreads a violet circle from the button and swaps the track, Pause settles the bars into dots as the icon morphs, Play wakes them. A white notification pill drops in and opens into a message with three replies; No rush turns lime and the card folds into Sent. Heart draws an ECG while measuring and counts up to 72 bpm, then beats. A swipe down brings the face back, seamlessly. One pure render(t) function writes inline styles and SVG attributes, so any frame can be drawn on its own (window.render(t), window.__RENDERING__, ?rec). Geist and Geist Mono, a reduced-motion 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

  • smartwatch ui
  • ui on photo
  • widget board
  • live tiles
  • tile to full screen
  • liquid timer
  • clip-path wave
  • equaliser
  • circular reveal
  • icon morph
  • notification
  • quick replies
  • ecg line
  • finger dot
  • case glow
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript

fonts

Geist, Geist Mono

Free fonts, linked in the prompt.

colors

  • #0B0B0C
  • #F5F4F0
  • #C8FF4D
  • #FF58A6
  • #8C6EFF
  • #FF7A3D

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