Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { AbsoluteCardsScroll } from "@/registry/tween/absolute-cards-scroll"
export function AbsoluteCardsScrollDemo() {
return (
<div className="w-full">
<AbsoluteCardsScroll />
</div>
)
}
import { AbsoluteCardsScroll } from "@/components/ui/absolute-cards-scroll"<AbsoluteCardsScroll
header="Roadmap"
cards={[
{
id: "1",
phase: "01",
date: "Q1 2026",
title: "Discovery",
span: "Phase",
image: "/cards/beta.png",
color: "#ecb74c",
},
// ...
]}
/>Each card is absolutely positioned and stacked behind the outlined header. As the section pins and you scroll, the cards fan out into a staggered layout, then settle into place so the roadmap reads as a sequence. Pass your own cards array to define the phases, dates, titles, and accent colors.
| Prop | Type | Default | Description |
|---|---|---|---|
heroImage | string | Default hero | Image used in the optional hero section above the pinned section. |
showHero | boolean | true | Toggle the hero section above the pinned section. |
showFooter | boolean | true | Toggle the footer placeholder section. |
cards | AbsoluteCardItem[] | 4 defaults | Each card is { id, phase, date, title, span, image, color }. |
header | ReactNode | "Roadmap" | Large outlined title shown while the section is pinned. |
footer | ReactNode | Default copy | Footer placeholder heading. |
sectionHeight | number | string | "100vh" | Height of each section. |
scroller | HTMLElement | string | null | — | Optional explicit ScrollTrigger scroller; defaults to the ambient preview scroller. |
className | string | — | Extra classes on the outer container. |
The section pins for a multiple of its own height (set by sectionHeight) while the cards animate from a centered stack to their spread positions. An optional hero section can sit above the pinned area, and a footer placeholder can close it out — toggle both with showHero and showFooter.