REFERENCE
- Gallery page: https://magpui.com/en/i/isometric-outline-mancave-portfolio-f346a7
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/isometric-outline-mancave-portfolio-f346a7/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/isometric-outline-mancave-portfolio-f346a7/clip.mp4
- Original post: https://x.com/Nomandsign/status/2110448554976358466 by @Nomandsign
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
A personal portfolio whose home is an isometric room drawn in black outline: themed zones (racing corner, arcade, gym, desk) are clickable hotspots that open the matching section.
DESIGN SYSTEM
- Background #F7F6F2, strokes #111 at 1.5px, no fills except one accent color for hover.
- Labels 12px mono in small pills near hotspots.
MOTION
- Hover a zone: its strokes thicken to 2.5px and the accent fill fades in, 200ms.
- Click: camera zooms into the zone (scale 1 to 2.4, translate to center), 800ms, cubic-bezier(0.65, 0, 0.35, 1), then the content panel slides up.
SECTIONS
- Isometric room (SVG).
- Hotspot labels.
- Content panel per zone.
IMPLEMENTATION
- One inline SVG with grouped zones; transform the root group for the zoom; keyboard-focusable hotspots.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Every zone is reachable by Tab and Enter.
- Zoom ends exactly centered on the zone.
- Lines stay crisp at every zoom level.
