REFERENCE
- Gallery page: https://magpui.com/en/i/jungle-lodge-landing-with-page-tear-a96602
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/jungle-lodge-landing-with-page-tear-a96602/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/jungle-lodge-landing-with-page-tear-a96602/clip.mp4
- Original post: https://x.com/shxwat/status/2118033126211633591 by @shxwat
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.
- Walking figure reference: Full-body reference sheet of a young man in a plain light gray t-shirt and dark blue jeans, neutral casual look, front, side and back views in a relaxed standing pose, realistic proportions, soft even studio lighting, plain light gray background, 16:9, for building a rigged low-poly 3D character
- Night jungle backdrop: Dense tropical rainforest at night seen from ground level, ferns and tall grass in the foreground, faint mist between tree trunks, deep navy sky with a few stars, very dark moody greens, subtle cool moonlight, no people, cinematic, 21:9
BUILD: A scroll-driven landing page for a remote rainforest lodge that tells a small story. It opens as a calm editorial paper page with a huge serif wordmark; on the first scroll a 3D figure walks in from the side, stops in the middle and tears the paper open with its hands, revealing a living night jungle behind it. Scrolling further flies the camera into that jungle along softly glowing footpaths, past short serif headlines, until a lodge and a crackling campfire appear, then the page settles into a dark, quiet content section. It should feel slow, hushed and cinematic, like walking at night.
DESIGN SYSTEM: Full-viewport sections, 12-column grid with 48px side margins. Hero background warm paper #ECE6DA with a faint paper grain. Wordmark: an elegant high-contrast italic serif at about 22vw wide, ~260px on a 1440px screen, color #1B2233, with the jungle footage/scene visible through the letterforms (text used as a mask). Under it a small italic serif tagline 16px #3A3A3A and a row of tiny uppercase mono labels 10px, letter-spacing 0.2em, #6B6B6B. Top bar: 40px tall, tiny uppercase mono nav links, a small dark pill button on the right. Bottom bar: 'Scroll to enter the forest' centered in 10px mono with a thin 1px vertical line. Night sections: background #0B1220 sky to #05080D ground, headline serif 56px #F2EDE3 with the second line italic in warm gold #E7C27A, body 15px #B8B4AA max 360px wide. Path glow #59E3A0 at 60% opacity. Primary button: pill, 40px tall, background #C77A3A, text #1A120B. Final section: #0E0E0E, a 4-column list of small serif titles 15px #EDE7DA with 13px gray #8C877E descriptions, section label 'What you'll remember' 40px serif with the last word italic gold.
MOTION: 1) Intro (scroll 0-15%): a rigged 3D human figure enters from the left at walking pace, 2.5s walk cycle, stops at center, turns to face the page. 2) Tear (scroll 15-35%, scrubbed): the figure raises both arms; a jagged hole grows from its hands outward, irregular torn edges with a 6-10px lighter paper fiber rim and small paper shards flying out and rotating (scale 1 to 0, 600ms each, staggered 40ms); behind the hole the 3D jungle is already rendering. The hole grows until the paper is fully gone, easing cubic-bezier(0.65, 0, 0.35, 1). 3) Fly-in (35-70%, scrubbed): the camera moves forward and down over a forest floor of instanced grass and ferns, along a network of glowing paths that pulse slowly (opacity 0.4 to 0.8, 3s loop). Headlines fade up 24px over 700ms, cubic-bezier(0.22, 1, 0.36, 1), each pinned for ~40vh. 4) Arrival (70-90%): a low wooden lodge appears, a campfire with flickering particle flames and a warm point light (intensity flicker 0.8-1.2, random every 80-140ms); fireflies drift. 5) Content (90-100%): the canvas dims to 20% and the dark list section slides up. Lenis-style smooth scroll, lerp 0.08.
SECTIONS: 1) Hero: masked serif wordmark, tagline, three small meta labels, scroll hint. 2) Tear transition with the walking figure. 3) 'The forest is listening.' night jungle with glowing paths and a short paragraph. 4) 'A different kind of quiet.' deeper in the forest. 5) Lodge reveal with large serif title. 6) 'You found it. Now stay a while.' by the campfire, with a primary booking button and a secondary text link. 7) 'What you'll remember' 4-column list of experiences (the night walk, the river, sunrise, the fire). 8) Small footer with mono labels.
IMPLEMENTATION: Three.js (or React Three Fiber) for the scene, GSAP ScrollTrigger scrubbing a single master timeline of camera position, tear progress and text reveals. The tear: render the paper hero as a full-screen plane with a fragment shader whose alpha is cut by a noise-distorted radial mask centered on the figure's hands (uProgress 0-1), plus a lighter rim band for the torn fiber; spawn 30-60 small paper shard meshes at the edge. The walking figure: a rigged glTF with a walk and a reach animation via AnimationMixer, mapped to scroll. Jungle: instanced grass and fern meshes (InstancedMesh, ~20k instances on desktop, 5k on mobile), fog, emissive path lines with bloom. Text stays as real HTML over the canvas for accessibility and SEO. prefers-reduced-motion: skip the walk and tear, crossfade hero to a still jungle render, and show the sections as plain stacked content. Keep DPR capped at 1.5, pause rendering when the tab is hidden, and lazy-load the jungle assets after the hero paints.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, fonts, buttons and layout components; map the colors above to the closest existing tokens. Never copy logos, brand names, photos or 3D models from the original; use placeholder models and copy.
SUCCESS CHECK:
- Scrolling from the top, a figure walks in, stops at center and tears a jagged hole in the paper hero that grows until the jungle fills the screen.
- Further scroll moves the camera through a 3D jungle with glowing paths and pinned serif headlines, ending at a lit campfire and a booking button.
- With prefers-reduced-motion on, the page shows a simple crossfade and readable stacked sections, and the scene holds 60fps on a mid-range laptop.
