Pro
Curved marquee
A line of type that runs along a wave. It drifts on its own, slows to a crawl under the pointer, and can be grabbed and flung either way; a fling keeps its direction and settles back to the drift.
pnpm dlx shadcn@latest add @caliper/curved-marqueeWhen to use
Use it for
- A statement band between sections of a marketing page.
- Destinations, categories or a short manifesto that should feel in motion.
Skip it when
- Navigation or anything people must click; the words are not links.
- Long sentences; a few words repeat best.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Read once
- The visible line repeats the words to fill the curve; assistive technology gets them once, in a hidden paragraph.
- Even at any width
- The curve is drawn in a fixed coordinate space, so type size and speed keep their proportions from phone to desktop.
Installation
pnpm dlx shadcn@latest add @caliper/curved-marquee
Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { CurvedMarquee } from "@/components/ui/curved-marquee"
The worked example comes with Pro
The 23-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
CurvedMarquee
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements and keeps aria-hidden and aria-pressed in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- MarqueeA slow scrolling row of content that pauses on hover.
- Scroll velocityRows that drift sideways and answer the page's scroll: faster scrolling pushes them faster and leans them a little, scrolling up turns them round, and they ease back to a slow drift when the page rests.
- Logo marqueeCustomer logos in a slow scrolling row.