REFERENCE
- Gallery page: https://magpui.com/en/i/boiling-hand-drawn-reward-icons-8a0662
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/boiling-hand-drawn-reward-icons-8a0662/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/boiling-hand-drawn-reward-icons-8a0662/clip.mp4
- Original post: https://x.com/dean_maj/status/2114643203341058093 by @dean_maj
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 set of nine animated reward icons laid out in a 3x3 grid on a soft blush background: flame with a crown cut-out, waving flag, trophy, hand holding a gem, square with an up arrow, two overlapping hearts, rounded battery or card shape, rosette badge with ribbons, and a wallet with a card. Each icon is a flat red-orange shape with black accents and loops its own small gesture: the flame flickers, the flag waves, the trophy handles wiggle, the hand lifts the gem with a little sparkle, the hearts pulse, the card flips edge-on and back, the wallet card slides out. Outlines boil slightly every few frames like hand-drawn animation. It should feel cheerful, crafted and lightweight, usable for streaks, achievements and rewards UI.
DESIGN SYSTEM: Background #FDEFEC. Grid of 72px cells with 56px gaps, icons about 40px. Fill #F2431E, accents #1A1A1A, no gradients, no strokes thinner than 2px, slightly irregular rounded shapes. Optional sparkle in #FFFFFF with black outline.
MOTION: Play each icon on steps for a hand-drawn look: 8 to 12 fps using steps() timing. Flame: scaleY 1 to 1.12 and skewX -4deg to 4deg, 600ms loop. Flag: path morph of the cloth over 3 keyframes, 700ms. Trophy: rotate -6deg to 6deg, 800ms. Hand: translateY 0 to -4px with gem rotate 15deg and a sparkle pop scale 0 to 1 to 0, 900ms. Arrow: translateY 0 to -3px, 500ms. Hearts: back heart scale 1 to 1.15 offset 120ms from front heart. Card: scaleX 1 to 0.1 to 1 (flip), 900ms with a 600ms pause. Rosette: rotate 0 to 10deg and back. Wallet: inner card translateY 0 to -6px. Boil: swap between 2 to 3 slightly jittered versions of each SVG path every 120ms. Stagger loop starts by 90ms per icon so the grid never pulses in sync.
SECTIONS: Grid container; nine icon components; states idle (looping), hover (speed up to 1.5x and scale 1.08), reduced (static first frame).
IMPLEMENTATION: Inline SVG per icon with CSS keyframes using steps() for the stop-motion feel, or Motion for the path morphs; path variants for the boil effect toggled by a shared 120ms ticker. Lottie or Rive is a good alternative if the icons are drawn in a design tool. prefers-reduced-motion: show the first frame only. Icons are decorative by default (aria-hidden) with an optional label prop. Pause animation when offscreen with IntersectionObserver.
ADAPT TO THE PROJECT: Reuse the project's icon sizing tokens and accent color; map the red-orange and black to the nearest existing tokens. Do not copy the original drawings; draw new simple icons in the same chunky style.
SUCCESS CHECK:
- All nine icons loop with distinct gestures and are not in sync.
- The motion reads as stop motion (stepped), with a visible but subtle line boil.
- With reduced motion the grid is fully static and still legible.
