Step Rail Marquee

Installation

pnpm dlx shadcn@latest add @cleverui/marquee-step-rail

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { MarqueeStepRail } from '@/components/blocks/marquee-step-rail'

Exampletsx

import { MarqueeStepRail } from '@/components/blocks/marquee-step-rail'

const work = [
  { text: 'Harborstack billing redesign', meta: 'Fintech · 2025' },
  { text: 'Northgate ops console', meta: 'Logistics · 2025' },
  { text: 'Fieldline sensor dashboard', meta: 'Industrial · 2024' },
  { text: 'Meridian brand system', meta: 'Studio · 2024' },
  { text: 'Ledgerly audit workspace', meta: 'SaaS · 2024' },
  { text: 'Pinewire investor site', meta: 'Climate · 2023' },
]

export default function MarqueeStepRailDemo() {
  return (
    <div className="flex min-h-[360px] flex-col justify-center">
      <div className="mx-auto max-w-6xl px-4 pb-2 sm:px-6">
        <h2 className="max-w-md text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
          Case work that steps into the station, not past it.
        </h2>
      </div>
      <MarqueeStepRail
        items={work}
        dwell={2.4}
        travel={0.5}
        itemWidth={280}
        eyebrow="Selected work"
      />
    </div>
  )
}

API reference

MarqueeStepRail accepts the following props.

Prop	Type	Default	Description
`items`*	`MarqueeStepRailItem[]`	–	4–10 seamed entries advanced one cell at a time
`dwell`	`number`	`2.4`	seconds each step holds still before the next advance
`travel`	`number`	`0.5`	seconds of eased movement between holds
`itemWidth`	`number`	`280`	fixed px width per cell, equal widths keep the stepped keyframes exact
`eyebrow`	`string`	`'Selected work'`	mono micro-label above the rail; also seeds the landmark aria-label

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface MarqueeStepRailItem {
  text: string
  /** mono suffix line, year, category, or client */
  meta?: string
}

Related components

Logo Marquee

Single-row logo strip on a pure-CSS loop, wordmarks sit grayscale and dimmed until hover restores them, with edge fade masks and an honest sr-only roster of company names.

Split Lanes Marquee

Two counter-scrolling lanes of short display words, filled type above, outline type below, pure CSS with edge fades and a static stacked lockup under reduced motion.

Ticker Tape Marquee

Thin financial-style tape scrolling mono label-value pairs on pure CSS, signed deltas carry direction glyphs in the primary/destructive token pair, framed by hairlines.

Focus Lens Marquee

React marquee with a fixed center reading lens, Tailwind display phrases drift on a loop and swell into focus as they cross a hairline reticle, receding at the edges.

Velocity Scroll Marquee

Display-type marquee whose speed and direction follow scroll velocity, spring-smoothed so it drifts gently at rest, whips with fast scrolls, and never jumps.

Testimonial Marquee

Two counter-scrolling rows of customer quotes with edge fades, pure CSS, pauses on hover, and renders a static grid under reduced motion.

Frequently asked questions

How do I install the Step Rail Marquee component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/marquee-step-rail`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Step Rail Marquee require?

Step Rail Marquee has no npm dependencies beyond React and Tailwind CSS itself, so there is nothing extra to install or keep updated.

Can I theme Step Rail Marquee to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code