Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
sticky-cards-scroll-demo
We build furniture that sits quietly in a room and outlasts the house.
Select
Every piece starts at the mill — quartersawn white oak and walnut, air-dried for two winters and chosen board by board for grain.
Shape
Joints are cut by hand at the bench — mortise, tenon, dovetail — then dry-fitted twice before a single drop of glue goes in.
Finish
Surfaces are planed, scraped and rubbed with hardwax oil in six thin coats, so the timber stays open to the hand and ages evenly.
Deliver & Keep
We carry each piece in by hand and set it level. Every one is signed and dated, and comes back to the shop for repairs for life.
Have a room in mind? Let's draw it together.
import { StickyCardsScroll } from "@/registry/tween/sticky-cards-scroll"
export function StickyCardsScrollDemo() {
return (
<div className="w-full">
<StickyCardsScroll />
</div>
)
}
Installation
Usage
import { StickyCardsScroll } from "@/components/ui/sticky-cards-scroll"<StickyCardsScroll
intro="We build furniture that sits quietly in a room and outlasts the house."
outro="Have a room in mind? Let's draw it together."
cards={[
{
title: "Select",
copy: "Every piece starts at the mill — quartersawn white oak and walnut...",
image:
"https://images.unsplash.com/photo-1779031242509-af360178ebb3?q=80&w=800&h=1200&fit=crop&crop=center&auto=format",
backgroundColor: "#d8c3a2",
textColor: "#1c1915",
},
// ...
]}
/>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.
Props
| 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. |
Behavior
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.