REFERENCE
- Gallery page: https://magpui.com/en/i/walkable-browser-museum-of-paintings-eceaff
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/walkable-browser-museum-of-paintings-eceaff/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/walkable-browser-museum-of-paintings-eceaff/clip.mp4
- Original post: https://x.com/akashsoti/status/2117249554118754795 by @akashsoti
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 scroll-driven landing for an online art museum. In a black void, gilded picture frames hang at different depths; scrolling moves the camera forward so one painting at a time drifts to the center, sharpens and gets its spotlight, while the next one waits small and dim in the lower right. Each stop pairs the painting with a two-line serif headline and a short paragraph at the bottom left. It should feel hushed and reverent, like walking a dark gallery with only the art lit.
DESIGN SYSTEM
- Full-bleed canvas, background #050505 with a very subtle radial vignette.
- Top bar: small serif wordmark left (18px, #EDE7DC); right a ghost pill "Music" with a note icon and a light pill CTA (#EDE7DC background, #111 text, 12px, padding 6px 14px, radius 999px).
- Headline: transitional serif 28-34px, line-height 1.15, #F2EDE4, max width 520px, bottom-left with 48px margins; body 13px, #9A948A, line-height 1.5, max width 420px.
- Caption next to the active frame: italic serif 13px title, 10px gray date line below.
- Right edge: a thin vertical progress dot (8px circle #2A2A2A) and a tiny left-edge tick rail.
- Frames: ornate gold (#B8892E to #F1CF79 gradient with darker #6E4B17 recesses), 4-6% of frame width, painting inset with a 2px dark liner.
MOTION
- Scroll maps to camera z: each painting takes about 100vh; the active one eases from scale 0.6 and 40% opacity at depth to full size in front, 1200ms equivalent, cubic-bezier(.22,1,.36,1) smoothing on the scroll value (lerp 0.08 per frame).
- Spotlight: a soft cone/radial light fades on the active frame (intensity 0 -> 1 over 600ms) while past frames dim to 30% and slide out to the upper left with slight parallax.
- Copy: previous headline fades to 20% and blurs 4px while the new headline fades in and rises 16px over 500ms, cubic-bezier(.16,1,.3,1); body 120ms later.
- Frame swap moment: one section shows the same painting cycling through different frame styles (gilt, black, thin wood), each crossfading 400ms.
- Idle: very slow 0.5 degree sway of the active frame on a 10s sine loop; pointer moves the camera ±1.5 degrees.
SECTIONS
1. Hero: largest fresco-style painting with the opening line and a sub line.
2. "View it how it's meant to be": a wide group painting at true scale.
3. "Stand where the painter stood": a night-sky painting.
4. "The light moves as you do": a chiaroscuro painting with moving light.
5. "Know why the world can't stop looking at it": a portrait.
6. "Frame it the way you want": the frame switching moment.
7. "Somewhere, music is playing": water lilies with the music toggle highlighted.
8. Closing: a gold portrait and "The museum is open" with the CTA.
IMPLEMENTATION
- three.js or React Three Fiber: each painting is a plane with the image texture (sRGB, mipmaps, anisotropy 8) inside a frame built from an extruded beveled profile with a metallic gold MeshStandardMaterial and a small environment map; one SpotLight per active frame. Scroll via a smoothed custom scroll value or GSAP ScrollTrigger scrub; HTML overlay for text.
- prefers-reduced-motion: no sway or pointer parallax; paintings switch with 200ms crossfades.
- Keyboard: arrow keys move to the next/previous painting; the Music button is a real toggle with aria-pressed; text stays in the DOM for screen readers.
- Performance: load textures progressively (low-res first), keep only the current, previous and next painting at full resolution, cap DPR at 2.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, fonts and button components; map black, gold and warm white to the closest tokens. Do not copy the original brand name or copy; use public-domain artwork placeholders or neutral gray placeholder canvases.
SUCCESS CHECK
- Scrolling brings one framed painting at a time to the center with its spotlight while the next waits dimmed at the lower right.
- Headline and body copy change in sync with the active painting in both scroll directions.
- Arrow keys step through paintings and reduced motion removes all sway and parallax.
