Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
We start by listening — to your users, your goals, and the constraints that shape every decision before a single pixel is drawn.
From rough sketches to high-fidelity systems, every screen is crafted with intent, tested early, and refined until it feels right.
Clean, performant code that mirrors the design exactly — accessible by default and built to scale with your product over time.
Shipping is the start, not the finish. We measure, learn, and keep improving long after the first release goes live.
import { StickyCardsScroll } from "@/registry/tween/sticky-cards-scroll"
export function StickyCardsScrollDemo() {
return (
<div className="w-full">
<StickyCardsScroll />
</div>
)
}
import { StickyCardsScroll } from "@/components/ui/sticky-cards-scroll"<StickyCardsScroll
intro="Everything we build starts from a single, deliberate idea."
outro="That is how the work comes together."
cards={[
{
title: "Foundation",
copy: "We begin with the structure that everything else rests on...",
image: "/cards/foundation.jpg",
backgroundColor: "#c3abff",
textColor: "#000",
},
// ...
]}
/>Each card pins to the viewport as it enters, stacking on top of the previous one, with the intro and outro sections framing the sequence on either end.
| Prop | Type | Default | Description |
|---|---|---|---|
intro | ReactNode | Default copy | Heading shown in the pinned intro section. |
outro | ReactNode | Default copy | Heading shown in the outro section after the cards. |
cards | StickyCardItem[] | 4 defaults | Each card is { title, copy, image, backgroundColor, textColor }. |
heroImage | string | Default image | Image used in the optional hero section above the intro. |
showHero | boolean | true | Toggle the hero section above the intro. |
sectionHeight | number | string | "100vh" | Height of each pinned section. |
cardTranslate | number | 14 | Vertical translate factor in vh for the card-inner slide. |
className | string | — | Extra classes on the outer container. |
Every section pins for its full height as it reaches the top of the viewport. Each non-final card then tweens its inner content upward by (cardsLeft × cardTranslate)vh over the pin range, so deeper cards drift further and the stack reveals progressively as you scroll.