REFERENCE
- Gallery page: https://magpui.com/en/i/pins-reshape-contour-mountains-4a31ac
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/pins-reshape-contour-mountains-4a31ac/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/pins-reshape-contour-mountains-4a31ac/clip.mp4
- Original post: https://x.com/nicforey/status/2117330727909883967 by @nicforey
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 contour-terrain editor, not a full page. Show an oblique topographic mountain on a black canvas, with numeric handles for height and footprint. Support a second peak and highlight the active terrain region.
DESIGN SYSTEM: Use an approximately 700 by 540 responsive canvas, background #0c0d08, thin yellow #d5c34d contour strokes and inactive charcoal #34352b lines. Draw roughly 18 elevation rings. Use tiny 11px monospaced numeric labels, vertical leader lines rising above each peak, and small triangular increment controls. Place a width control below the footprint. Selected values have a yellow rounded rectangular fill and dark text.
MOTION: Dragging or changing a value updates peak height and spread continuously, changing contour shape rather than scaling a flat image. Interpolate parameter changes over 100ms with cubic-bezier(0.2,0,0.2,1); pointer dragging should remain immediate. On selection, transition inactive rings to yellow over 150ms with cubic-bezier(0.2,0,0.2,1). No autonomous rotation. These timings are implementation targets.
SECTIONS: Terrain surface rendered solely as contour lines; elevated height handle; footprint width handle; inactive and active peak states; one-peak and two-peak terrain configurations. Values shown include heights near 0.23, 0.30 and 0.42 and widths around 0.22 to 0.40.
IMPLEMENTATION: Use Three.js with an orthographic camera and a procedural height field formed from summed smooth peaks. Generate isolines using marching squares, lift each isoline to its elevation, and render them as thin lines. Anchor HTML controls to projected world coordinates. Update only on parameter changes and cap pixel ratio at 2. Provide labeled numeric inputs and arrow-key increments with visible focus. Respect prefers-reduced-motion by applying parameter changes immediately. Avoid expensive full-screen postprocessing.
ADAPT TO THE PROJECT: Reuse existing design tokens, components and fonts. Map colors to the nearest tokens. Never copy logos, brand names, photos or illustrations; use placeholders where needed.
SUCCESS CHECK:
- Height changes alter contour elevation while width changes alter the footprint.
- Two peaks blend into one continuous terrain and selection highlights the correct region.
- All numeric adjustments work using keyboard alone and reduced motion disables tweening.
