REFERENCE
- Gallery page: https://magpui.com/en/i/walking-avatar-project-gallery-62fa45
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/walking-avatar-project-gallery-62fa45/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/walking-avatar-project-gallery-62fa45/clip.mp4
- Original post: https://x.com/guillaumebth/status/2114724734797529282 by @guillaumebth
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.
- Placeholder walking avatar: Full-body stylized 3D young adult avatar, dark casual jacket and trousers, white shoes, neutral studio lighting, plain background, front and side reference views, no logos. Reference artwork for an independently rigged 3D character.
BUILD: Build a horizontal portfolio gallery with a full-body 3D avatar walking in the foreground. A continuous band of square project panels passes behind the character. Keep the surrounding canvas sparse and editorial.
DESIGN SYSTEM: Estimate an off-white #f8faf5 background, charcoal #111111 text and small metadata in a neutral sans-serif at 10–12px. Place a thin header across the top and five tiny preview thumbnails below its left edge. Center a strip of approximately 220px square panels separated by 4px gaps. Mix black, grey and red placeholder artwork. Render the avatar about 280px tall in front of the strip with no enclosing card.
MOTION: Use a looping skeletal walking cycle of approximately 1000ms with linear interpolation. Translate the project strip smoothly along X as navigation progresses, using a proposed 650ms cubic-bezier(0.22,1,0.36,1) transition. The observed character changes between side-facing walking poses and front-facing rest poses; crossfade walk and idle actions over 220ms. Include an optional high-contrast inverted palette state with a 300ms ease transition. Treat these timings as implementation targets, not measured source values.
SECTIONS: Sparse header and thumbnail index; horizontal project strip; foreground avatar; tiny footer metadata. Support idle, navigating and selected-project states. Keep thumbnail controls separate from the canvas.
IMPLEMENTATION: Use Three.js AnimationMixer for a licensed placeholder rig and walking clip; use DOM panels for accessible project links and synchronize their translation with the avatar state. Cap device pixel ratio at 1.5 and pause rendering offscreen. For prefers-reduced-motion, show a static avatar and discrete panel changes. Supply keyboard previous/next controls, visible focus rings and labelled thumbnails. Do not infer input mechanics from the source: implement explicit controls and optional horizontal scroll.
ADAPT TO THE PROJECT: Reuse the existing project tokens, components and fonts. Map colors to the closest tokens. Never copy logos, brand names, photos or illustrations from the original; use placeholder project art and an independently licensed avatar.
SUCCESS CHECK:
- Avatar stays in front of the project strip without obscuring navigation controls.
- Changing projects synchronizes strip movement and the walking state without layout shifts.
- Keyboard navigation and a static reduced-motion experience both work.
