Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
import { DualColumnSlider } from "@/registry/tween/dual-column-slider"
export function DualColumnSliderDemo() {
return <DualColumnSlider />
}
import { DualColumnSlider } from "@/components/ui/dual-column-slider"<DualColumnSlider
slides={[
{
title: "Solenne",
tags: ["Residence & Courtyard", "Limewash & Stone"],
accent: "#f3e7d3",
leftImg: "/images/solenne-court.jpg",
rightImg: "/images/solenne-stair.jpg",
link: "/work/solenne",
},
// ...
]}
/>i is revealed by position - i: the left column clips it in from the bottom up, the right column from the top down, so the two halves move in opposite directions.imageShift percent (in opposite directions per column) and is zoomed by imageZoom, giving a parallax feel.titleHold of the travel, then eases away with a smoothstep.bufferSlides slides on either side are kept in the DOM; others are created and removed as you scroll, so it loops forever.prefers-reduced-motion: reduce, the first slide is shown at rest.| Prop | Type | Default | Description |
|---|---|---|---|
slides | DualColumnSlide[] | 5 defaults | { title, tags, accent, leftImg, rightImg, link?, linkLabel? }. |
scrollSensitivity | number | 1200 | Wheel delta (px) needed to advance one slide. |
smoothness | number | 0.05 | Lerp factor toward the scroll target. |
bufferSlides | number | 3 | Slides kept mounted on each side of the current one. |
imageShift | number | 25 | Image parallax travel in percent. |
copyShift | number | 15 | Title parallax travel in percent. |
titleHold | number | 0.1 | Fraction of travel the title holds at center. |
imageZoom | number | 1.25 | Image scale. |
revealOverlap | number | 0.5 | Extra percent on the clip reveal to avoid seams. |
className | string | — | Extra classes on the outer section. |