REFERENCE
- Gallery page: https://magpui.com/en/i/four-season-landing-with-depth-wash-808feb
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/four-season-landing-with-depth-wash-808feb/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/four-season-landing-with-depth-wash-808feb/clip.mp4
- Original post: https://x.com/MengTo/status/2117298331361915188 by @MengTo
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.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Tea house scene, four seasons: A small traditional wooden tea house with paper sliding doors on a mossy rock outcrop, a winding stone path in the foreground, a large gnarled tree behind it, misty forest background, photorealistic, cinematic soft light, 16:9; produce four versions with the identical camera framing: spring with pink cherry blossom, summer night with warm lanterns and fireflies, autumn with red maple leaves, winter covered in snow
BUILD
A full-screen landing page for a small retreat with one room that changes with the seasons. The whole viewport is one photographic scene (a wooden tea house on a mossy rock with a stone path and a big tree) available in four versions with the exact same framing: spring blossom, summer night with lit lanterns, autumn maple, winter snow. The scene breathes with a subtle depth parallax that follows the mouse; choosing a season washes the new image in from the foreground to the background using a depth map, and each season adds its own particles. It should feel quiet, cinematic and expensive, like a boutique ryokan site.
DESIGN SYSTEM
- Full-bleed canvas behind everything, with a left-to-right dark scrim (rgba(10,10,12,0.55) to transparent at 55% width) so the copy stays readable.
- Top bar 72px: small round emblem + two-line name on the left; a centered translucent pill nav (rgba(255,255,255,0.10), 1px rgba(255,255,255,0.18) border, backdrop-blur 12px, radius 999px) with season tabs, active tab filled white at 90% with dark text; a ghost pill button 'Book a night' on the right.
- Headline at left, vertically centered: a classic serif 56-64px, line-height 1.05, line 1 'One quiet room.' in #EDE7DC, line 2 'Four seasons.' tinted with the season accent: spring #E7B6C3, summer #E8C66A, autumn #E07A3C, winter #CFE0EE.
- Body 14px #CFC8BC, max width 360px. Buttons 36px tall pills: primary cream #F3EBDD with dark text 'Reserve a season', secondary #111214 with a play dot 'Watch the year'.
- Bottom-left season index: large italic serif numeral '01' (32px, season accent) + uppercase 11px label of the season name; bottom-right a small caption chip.
MOTION
- Mouse parallax: displace UVs by depth (near pixels move up to 18px, far ones 2px) toward the pointer, smoothed with lerp 0.06 per frame; a very slow idle drift (6s sine, 4px) when the mouse is still.
- Season wash: on tab click, animate a threshold from depth 1.0 (nearest) to 0.0 (farthest) over 1600ms with cubic-bezier(0.65,0,0.35,1); pixels nearer than the threshold show the new season, with a 0.08 soft edge and a faint bright rim (add 10% white along the edge) so the change sweeps from the rock and path back to the trees and sky.
- Copy: the accent line crossfades to the new color (600ms), the season numeral rolls up 16px and fades (500ms, cubic-bezier(0.22,1,0.36,1)), the active pill slides to the new tab (350ms spring feel).
- Particles per season (instanced sprites, 150-400): spring petals drifting and spinning slowly, summer fireflies blinking (opacity 0 to 1 in 1.2-2.4s random), autumn leaves tumbling with wind sway, winter snow falling with depth-based size; crossfade particle systems over 800ms during the wash.
- Auto-advance every 9s unless the user interacted in the last 20s.
SECTIONS
1. Top bar (emblem + name, season pill nav, booking button).
2. Hero copy (two-line serif headline, short paragraph, two buttons).
3. Full-screen scene with parallax, wash transition and particles.
4. Bottom row: season numeral and name on the left, small caption chip on the right.
States: idle drift, hover parallax, transitioning, reduced motion.
IMPLEMENTATION
- Three.js with one full-screen plane and a custom ShaderMaterial: uniforms for the current and next color textures, their depth maps (grayscale, white = near), the wash threshold, pointer position and time. Particles as InstancedMesh or Points with a soft round or petal texture.
- Generate the four season images from one base image so the framing matches exactly, then make a depth map for each (a monocular depth model works); preload all textures before enabling the tabs.
- prefers-reduced-motion: no parallax or particles, season change is a 400ms crossfade.
- Keyboard: season tabs are a tablist with arrow keys; buttons have a 2px cream focus ring; all text is HTML above the canvas.
- Use compressed textures (KTX2 or WebP at 2560px max), cap DPR at 2, pause when hidden.
ADAPT TO THE PROJECT
Reuse the project's fonts, buttons, nav and color tokens, mapping the season accents to the closest existing tokens. Do not copy the original place name, emblem or photos; generate your own scene images and depth maps and use placeholder copy.
SUCCESS CHECK
- Moving the mouse makes the foreground rock and path shift more than the distant trees and sky.
- Clicking a season sweeps the new image in from the nearest objects to the farthest within about 1.6s, with no seam or jump in framing.
- Each season shows its own particles (petals, fireflies, leaves, snow) and the headline accent color changes with it.
