REFERENCE
- Gallery page: https://magpui.com/en/i/running-character-colors-loading-stickers-64cd46
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/running-character-colors-loading-stickers-64cd46/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/running-character-colors-loading-stickers-64cd46/clip.mp4
- Original post: https://x.com/aliszu/status/2112976275090657565 by @aliszu
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.
- Original running sprite: Original tiny cheerful pixel-art courier running, six side-view animation poses with aligned feet in a horizontal sprite sheet, crisp limited palette, no existing game character, transparent background.
- Playful sticker set: Nine original small colorful toy and hobby stickers, bold clean silhouettes with white outline, isolated grid, consistent scale, transparent background; no logos or recognizable copyrighted characters.
BUILD: Build a compact playful loading view where a small running pixel character crosses beneath three sticker silhouettes and colors them in one after another. Keep the rest of the view white and quiet.
DESIGN SYSTEM: Center a roughly 260px-wide stage inside a narrow mobile layout. Place three 36px stickers in a row with 44px gaps, a 48px character below, a thin #E1E1E1 baseline and a centered 11px semibold sans-serif loading caption. White #FFFFFF background, grey #CCCCCC silhouettes, colorful replacement stickers. No phone frame is needed in the actual component.
MOTION: Move the character left to right across 260px in approximately 1800ms with linear easing cubic-bezier(0,0,1,1). Loop a 6-frame running sprite every 480ms using discrete frame changes. As its horizontal position crosses each sticker, crossfade grey silhouette to color over 160ms, cubic-bezier(0.2,0,0,1). Between groups replace the three stickers and restart the traversal; suggested pause 250ms. Treat these durations as tuning targets rather than measured source timings.
SECTIONS: Sticker row, running sprite lane, hairline baseline, short loading status. States: grey pending, sequential coloring, completed group, next group. Drive completion from real loading progress when available.
IMPLEMENTATION: Use Motion for horizontal translation and CSS steps for the sprite sheet. Derive sticker thresholds from progress, not independent timers. Pause when offscreen and stop at actual completion. Provide role=status with infrequent updates; mark decorative art aria-hidden. Reduced motion replaces running with static character and immediate sticker changes. No interactive controls are necessary; any retry must be keyboard accessible.
ADAPT TO THE PROJECT: Reuse project tokens, fonts and components; map colors to existing tokens. Never copy logos, brand names, photos or illustrations from the source. Commission an original character and original stickers or use placeholders.
SUCCESS CHECK:
- Stickers color in the same order the character passes them.
- Completion stops the animation without a misleading endless loop.
- Reduced motion retains clear loading feedback.
