Marquee
A looping strip that pauses on hover.
import
import { Marquee } from '@joshicodes/cock';Strip
SvelteKit Tailwind 4 Runes OKLCH color-mix TypeScript Vite Bun
SvelteKit Tailwind 4 Runes OKLCH color-mix TypeScript Vite Bun
Behaviour
- Repeats the content enough times to cover the container, so the loop never shows a gap.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Marquee
| Prop | Type | Default |
|---|---|---|
speed Pixels per second. | number | 40 |
direction | 'left' | 'right' | 'left' |
pauseOnHover | boolean | true |
gap Space between items, any CSS length. | string | '2.5rem' |
fade Fade the content out towards both edges. | boolean | true |
class | string | — |
Snippets of Marquee
| Snippet | Type | Default |
|---|---|---|
children required | Snippet | — |