REFERENCE
- Gallery page: https://magpui.com/en/i/hold-to-delete-button-that-burns-the-page-3770ba
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hold-to-delete-button-that-burns-the-page-3770ba/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hold-to-delete-button-that-burns-the-page-3770ba/clip.mp4
- Original post: https://x.com/kshvbgde/status/2117502283894362219 by @kshvbgde
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: A delete-account confirmation screen with a hold-to-delete button. While the user holds the button, a molten fire gradient fills it from left to right and the button starts to glow and smoke; when the hold completes, the button ignites and a ring of fire spreads outward from it, burning the white confirmation screen away like paper: a jagged, glowing burn edge (white-hot rim, magenta and orange flames, falling ash) expands until the whole viewport has turned into a dark signed-out screen. Embers keep drifting slowly upward over the new screen. It should feel dramatic but controlled, a deliberate final act.
DESIGN SYSTEM: Start screen: background #FFFFFF, content centered vertically, max width about 420px. Small caption line at 14px, color #6B6B6B. Headline 'Delete your account?' in a geometric grotesk at 40px, weight 600, color #141414, letter-spacing -0.02em. Sub line 16px #6B6B6B ('Your 412 links and 38 collections go with it.' style copy, use your own). Button: pill 44px tall, 200px wide, radius 999px, fill #1F1F1F, label 14px weight 500 #FFFFFF. End screen: background #050505, headline 'Sign in' 32px weight 600 #F5F5F5, sub line 14px #8A8A8A ('Your account is gone.'), email input 36px tall, radius 999px, fill #1A1A1A, placeholder #5A5A5A; primary button 36px tall full width, fill #FFFFFF, label #111; text link 'Restore my account' 13px #9A9A9A, underline on hover. Fire palette: white-hot rim #FFF6E8, yellow #FFC23A, orange #FF6A1A, deep red #7A1405, magenta glow #E24BD0, violet edge #6A4BFF at low opacity, ash particles #2A2420 and ember dots #FFB070.
MOTION: (1) Hold: pointerdown or Space/Enter keydown starts a 1600ms progress; the button fill becomes a horizontal gradient #3A0A02 > #C2300A > #FF8A1F > #FFE3A0 advancing from left to right (linear progress, the hot leading edge 24px wide), with an outer glow box-shadow growing from 0 to 0 0 40px rgba(255,120,40,0.6) and a few wisps of smoke rising above it. Releasing before the end drains the fill back over 300ms cubic-bezier(0.4,0,0.2,1). (2) Ignite: at 100% the button flares (scale 1 to 1.06 in 120ms, then back) and the burn starts at the button center. (3) Burn: a noisy circular burn front expands from the button to beyond the viewport corners over about 1800ms, easing cubic-bezier(0.55,0,0.25,1); inside the front the dark end screen is revealed, the front itself is a 20-40px band of flame (white-hot inner rim, orange and magenta flames licking outward, flickering 6-10 times a second), and text the front passes curls and fades. Ash flakes (2-5px, 200-400 of them) detach along the front and fall with slight drift for 1-2s. (4) Settle: the end screen content fades in 0 to 1 over 400ms as the front passes it; the remaining fire licks at the edges for about 600ms more, then disappears. (5) Idle embers: 60-120 tiny ember dots drift upward at 6-20px per second with slight horizontal sway and twinkle, forever, behind the sign-in form.
SECTIONS: Parts: start screen (caption, headline, sub line, hold button), burn layer (fire front, ash, smoke), end screen (sign-in headline, sub line, email input, continue button, restore link), ember layer. States: idle, holding (progress 0-100), released early (drain), igniting, burning, signed out, restore hover.
IMPLEMENTATION: Render the burn as a full-screen WebGL fragment shader over both screens: a uniform radius grows from the button center, distance plus fractal noise (fbm, 4 octaves) gives the jagged burn edge, a smoothstep band around the edge maps to the fire palette with animated noise for flicker, and pixels inside the radius reveal the end screen (render it below, the shader alpha masks the start screen). Use a small canvas particle system for ash and embers (or instanced points in the same WebGL context). Drive the hold progress and timeline with requestAnimationFrame or Motion. Keep the real buttons as <button> elements: the hold button needs aria-describedby explaining 'Press and hold to delete', keyboard support for holding Space or Enter, and a visible focus ring (2px #141414 offset 3px). Only call the real delete API when the hold completes. prefers-reduced-motion: no fire, the button fill still shows progress, then crossfade to the end screen over 300ms with no particles. Cap particles on low-end devices, use devicePixelRatio max 2, stop the ember loop when the tab is hidden.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components, fonts and copy; map the neutrals to the closest existing tokens and keep the fire palette as the only new colors. Never copy logos, brand names, names or text from the original; use placeholder copy.
SUCCESS CHECK:
- Holding the button for 1.6s fills it with a fire gradient, and releasing early drains it without deleting.
- On completion a jagged, flickering burn front expands from the button and reveals the dark sign-in screen, with ash falling along the edge.
- Embers keep drifting on the signed-out screen, keyboard hold works, and reduced motion shows a simple crossfade.
