library

effects

mcp

delete patterns

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 reference sheet of delete interactions, animated. Eight dark cards in a 2 × 4 grid on a 1080 × 1350 (4:5) stage, each named and numbered, each with a cursor acting out one pattern. Confirm: a round trash button opens into Cancel and a red Delete. Hold to delete: the button fills red from the left while it's held, and the label turns to Keep holding. Slide to delete: a white knob is dragged along a track, leaving a red trail, and turns into a trash icon at the end. Click twice: the first click arms Delete into a red Click to confirm. Undo: the item is removed at once, and a countdown ring runs next to Removed and Undo. Drag to bin: a list item is picked up, shrinks as it travels and drops into a bin whose lid tips open. Type to confirm: the word delete is typed into a field before the Delete button turns red. Swipe: a list item is swiped left over a red action and flies off. Every pattern morphs into the same Deleted chip, a red check drawn on, then fades back for the next take; the cards start 0.2 s apart and repeat every 6 s. Drawn on one Canvas 2D with React, no images, Host Grotesk and Geist Mono, scales to fit any window, Space or R restarts it, and frame-exact rendering (?rec, window.__render(t), window.__ready, window.__LOOP).

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

  • delete patterns
  • destructive actions
  • confirm button
  • hold to delete
  • slide to delete
  • click twice
  • undo countdown
  • drag to bin
  • type to confirm
  • swipe to delete
  • success chip
  • morph
  • cursor animation
  • canvas 2d
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • canvas

fonts

Host Grotesk, Geist Mono

Free fonts, linked in the prompt.

colors

  • #09090A
  • #17171A
  • #2E2E33
  • #FF6153
  • #E8382D
  • #FF453A
  • #FFFFFF

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