dot unit
proGet the prompt, project and Figma file with monthly ($29 a month) or yearly ($249 a year). Plus tax where it applies.
A cream handheld device stands on a dark, grainy backdrop: a rounded 480 × 808 body lit from the top, a round dark screen of 33 × 33 orange dots in a cream bezel ring, four engraved icons (music, rain cloud, timer, message), a sunken slider track with an orange knob, and a speaker grille. In the 12-second seamless loop a cursor drags the knob to the next stop every 3 seconds, lets go and waits beside it. At each change the new screen ripples up the dot matrix from the slider, with a bright front running ahead: a radial music spectrum round a pulsing core, a cloud with falling rain and 14°, a 0:25 countdown with a ring of dots burning down, and an avatar that pings while "HI ARI" scrolls past. The device is DOM and CSS gradients; the screen is a canvas drawn every frame from a 5 × 7 dot font and a few shapes. ?rec and window.__render(t) draw any moment for frame-exact video export, and reduced motion gets 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
- handheld device
- dot matrix display
- round screen
- led dots
- mode slider
- ripple transition
- music spectrum
- weather widget
- countdown timer
- scrolling message
- speaker grille
- cursor demo
- film grain
- product render
- canvas 2d
- autoplay loop
- frame-exact recorder
stack
- react
- vite
- typescript
- canvas
colors
- #141311
- #2A2825
- #F4F2ED
- #D6D2CA
- #12110F
- #FF8A47
- #F2602A
- #FFD264
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

