Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
A studio built on motion.
Where ideas come into focus.
Made to be felt, not just seen.
Scroll to begin
import { PhotoCardsRevealScroll } from "@/registry/tween/photo-cards-reveal-scroll"
export function PhotoCardsRevealScrollDemo() {
return (
<div className="w-full">
<PhotoCardsRevealScroll />
</div>
)
}
import { PhotoCardsRevealScroll } from "@/components/ui/photo-cards-reveal-scroll"<PhotoCardsRevealScroll
rows={[
{ left: "/img-1.jpg", right: "/img-2.jpg" },
{ left: "/img-3.jpg", right: "/img-4.jpg" },
{ left: "/img-5.jpg", right: "/img-6.jpg" },
]}
lines={[
"Every frame tells part of the story.",
"Scroll to bring the picture into focus.",
"Motion that earns its place on the page.",
]}
cta="Get PRO"
/>As the section scrubs, each row's left and right cards translate apart along leftX/rightX and tilt by leftRotation/rightRotation, while yOffsets lifts or drops the pair so the rows separate at different rates. The clearing they leave behind exposes the centered logo, the masked copy lines that rise into view, and the CTA. The whole timeline is tied to the scroll position, so it plays forward as you scroll down and rewinds cleanly as you scroll back up.
| Prop | Type | Default | Description |
|---|---|---|---|
rows | PhotoCardsRow[] | 3 defaults | Each row is { left, right, leftAlt, rightAlt }. |
heroLogo | string | Default logo | Image shown in the hero section above the main section. |
logo | string | Default logo | Image shown in the centered overlay inside the main section. |
lines | ReactNode[] | 3 default lines | Copy lines that reveal from below their masks. |
cta | ReactNode | "Get PRO" | CTA button label. |
footer | ReactNode | Default copy | Footer link copy. |
backgroundColor | string | "#000000" | Background color of the whole component. |
textColor | string | "#ffffff" | Foreground color. |
leftX | number[] | [-800, -900, -400] | X translation (px) of each row's left card at the end of the scrub. |
rightX | number[] | [800, 900, 400] | X translation (px) of each row's right card at the end of the scrub. |
leftRotation | number[] | [-30, -20, -35] | Rotation (deg) of each row's left card at the end of the scrub. |
rightRotation | number[] | [30, 20, 35] | Rotation (deg) of each row's right card at the end of the scrub. |
yOffsets | number[] | [100, -150, -400] | Y translation (px) applied to both cards in each row. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the ambient preview scroller. |
className | string | — | Extra classes on the outer container. |