REFERENCE
- Gallery page: https://magpui.com/en/i/mascot-onboarding-that-becomes-the-header-f27e54
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/mascot-onboarding-that-becomes-the-header-f27e54/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/mascot-onboarding-that-becomes-the-header-f27e54/clip.mp4
- Original post: https://x.com/HelloDottaa/status/2116064540894937559 by @HelloDottaa
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 playful onboarding-to-home flow for a notes app, carried by a mascot. On a black screen an orange blob with a scalloped, wavy top edge rises from the bottom until it fills the lower 55% of the screen; it has two big white oval eyes with black pupils that look around and a small black smile. Two tilted sticker labels drop in at the top ("Your notes" on a yellow tape strip, "right here" on an orange one) with a small hand-drawn pen doodle and a handwritten subline. A white Get Started button and a small login line sit on the orange. Tapping Get Started shrinks the mascot into a small round fuzzy blob centered on black, which then flies up and tucks behind the "Your notes" header, peeking out with its eyes. The home screen builds in: search field, Notes / Archived tabs, a featured checklist card and a grid of recent note cards with handwritten text, plus an orange + button. Checking an item strikes it through.
DESIGN SYSTEM: Phone 390x844, background #000000. Mascot orange #FF6A00, scalloped edge made of about 10 bumps 36px wide. Eyes white ovals 70x90px, pupils #000 40px. Sticker labels: bold rounded sans 34px white text on #F5A300 and #FF6A00 strips, rotated -4deg and +2deg, with small dashed corner marks. Subline in a light handwritten script 12px #8A8A8A. Button 52px tall radius 26px white with 15px #111 text. Home: title 20px bold white, icon buttons 36px radius 10px #1C1C1C, search 44px radius 12px #161616, tabs as 28px pills (active white with black text, inactive #222 with #999), cards #141414 radius 14px with a paperclip-like tab title chip #222, body text in a handwritten script 13px #DDD, FAB 64x40px radius 20px #FF6A00 with a white plus.
MOTION: Mascot rise: translateY 100% to 0 over 700ms cubic-bezier(0.22,1,0.36,1), the scalloped edge wobbles (each bump scales 0.95 to 1.05 with 60ms stagger). Eyes: pupils drift to look up-left, then right, every 1.5s with 300ms ease-in-out; blink by scaling eye height to 0.1 over 90ms. Stickers drop from -40px with rotation overshoot (spring stiffness 260, damping 18), staggered 120ms; doodle draws in via stroke-dashoffset over 500ms. Get Started press: button scales 0.97. Transition: mascot morphs into a 160px round fuzzy blob in the center over 450ms, holds 200ms, then shrinks to 48px and moves to the header over 500ms cubic-bezier(0.65,0,0.35,1), ending clipped so only its top half shows above the title row. Home content fades up 12px, staggered 60ms. Checking a task: circle fills orange and a strike line draws across the text over 250ms.
SECTIONS: Splash with mascot; onboarding with stickers, doodle, button and login; transition blob; home with header and peeking mascot, search, tabs, featured checklist card, recent notes grid, FAB. States: splash, onboarding, transitioning, home, task checked.
IMPLEMENTATION: React with Motion and layoutId for the mascot so it morphs between screens; the mascot as an SVG with a path for the scalloped outline and separate eye groups. Stickers and doodle in SVG. Keyboard: Get Started and checkboxes are real buttons and inputs with visible focus rings. prefers-reduced-motion: no wobble or eye drift, screens crossfade and the mascot appears in place. Keep the SVG simple so the morph stays at 60fps on mobile.
ADAPT TO THE PROJECT: Reuse the project's fonts, buttons, inputs and color tokens, mapping the orange to the closest accent. Do not copy the original mascot or brand; draw a placeholder character with the same idea.
SUCCESS CHECK:
- The mascot rises with a wobbling scalloped edge and eyes that look around and blink.
- Get Started morphs the mascot into the small blob that ends peeking behind the home header.
- The home list builds in with stagger and checking a task draws a strike-through.
