REFERENCE
- Gallery page: https://magpui.com/en/i/crop-circles-across-a-miniature-landscape-f55422
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/crop-circles-across-a-miniature-landscape-f55422/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/crop-circles-across-a-miniature-landscape-f55422/clip.mp4
- Original post: https://x.com/notjignes/status/2115467135103451375 by @notjignes
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 small animated aerial landscape vignette: green fields divided by a blue river, a narrow bridge, pale paths, scattered trees and tiny pale ground details. Thin circular traces appear in the grass as the camera drifts. Keep it tactile, sunny and miniature-like.
DESIGN SYSTEM: Center a roughly square 640px scene on a white canvas with broad margins and softly feathered irregular edges. Use grass #9DAF47, river #328DAF, paths #C6C599, white clouds and orange-green trees. Add a tiny neutral sans-serif location caption below, around 11px, without copying the original wording. Directional sunlight creates soft shadows.
MOTION: Suggested reconstruction timings: drift the overhead camera gently over 12000ms using cubic-bezier(0.37,0,0.63,1). Move cloud clusters across the field over 16000ms with near-linear cubic-bezier(0,0,1,1). Reveal thin concentric flattened grass rings over 1800ms with cubic-bezier(0.22,1,0.36,1); stagger rings 180ms. These are implementation targets, not measured source timings.
SECTIONS: Single landscape viewport, central river and bridge, field details, cloud layer, circular grass traces, understated caption. No extra page sections.
IMPLEMENTATION: Use Three.js with an orthographic camera and instanced simple trees and ground details. Draw ring masks in the grass material rather than loading artwork. Use a soft edge mask on the canvas. Cap DPR at 1.5 and pause rendering offscreen. Reduced motion shows a static landscape with completed rings. Provide a keyboard-accessible pause button with visible focus and a text alternative describing the scene.
ADAPT TO THE PROJECT: Reuse existing design tokens, components and fonts; map colors to the nearest existing tokens. Never copy logos, brand names, photos or illustrations; use procedural geometry and placeholders.
SUCCESS CHECK:
- River, bridge and trees remain legible at mobile width.
- Ring traces emerge without obscuring the miniature landscape.
- Pause, reduced motion and offscreen suspension work.
