REFERENCE
- Gallery page: https://magpui.com/en/i/cookie-settings-fed-to-a-hamster-a6629c
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/cookie-settings-fed-to-a-hamster-a6629c/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/cookie-settings-fed-to-a-hamster-a6629c/clip.mp4
- Original post: https://x.com/RaminNasibov/status/2112210954616295547 by @RaminNasibov
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.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- mascot-state-sad: Cute chubby cartoon hamster sitting upright, front view, sad hungry expression with teary eyes, paws together, soft clean digital illustration with light outline and warm orange-tan and cream fur, soft even lighting, plain white background, square 1:1, centered, same character design as the other states
- mascot-state-nibbling: The same cute chubby cartoon hamster, front view, nibbling a small chocolate chip cookie held in both paws, eyes half closed, slightly fuller cheeks, soft clean digital illustration, warm orange-tan and cream fur, plain white background, square 1:1, centered
- mascot-state-content: The same cute chubby cartoon hamster, front view, content smile with closed eyes, holding a whole chocolate chip cookie against its belly, rounder cheeks, soft clean digital illustration, warm orange-tan and cream fur, plain white background, square 1:1, centered
- mascot-state-stuffed: The same cute cartoon hamster, front view, cheeks hugely puffed out and wider than its head, pink blush, big sparkling happy eyes, open smile showing two front teeth, soft clean digital illustration, warm orange-tan and cream fur, plain white background, square 1:1, centered
BUILD: A cookie settings card where a mascot reacts to each consent toggle. The card has a title, a one-line playful subtitle (e.g. 'Every cookie you accept goes to the mascot'), a character illustration, three toggle rows (Analytics, Marketing, Personalization) and two actions. With everything off the character looks sad and hungry. Each toggle switched on makes it eat a cookie and get visibly happier and chubbier, ending with puffed blushing cheeks and sparkle eyes when all three are on. It should feel like a tiny reward loop, warm and funny, without slowing the user down.
DESIGN SYSTEM: Card 240px wide, about 340px tall, background #FFFFFF, radius 16px, shadow 0 8px 24px rgba(0,0,0,0.06), padding 20px, on a page of #EFEFEF. Title centered, 17px bold sans-serif, #111; subtitle 8-9px regular #8A8A8A centered, 4px below. Illustration area 140x140px centered, 12px top margin. Toggle rows: 25px tall, label 9-10px medium #222 left, switch right; switch 26x14px pill, off track #E4E4E4 with white 10px knob, on track #34C759 with knob at right. Footer row 16px below the last toggle: primary pill button 'Accept all' 72x22px, background #111, white 9px semibold text, radius 999px; secondary text button 'Reject all' 9px #9A9A9A, no background.
MOTION: Toggle on: knob slides 12px and track color crossfades to green, 180ms, cubic-bezier(0.32, 0.72, 0, 1). The mascot advances to its next state on the same click: the current image scales 1 to 0.96 (90ms, ease-out) then the next state image replaces it with scale 0.96 to 1.04 to 1 (320ms, cubic-bezier(0.34, 1.56, 0.64, 1)), crossfade 120ms. Intermediate 'eating' frame between states: show the character holding a cookie for 400ms before the fuller state. When the third toggle turns on, add 3-4 small sparkle stars around the head that pop in (scale 0 to 1, 220ms, stagger 60ms) and fade after 900ms. Toggle off reverses to the previous state with a quick 200ms crossfade and no bounce. 'Accept all' turns all toggles on with a 120ms stagger and runs the states in sequence.
SECTIONS: Parts: header (title, subtitle), mascot stage, toggle list, footer actions. Mascot states: 0 on = sad, hands together; 1 on = nibbling a cookie, eyes half closed; 2 on = content, holding a whole cookie; 3 on = cheeks fully puffed, blush, sparkle eyes. Toggle states: off, hover (track darkens to #D6D6D6 / #2FB350), focus, on, disabled. Button states: idle, hover (primary #2A2A2A, secondary text #555), pressed (scale 0.97), saving (spinner inside the button).
IMPLEMENTATION: Plain React state with CSS transitions for the switches and Motion (AnimatePresence) for swapping mascot images; preload all state images on mount so the swap never flashes. Map mascot state to the count of enabled toggles, not to a specific toggle. Use real <button role=switch aria-checked> elements, labels clickable, focus-visible ring 2px #34C759 offset 2px, Space and Enter toggle. The mascot image is decorative (alt=''), with an aria-live polite text like '2 of 3 cookie types allowed'. prefers-reduced-motion: plain 150ms crossfade between states, no bounce or sparkles. Keep each state image under 60KB (WebP), total card under 300KB.
ADAPT TO THE PROJECT: Reuse the project's existing switch, button and card components, design tokens and fonts; map the green, black and greys to the closest tokens. Never copy the original mascot, logos or brand names; use a placeholder character generated for this project.
SUCCESS CHECK:
- Turning toggles on one by one shows four distinct mascot states in order, and turning one off steps back exactly one state.
- 'Accept all' animates all three switches with a visible stagger and ends on the happiest state with sparkles.
- Switches are operable by keyboard with visible focus, announced as switches, and reduced motion removes the bounce.
