Marquee

Logos, testimonials or keywords. Copies itself as wide as needed so there is never a gap; eases to a halt under the pointer.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add marquee

Example

import { Marquee } from "@/components/galactrex/marquee";

<Marquee>{logos.map((l) => <Logo key={l.id} {...l} />)}</Marquee>

Installs to components/galactrex/marquee.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The row.
`speed`	`number`	`40`	px per second.
`direction`	`"left" \| "right"`	`"left"`	Drift.
`pauseOnHover`	`boolean`	`true`	Ease to a stop on hover.
`fade`	`boolean`	`true`	Fade the edges.
`gap`	`number`	`40`	Gap in px.
`className`	`string`	—	Extra classes for the outer element.