Counter Columns
A wall of photographic prints tipped back in perspective, with tall columns drifting endlessly in opposite directions at slightly different paces. Scrolling the page pushes the columns and the push eases away, hovering slows the wall almost to a stop, and the whole plane leans gently toward the cursor. The loop is seamless at any size, and column count, pace, tilt, spacing and the top and bottom fade are all props. Reduced motion shows a still, staggered wall.
The import and the props worth knowing about, in one place.
import { CounterColumns } from "@/components/beste/component/counter-columns";
<CounterColumns
className="h-[40rem]"
images={[
{ src: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=900&q=80", alt: "A model leaning on a teal wall" },
{ src: "https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=900&q=80", alt: "Orange poppies against a blue sky" },
{ src: "https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=900&q=80", alt: "A woman walking down a city street" },
]}
columns={3}
tilt={0.6}
speed={1}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
images* | CounterColumnsImage[] | — | Photographs spread across the columns; fewer than the columns need are repeated. |
columns | number | — | Number of columns on wider screens; phones show at most two. |
speed | number | — | Pace of the drift. |
tilt | number | — | How far the wall leans back and turns, 0 (flat) to 1. |
gap | number | — | Space between prints, in pixels. |
fade | number | — | Height of the soft fade at the top and bottom, 0 to 0.4 of the frame. |
interactive | boolean | — | Hovering slows the wall, the page scroll pushes it and the wall leans toward the cursor. |
paused | boolean | — | Stop the drift. |
className | string | — |
