Liquid Marquee

Marquee with liquid distortion and edge fades.

Installation

npx shadcn@latest add @iconiq/liquid-marquee

Props

LiquidMarquee

Seamless horizontal marquee that duplicates its children into a looping track, animates with requestAnimationFrame, and applies an SVG liquid distortion filter with gradient edge fades.

childrenReact.ReactNode

Required

Content rendered twice inside the scrolling track. A single horizontal row of labels, logos, or cards works best.

speednumber

Default 45

Scroll speed in pixels per second. Higher values move the track faster.

direction"left" | "right"

Default left

Sets the scroll direction. `left` moves content toward the left edge; `right` reverses the flow.

classNamestring

Optional class names merged onto the overflow container for height, spacing, or background styling.

pauseOnHoverboolean

Default true

When true, pointer hover pauses the animation until the cursor leaves the marquee.

The track duplicates `children` once to create a seamless loop and resets position when one copy scrolls fully out of view.

Liquid distortion is powered by inline SVG filters (`feTurbulence` + `feDisplacementMap`) applied to the moving track.

Gradient masks on the left and right edges use `from-background`, so the fade matches your page surface color.

Multiple instances on one page share the same SVG filter ids; keep one marquee per view or fork the filter ids if you need several on the same screen.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: none.