REFERENCE
- Gallery page: https://magpui.com/en/i/receipt-crumples-into-a-bin-a890d8
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/receipt-crumples-into-a-bin-a890d8/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/receipt-crumples-into-a-bin-a890d8/clip.mp4
- Original post: https://x.com/cabralorenzo/status/2114427621434081629 by @cabralorenzo
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: Build an interactive receipt that crumples into a white paper ball and drops into a translucent trash bin. Keep this a single playful deletion component, not a whole application.
DESIGN SYSTEM: Use a near-black #151515 stage, an approximately 180 by 330px off-white #fafaf6 receipt with serrated edges, compact 10–12px monospace transaction rows, a bold centered heading and a barcode. Place a smoky transparent bin approximately 90 by 100px below it. Use subtle white rim highlights and a small gray Move to Bin tooltip.
MOTION: Suggested reconstruction timings: clicking the receipt folds and displaces its paper mesh into an irregular ball over 650ms, cubic-bezier(0.4,0,0.2,1). Move the ball toward the bin on a gravity-like arc over 800ms with rotation, then settle with a small 180ms bounce. Keep the bin fixed. Hover shows the tooltip over 120ms, cubic-bezier(0.2,0.8,0.2,1). These timings are targets, not measured footage.
SECTIONS: Idle flat receipt; focused or hovered receipt; crumpled ball; ball moving over bin; discarded paper sitting inside the bin. Supply a reset control for repeating the interaction.
IMPLEMENTATION: Use Three.js with a subdivided plane morphed toward a crumpled sphere, preserving paper shading, and a lightweight transparent bin mesh. Animate using a deterministic timeline and simple ballistic motion rather than a heavy physics simulation. Cap device pixel ratio at 2 and stop rendering when settled. Provide a semantic keyboard-operable button and visible focus ring. For prefers-reduced-motion, crossfade directly from receipt to discarded state and announce completion.
ADAPT TO THE PROJECT: Reuse existing design tokens, components and fonts, map estimated colors to the closest tokens, and never copy logos, brand names, photos or illustrations from the original; use placeholder receipt content.
SUCCESS CHECK:
- Clicking or keyboard activation transforms the receipt and places the ball inside the bin.
- Paper remains legible in the flat state and visibly faceted when crumpled.
- Reduced motion, reset and repeated activation work without runaway animation.
