Ruixen Pro early-bird — $59 lifetime, then $7904d12h20m06sLock in $59

Command Palette

Search for a command to run...

Docs
Scroll Portrait Wall

Scroll Portrait Wall

A scroll-driven portrait wall with a sticky mix-blend-exclusion title. GSAP ScrollTrigger scrubs each portrait from scale 0 to 1 and back as its row crosses the viewport.

Installation

Notes

  • The section uses shadcn theme tokens (bg-background / text-foreground) so it adapts to light and dark; the mix-blend-exclusion title inverts against whatever portrait sits behind it. Override via className.
  • The default speakers use remote CDN portraits so the component renders without local assets. Pass your own speakers with real src paths in production.
  • Honors prefers-reduced-motion: when reduced, every portrait renders at full scale with no scroll scrubbing.

Props

PropTypeDefaultDescription
titleReactNode"Speakers"Big sticky title rendered with mix-blend-exclusion.
dateReactNode"Oct 22, 2025"Small line under the title.
hintReactNode"scroll down to see effect"Top-of-section hint with the gradient tail.
speakersSpeaker[]built-in demo setPeople to scatter across the wall. Speaker = { name, role, src }.
columnsnumber4Grid columns the portraits are scattered across.
showCaptionsbooleantrueShow the name / role caption under each portrait.
classNamestringundefinedExtra classes merged onto the root <section>.
Scroll Tilted GridCard Stack