REFERENCE
- Gallery page: https://magpui.com/en/i/curled-caterpillar-loading-loop-862e4f
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/curled-caterpillar-loading-loop-862e4f/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/curled-caterpillar-loading-loop-862e4f/clip.mp4
- Original post: https://x.com/oiharshit/status/2114696899320299668 by @oiharshit
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: Create a compact loading state centered around a curled yellow caterpillar character, with a small gray status sentence below it. Keep the surrounding surface quiet and white.
DESIGN SYSTEM: White #ffffff surface, character approximately 140px square, vivid #ffd919 body, #f39210 segment stripes, tiny dark antennae and pale eyes. Use a soft gray cast shadow offset up and right, a 40px gap before a 12px regular sans-serif caption in #777777. Keep the overall loading panel borderless.
MOTION: On entering loading, loop the curled body through changing orientations and gently changing curvature. Target a 2400ms loop with a full rotation, cubic-bezier(0.45,0,0.55,1), and a subtle 0.95 to 1.04 squash every 600ms with 100ms segment offsets. Preserve the character's face and antennae through each pose. Keep the caption still. Timings are suggested rebuild values, not measured originals.
SECTIONS: Loading character; soft cast shadow; single short status caption. Provide loading, complete and reduced-motion states without adding unrelated app screens.
IMPLEMENTATION: Use Three.js with a segmented curved body mesh and procedural orange stripe texture, plus simple antenna curves and eyes. Animate body curvature and rotation with a time-based loop. Use an orthographic camera, soft shadows, one canvas below 256px resolution on low-power devices, and pause when hidden. Expose the caption through role=status and aria-live=polite; do not trap focus. Under prefers-reduced-motion, use a static curled character and the same caption.
ADAPT TO THE PROJECT: Reuse existing design tokens, components and fonts, map estimated colors to the closest existing tokens, and never copy logos, brand names, photos or illustrations from the original. Build an original procedural character with placeholder styling.
SUCCESS CHECK:
- The character loops seamlessly without a visible reset.
- The small caption remains readable and stable throughout loading.
- Reduced motion shows a static character and the loading status remains accessible.
