library

effects

mcp

dot unit

pro

Get 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