REFERENCE
- Gallery page: https://magpui.com/en/i/sheep-with-contextual-behavior-controls-a37f78
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sheep-with-contextual-behavior-controls-a37f78/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sheep-with-contextual-behavior-controls-a37f78/clip.mp4
- Original post: https://x.com/AreadneMaria/status/2114898325451444419 by @AreadneMaria
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: Build an interactive miniature pasture with selectable sheep and a floating behavior toolbar. Keep the interface focused on the scene, not a surrounding website. DESIGN SYSTEM: Use a cream #eee8da background, an elevated oblique camera and a soft-edged green #87b83f meadow. A blue #3987ba stream follows the left edge; a tan path divides the pasture. Place rounded trees, dark green hedgerows and about twelve small cream sheep across the fields. Use soft directional shadows and a compact off-white pill toolbar about 240 by 28px with 11px sans-serif labels. MOTION: On selection, reveal the toolbar near the sheep over 180ms with opacity and a 6px translation, cubic-bezier(0.22,1,0.36,1). Provide idle, graze, walk and jump behaviors. Suggested reconstruction timing: grazing nods over 1600ms, walking cycles over 650ms, jump arcs over 550ms with cubic-bezier(0.4,0,0.2,1). Keep other sheep gently active while selection changes. SECTIONS: Pasture, sheep, selected-sheep indicator and contextual toolbar; idle, selected and behavior-active states. IMPLEMENTATION: Use React Three Fiber and Three.js, raycasting for sheep selection and a DOM toolbar projected from the selected animal. Build stylized sheep from simple rounded meshes. Prevent animals crossing the stream or hedges. Cap pixel ratio at 1.5, instance repeated foliage and pause offscreen. Provide keyboard selection and named behavior buttons with visible focus. Reduced motion disables autonomous movement and uses immediate state changes. ADAPT TO THE PROJECT: Reuse existing tokens, components and fonts, mapping colors to nearby tokens. Never copy logos, brand names, photos or illustrations; use procedural placeholder geometry. SUCCESS CHECK:
- Selecting a sheep anchors the toolbar to that animal.
- Each behavior changes only the selected sheep.
- Keyboard controls and reduced-motion mode remain usable.
