delete to dust
proGet 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

