delete to dust

pro

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

A micro-interaction for a notes app, on a 10.4-second loop. On a light stage stands a phone drawn in code, with a calm notes list: title, search, filter chips and five note cards over a floating tab bar. A finger long-presses the Gift ideas note: it sinks under the finger, then lifts with a soft shadow while the list behind it blurs and a frosted context menu opens with Pin, Share, Move to folder and a red Delete. Delete flashes, the menu folds away, and the note breaks into dust from right to left: it is painted to a canvas and sampled into about 10,000 particles, each flying a curved, wobbling path into the Trash tab, timed by its place across the card. The trash lid tips open as the dust arrives and the badge pops from 12 to 13; the notes below slide up to close the gap and a dark toast says Note moved to Trash with an Undo button. A tap on Undo sends the dust back out of the trash, the gap opens again and the note re-forms from left to right. React with HTML, CSS, inline SVG and Canvas 2D, no images, Inter and Lucide-style line icons, a 1080 × 1080 stage that scales to fit any window and zooms in on the phone on portrait screens, and frame-exact rendering (?rec, window.__render(t), window.__ready, window.__LOOP). The notes are invented.

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

  • notes app
  • phone mockup
  • long press
  • context menu
  • delete animation
  • particle dust
  • trash tab
  • badge counter
  • undo toast
  • list reflow
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • canvas 2d
  • svg

fonts

Inter

Free fonts, linked in the prompt.

colors

  • #ECEAE6
  • #F3F2EF
  • #FFFFFF
  • #1A1918
  • #8A8781
  • #E5484D
  • #1E1D1C

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