Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
rise-fan-cards-scroll-demo
Every vessel begins as a quiet afternoon.
Glaze settles slowly, the way good light does.
We throw by hand and fire in patient batches.
import { RiseFanCardsScroll } from "@/registry/tween/rise-fan-cards-scroll"
export function RiseFanCardsScrollDemo() {
return (
<div className="w-full">
<RiseFanCardsScroll />
</div>
)
}
Installation
Usage
import { RiseFanCardsScroll } from "@/components/ui/rise-fan-cards-scroll"<RiseFanCardsScroll
cards={[
{
img: "https://images.unsplash.com/photo-1597696929644-a2157a251a43?q=80&w=1400&h=1000&fit=crop&crop=center&auto=format",
alt: "Celadon jugs and bowls glazed in sage and seafoam",
},
{
img: "https://images.unsplash.com/photo-1687191886564-4df56dc1c7df?q=80&w=1400&h=1000&fit=crop&crop=center&auto=format",
alt: "Three matte porcelain bud vases set in a row",
},
{
img: "https://images.unsplash.com/photo-1687191883721-257d8cad5b54?q=80&w=1400&h=1000&fit=crop&crop=center&auto=format",
alt: "A single bone-white stoneware vase in soft light",
},
{
img: "https://images.unsplash.com/photo-1523263889714-d345f8119047?q=80&w=1400&h=1000&fit=crop&crop=center&auto=format",
alt: "A speckled grey bottle vase against a charcoal wall",
},
]}
intro="Every vessel begins as a quiet afternoon."
heading="Glaze settles slowly, the way good light does."
outro="We throw by hand and fire in patient batches."
/>The middle section pins for pinDistanceFactor viewport heights. In the first phase, the four rotated cards rise from below the frame into a centered, overlapping stack with a per-card stagger and an eased cubic-out motion. In the second phase, as the scroll continues, each card fans out to its own distinct position while rotating back to upright, again with a stagger. Each card is absolutely centered and animated via xPercent / yPercent so its center stays anchored to the parent center as it moves. The trigger resolves its scroller via usePreviewScroller and a ResizeObserver rebuilds it on layout changes. When prefers-reduced-motion: reduce is set, the section renders its final state with the cards fanned out and upright.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cards | RiseFanCard[] | 4 defaults | Image cards ({ img, alt }) that rise and fan out. |
intro | React.ReactNode | default | Headline shown in the intro section. |
heading | React.ReactNode | default | Headline shown behind the cards in the pinned section. |
outro | React.ReactNode | default | Headline shown in the outro section. |
pinDistanceFactor | number | 6 | How many viewport heights the section pins for. |
background | string | "#d7dbd2" | Intro / outro background color. |
panelBackground | string | "#edf1e8" | Pinned card section background color. |
foreground | string | "#141414" | Text color. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to preview scroller. |
className | string | — | Extra classes on the outer container. |