REFERENCE
- Gallery page: https://magpui.com/en/i/scroll-driven-section-seams-8abb0d
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/scroll-driven-section-seams-8abb0d/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/scroll-driven-section-seams-8abb0d/clip.mp4
- Original post: https://x.com/codrops/status/2116144602465931717 by @codrops
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.
- Section photos: Moody desaturated photograph of a misty pine forest hillside, soft overcast light, muted gray-green palette, wide 16:9, no people, no text. Variants: tree roots on forest floor, stack of old library shelves, marbled paper in rust and teal, pale ceramic bowl with gold cracks.
BUILD: Build a vertical scrolling page of full-viewport photographic sections where the boundary between each section and the next is the star. Each section has a big one-word title and a photo, and its bottom edge is a different organic, animated seam against the white section below. The seams are scrubbed to scroll progress, so the edge forms, wobbles and settles as it moves through the viewport. It should feel editorial, tactile and a little experimental.
DESIGN SYSTEM: Each section is 100vh. Titles: large uppercase geometric sans (around clamp(56px, 9vw, 140px), weight 400, letter-spacing -0.02em), white on the photo, top-left with 40px margin; some titles include a small non-latin glyph. Tiny 10px uppercase caption at the right edge (index and name) in 70% white. The page background and the section below each seam is white #ffffff. Photos are moody and desaturated: misty forest in grays and dark green (#2f3a33), bark and stripes in warm gray (#8a7f73), a library with dark wood (#3b2a20), marbled paper in rust, ochre and teal (#b4532f, #d9a441, #2b6f86), a pale ceramic bowl with gold cracks (#d9b45a), tree roots in brown (#4b3a2c). Seams are pure white shapes with soft grain, no outlines.
MOTION: Seam variants seen: (1) torn silhouette: a jagged white mask like a treeline rises from the bottom, amplitude growing from 0 to about 120px as the boundary enters, flattening to a straight line once the next section is fully in view; (2) fine vertical fringe: a thin comb of vertical strokes hanging from the photo, lengths driven by noise, shimmering slightly; (3) dithered text edge: the boundary is a grid of tiny monospace characters (about 9px) that appear in a stepped Bayer-like order and fade out; (4) wavy marbled edge: a sine/noise wobble (amplitude about 30px, 2-3 waves) that moves with scroll velocity; (5) crack lines: thin 1px gold lines draw along the edge with a stroke-dashoffset reveal; (6) hanging roots: thin dark SVG strands that grow downward into the white area with a slight sway. All animations are scrubbed with scroll (scrub 0.6-1), titles drift up 8% (parallax) and the photo scales from 1.08 to 1 while in view. Easing: power2.out for reveals, linear for scrubbed values. Add a small velocity-based extra wobble that decays in about 400 ms.
SECTIONS: Eleven stacked sections, each: photo background, big title, caption, seam into the next. Last section ends on a plain white footer.
IMPLEMENTATION: Vite + TypeScript, GSAP ScrollTrigger (scrub) with Lenis smooth scroll. Seams drawn with a mix of SVG paths (waves, roots, cracks), Canvas 2D (character grid, dither) and optionally a WebGL fragment shader with noise displacement for the marbled edge. Use clip-path or a mask canvas placed at the section's bottom, keep text as real DOM headings. Resolve every seam to a clean straight line when the section is fully in view or reduced motion is requested. prefers-reduced-motion: no scrubbed wobble, simple crossfade between sections. devicePixelRatio aware, only render seams near the viewport, 60fps.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens; never copy logos, brand names, photos or illustrations from the original; use placeholder photos.
SUCCESS CHECK:
- Each seam animates only while scrolling and is a perfectly straight edge when at rest.
- At least five clearly different seam styles are present and none causes layout shift.
- Scrolling stays at 60fps and headings remain readable and selectable.
