REFERENCE
- Gallery page: https://magpui.com/en/i/receipt-that-crumples-like-paper-f4a389
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/receipt-that-crumples-like-paper-f4a389/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/receipt-that-crumples-like-paper-f4a389/clip.mp4
- Original post: https://x.com/kirillmigel1/status/2102999763373129922 by @kirillmigel1
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 receipt detail screen in a mobile app where the receipt is a paper mesh: dragging deforms it, a strong drag crumples it into a ball, and releasing lets it unfold with paper-like wrinkles left behind.
DESIGN SYSTEM
- Dark app background #1A1A1A, receipt off-white #F7F3EA with printed monospace lines, small yellow pin.
- Bottom action bar with three icons.
MOTION
- Drag deforms vertices around the touch point with falloff radius 120px.
- Crumple when drag distance > 40% of width: vertices pull toward center with noise, 400ms.
- Release: spring back over 900ms (stiffness 120, damping 14), keep a subtle normal-map wrinkle afterward.
SECTIONS
- App header.
- Receipt mesh.
- Action bar.
IMPLEMENTATION
- React Three Fiber plane with 40x60 segments, vertex displacement in a shader; text from a CanvasTexture of the receipt.
- Fallback: plain DOM receipt.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Paper never self-intersects badly.
- Unfold ends flat enough to read the text.
- Touch and mouse both work.
