dot sketch

free

The prompt is free with an account: sign up with Google or email, and your copy starts right after. The project and Figma file come with monthly or yearly.

A gesture-to-icon motion piece on a dot-matrix screen: the whole 1080 × 1080 stage is one field of 54 × 54 white dots on near-black, in a seamless 12-second loop of three gestures. A finger draws a wobbly heart and the dots part like sand and light up under it; on release a ripple runs out, the line straightens into a clean heart (each point of the rough stroke moves onto the clean path, no crossfade), fills in and beats twice with a ripple on each beat. Then a shaky zigzag snaps into a sharp lightning bolt and a charge runs down it, and a rough check snaps clean as a ring closes around it and a last ripple follows. Each shape dissolves in a wave from its centre before the next. Every frame the shapes are drawn into a small offscreen canvas and each dot reads its block's coverage as its size and brightness, a halftone. Canvas 2D only: no images, no fonts, no libraries besides React; a stage that scales to fit any window, a canvas buffer that stays sharp on high-density screens, a reduced-motion still, and frame-exact rendering (window.render(t), window.__RENDERING__).

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

  • dot matrix
  • halftone
  • gesture
  • icon morph
  • ripple
  • canvas 2d
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • canvas

colors

  • #040405
  • #FFFFFF
  • #000000

license

Free account: personal use only. Monthly or yearly adds commercial and client work. Don't resell or share the template, prompt or files.

read the license