Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
spotlight-gallery-hero-demo
A slow archive of the hour after sunset, gathered roll by roll from the coastlines the light forgets.
Enter the ArchiveField notes from the blue hour
The Rolls
Write to Noct
import { SpotlightGalleryHero } from "@/registry/tween/spotlight-gallery-hero"
export function SpotlightGalleryHeroDemo() {
return <SpotlightGalleryHero />
}
Installation
Usage
import { SpotlightGalleryHero } from "@/components/ui/spotlight-gallery-hero"<SpotlightGalleryHero
images={[
"https://images.unsplash.com/photo-1602172525219-35383c054399?w=2000",
"https://images.unsplash.com/photo-1652179023625-36d83d300a90?w=2000",
"https://images.unsplash.com/photo-1523497873958-8639c94677f2?w=2000",
"https://images.unsplash.com/photo-1547608763-e1fab6036a33?w=2000",
"https://images.unsplash.com/photo-1485780974122-c91bb5dcf725?w=2000",
"https://images.unsplash.com/photo-1771784970156-02083a4d26e5?w=2000",
"https://images.unsplash.com/photo-1546273640-dd139ba0a3aa?w=2000",
"https://images.unsplash.com/photo-1559246875-dfb359b7710c?w=2000",
"https://images.unsplash.com/photo-1569744046958-7b5e6bb344a8?w=2000",
]}
logoAlt="Noct"
headline="A slow archive of the hour after sunset."
ctaLabel="Enter the Archive"
/>How it works
The hero pins for four viewport heights without pin spacing, so the following section is pushed down by three viewport heights with a top margin and slides over the hero at the end of the pin.
- Gallery: a 3×3 grid three viewports wide and tall, centered on the middle image, scales from
1to0.5across the first 75% of the pin while each image zooms from1.25to1. - Logo: sits in a sticky layer at the bottom-left of the scroller, scales from
6(2on narrow containers) down to1and travels to the top-left over the same range. - Footer: blurs, shrinks and fades out between 5% and 25%.
- Headline: split into words with
SplitText; the words and the button fade in one after another between 10% and 60%.
A second scrubbed trigger moves the hero content up 25% and fades a black overlay in as the next section enters. Both triggers use usePreviewScroller. With prefers-reduced-motion: reduce the final hero state is shown.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | 9 images | Nine images, filled column by column into a 3×3 gallery. |
logoSrc | string | inline mark | Logo image that scales and travels. |
logoAlt | string | "Noct" | Alt text for the logo. |
headline | string | default copy | Headline split into words that fade in. |
ctaLabel / ctaHref | string | "Enter the Archive" / "#" | Button label and link. |
footer | ReactNode | default copy | Footer text that blurs out. |
sections | [ReactNode, ReactNode] | ["The Rolls", "Write to Noct"] | Headings of the two sections after the hero. |
accent | string | "#f2b880" | Button background and inline logo color. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the preview one. |
className | string | — | Extra classes on the outer container. |