REFERENCE
- Gallery page: https://magpui.com/en/i/restrained-studio-portfolio-99c7e2
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/restrained-studio-portfolio-99c7e2/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/restrained-studio-portfolio-99c7e2/clip.mp4
- Original post: https://x.com/dmcgco/status/2110780662399602912 by @dmcgco
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 minimal design-studio portfolio: a short statement at the top, then client projects in a calm grid of large thumbnails with small captions; each project opens on its own page.
DESIGN SYSTEM
- Background #FFFFFF, text #111, captions 13px #777.
- 12-column grid, 24px gutters, thumbnails 4:3 with no radius.
- Statement 28px weight 400, max 640px.
MOTION
- Thumbnails fade in on scroll, 500ms, opacity + 8px translate, 40ms stagger.
- Hover: image scales 1.02 over 400ms; caption underline grows.
SECTIONS
- Header with name and two links.
- Statement.
- Project grid.
- Footer with contact.
IMPLEMENTATION
- Plain CSS grid + IntersectionObserver for the reveal; lazy-load images.
- 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
- Nothing moves until it enters the viewport.
- Grid stays aligned at every breakpoint.
- Images reserve their aspect ratio (no layout shift).
