Running Area

A motion wrapper that continuously scrolls its children in a loop (e.g. right-to-left), restarting from the beginning once it reaches the end.

Usage

Basic usage example to quickly see how the RunningArea works.

Sponsor

12345

import { RunningArea } from "@/ui/running-area";
import { Typography } from "@/ui/typography";

export function TypographyDemo() {
  return (
    <div className="w-full space-y-12 flex flex-col items-center justify-center">
      <Typography el="h6" prose="h3">Sponsor</Typography>
      <RunningArea classNames={{ container: "w-full", content: "space-x-2" }}>
        {[...Array(5)].map((_, index) => (
          <span key={index} className="select-none flex items-center justify-center border font-extrabold text-h1 py-4 px-8 rounded-xl w-52">
            {index + 1}
          </span>
        ))}
      </RunningArea>
    </div>
  );
}

Properties

Interactive configurator to explore customization options for the RunningArea component.

Your WordsYour WordsYour WordsYour WordsYour Words

Direction

Duration

API References

Styles API

Styles API	Type	Default	Annotation
classNames`?`	`{ wrap?: string; inner?: string }`	`undefined`	`classNames={{ wrap: "", inner: "" }}`
styles`?`	`{ wrap?: CSSProperties; inner?: CSSProperties }`	`undefined`	`styles={{ wrap: {}, inner: {} }}`

Props API

Props API	Type	Default	Annotation
el`?`	`React.ElementType`	`wrap:"div"` `inner:"div"`	`el={{ wrap: "div", inner: "div" }}`
direction`?`	`(string & {})`	`"right-to-left"`	set running direction types
duration`?`	`number`	`25`	set running duration speed

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

running-area.tsx