Horizontal Rail

Move a row of cards sideways as the page scrolls. A native horizontal scroller is available as a fallback.

Dependencies: gsap
Size: 303 lines
Controls: 9 controls

example.tsx

1import { HorizontalRail } from "@/components/onycx/horizontal-rail";23export default function Example() {4  return (5    <HorizontalRail6      eyebrow={"The Signatures"}7      heading={"A feeling,"}8      headingAccent={"before a name."}9      hint={"Scroll through the collection"}10      offset={0}11      scrub={0.8}12      turn={false}13      gold={"#c8ae80"}14      background={"#0e0d0c"}15    />16  );17}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/horizontal-rail.json

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/horizontal-rail.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the horizontal-rail.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
items	RailItem[]	—	{ title, family?, tagline?, image, imageAlt?, href? }. Cards become links when href is set.
index / eyebrow	string	"II" / "The Signatures"	Caps label with a gold rule.
heading / headingAccent	string	"A feeling," / "before a name."	Serif heading with a gold italic tail.
intro	string	—	Header paragraph; "\n" breaks a line.
hint	string	"Scroll through the collection"	Caps label under the rail. Empty hides it.
offset / scrub	number	0 / 0.8	Pin position below a fixed header (px) and scroll smoothing.
turn	boolean	false	Adds the per-card 3D turn while pinned.
gold / ivory / background	string	"#c8ae80" / "#f3ebdd" / "#0e0d0c"	Accent, text and section colours.
className	string	—	Extra classes on the section.

Behaviour notes

Default images point to /media/fragrance-showcase/… (the original project's product photographs); replace them with your own.
Pins only at 1024px+ wide and 650px+ tall without reduced motion; otherwise the rail is a focusable native horizontal scroller (55vw × 64vw cards under 1024px, 82vw × 110vw under 640px).
Tabbing to a card while pinned scrolls the page to trigger.start + min(distance, card.offsetLeft − 48), so focus stays on screen.
Even cards arch at the bottom and centre their copy with extra bottom padding, as in the source.

Pattern origin

onycx-perf 'The Signatures' collection rail: track x → −(scrollWidth − clientWidth), pinned top top for the same distance at scrub 0.8 (1024 × 650+); cards min(32vw, 460px) × min(57svh, 560px), min-height 350px, gap 1.5rem, arches 48% 48% 1.5rem 1.5rem alternating with 1.5rem 1.5rem 48% 48%; #0e0d0c section, gold #c8ae80 italic taglines. The optional 3D turn (rotateY −6° → 4°, scale 0.96 → 1 via containerAnimation) is the onycx_tequilla chapter variant.

#pin#horizontal#gallery#scroll#gsap#keyboard