REFERENCE
- Gallery page: https://magpui.com/en/i/bouncing-mascots-above-an-upsell-91deb3
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/bouncing-mascots-above-an-upsell-91deb3/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/bouncing-mascots-above-an-upsell-91deb3/clip.mp4
- Original post: https://x.com/spottedinprod/status/2113814891475722437 by @spottedinprod
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 a mobile bottom upsell sheet with a lively cluster of rounded geometric mascots above a heading, a short description and a stable full-width call to action. Build only the sheet, not the messaging app behind it.
DESIGN SYSTEM: Estimated mobile width 360px, sheet width 336px, padding 20px, top corners 28px, background #1b1e19 against a dimmed black backdrop. Small white identifier at the top. Illustration area 130px high with about ten rounded circles, squircle capsules and triangles, each 28–48px wide, in #ff8000, #ffbd19, #00cb96, #225dff, #9439ec and #ec008f plus gray and brown. Add paired simple white eyes. Use white 22px bold sans-serif heading, 14px muted body, 44px high white pill button with dark 14px text and tiny muted footer copy.
MOTION: Suggested choreography: on sheet opening, arrange the shapes as a compact heap, then spread them through the illustration area. Translate each shape 15–55px in varying directions and rotate ±35 degrees in a continuous 2400ms alternating loop, staggered by 100ms, cubic-bezier(.45,0,.55,1). Vary phase to create a loose shuffling and bouncing cluster. Keep shapes inside the illustration bounds, never over text. Sheet entrance translates up 40px and fades in over 300ms cubic-bezier(.2,.8,.2,1). These timings are rebuild targets, not measured source values.
SECTIONS: Dimmed backdrop; rounded sheet; small identifier; animated character cluster; heading; two-line explanation; primary button; subdued legal text. Include closed, entering, idle animated and dismissed states.
IMPLEMENTATION: Use SVG geometric characters and Motion transforms; no external artwork is needed. Keep ten independently animated elements maximum, pause when hidden, and never animate layout dimensions per frame. Provide dialog semantics, initial focus, keyboard dismissal and focus return. Reduced motion shows a static cluster and instant sheet transitions.
ADAPT TO THE PROJECT: Reuse existing tokens, components and fonts; map colors to closest tokens. Never copy original logos, brand names, photos or illustrations. Draw new generic shapes and use placeholder copy.
SUCCESS CHECK:
- Characters remain confined above the heading.
- Button and text never move during the loop.
- Keyboard dismissal and reduced motion work.
