Text Marquee

Renders a vertical scrolling text marquee with animated transitions. It displays children elements in a continuous loop with adjustable speed and height. Use it to showcase dynamic text content in a compact space.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/text-marquee

npx layro-cli add @xxtomm/text-marquee

npx layro-cli add @xxtomm/text-marquee

bunx layro-cli add @xxtomm/text-marquee

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import React from "react";
import { cn } from "@/lib/utils";

interface TextMarqueeProps {
  children: React.ReactNode[];
  speed?: number;
  className?: string;
  prefix?: React.ReactNode;
  height?: number;
}

export function TextMarquee({