REFERENCE
- Gallery page: https://magpui.com/en/i/pixel-island-with-smoking-camper-7d4dee
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/pixel-island-with-smoking-camper-7d4dee/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/pixel-island-with-smoking-camper-7d4dee/clip.mp4
- Original post: https://x.com/ann_nnng/status/2112897537430741143 by @ann_nnng
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 one animated isometric miniature on white: a floating square of earth with a beige camper across the rear half, two tiny yellow-suited figures, dense white flowers and green vegetation, rocks and a narrow stream spilling over the front edge. Keep the camera fixed; smoke rising from the roof is the main moving accent. No surrounding website.
DESIGN SYSTEM: Responsive square canvas around 420px wide, orthographic three-quarter camera, chunky exposed soil underside, coarse pixel edges and shaded blocky geometry. Estimated palette: white #FFFFFF, soil #63462E, foliage #31572B and #789A45, flowers #F1F0D7, camper #B8AB86, trim #816145, dark windows #202F42, yellow suits #D5AE22, blue smoke #294E87. Flowering vines spill over the camper roof. No typography or UI chrome.
MOTION: On mount loop smoke particles upward from a narrow roof outlet, spreading and fading into a broad irregular plume. Suggested particle lifetime 2400–3600ms, 25ms emission stagger, cubic-bezier(0,0,1,1). Small alternating character limb movements run on a suggested 700ms loop; one figure moves toward the side door while another stays among foreground flowers. Suggested path cycle 3000ms, cubic-bezier(0.42,0,0.58,1). Animate subtle stream highlights downward over 1200ms, cubic-bezier(0,0,1,1). Timings are reconstruction targets, not measured source timings.
SECTIONS: Single scene: earth tile, rocks and stream, dense vegetation and white bell-shaped flowers, vine-covered camper with dark windows and side door, two yellow figures, dispersing smoke. Idle state is the loop; do not invent hover or pressed states.
IMPLEMENTATION: Use Three.js with an orthographic camera, instanced box geometry for plants, simple articulated figures and pooled Points particles for smoke. Render a low-resolution buffer scaled with nearest-neighbor sampling. Cap vegetation at 6000 instances and smoke at 1500 particles, avoid per-frame allocations and pause offscreen. Respect prefers-reduced-motion with a still plume and frozen figures. Provide a text alternative; decorative canvas stays out of the tab order. Any optional pause control uses an existing project button with visible keyboard focus.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts. Map estimated colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use original procedural geometry and placeholders.
SUCCESS CHECK:
- Camper, stream and both figures read clearly at 320px.
- Smoke spreads smoothly while the camera remains fixed and the flowers remain visible.
- Reduced-motion produces a complete still scene and offscreen rendering pauses.
