react-kino
Components

Marquee

Infinite scrolling marquee that loops content horizontally.

Overview

<Marquee> creates an infinitely scrolling horizontal marquee. Content loops seamlessly. Supports configurable speed, direction, and hover-to-pause behavior.

Usage

import { Marquee } from "react-kino";
 
<Marquee speed={40} pauseOnHover>
  <span>react-kino</span>
  <span>Cinematic scroll</span>
  <span>Core engine &lt;1 KB</span>
</Marquee>

Props

PropTypeDefaultDescription
speednumber40Scroll speed in pixels per second
direction"left" | "right""left"Direction of scrolling
pauseOnHoverbooleanfalseWhether to pause the animation when hovered
gapnumber40Gap between repeated items in pixels
childrenReactNode--Content to scroll
classNamestring--CSS class for the container

Example: Logo parade

<Marquee speed={30} direction="left" gap={60} pauseOnHover>
  <img src="/logo-1.svg" alt="Company 1" height={32} />
  <img src="/logo-2.svg" alt="Company 2" height={32} />
  <img src="/logo-3.svg" alt="Company 3" height={32} />
  <img src="/logo-4.svg" alt="Company 4" height={32} />
</Marquee>

Example: Reverse direction

<Marquee speed={50} direction="right">
  <span style={{ padding: "0 2rem", fontSize: "1.5rem" }}>Fast</span>
  <span style={{ padding: "0 2rem", fontSize: "1.5rem" }}>Declarative</span>
  <span style={{ padding: "0 2rem", fontSize: "1.5rem" }}>Accessible</span>
</Marquee>

Previous

TextReveal

Next

StickyHeader

On this page