Account

Typography

Creative

Text Loop

Logos, badges, quotes or icons with labels take turns with a slide, fade, blur or scale. Hover pauses it.

Install

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

Terminal
npx @galactrex/ui add text-loop

Usage

Example
import { TextLoop } from "@/components/galactrex/text-loop";

<TextLoop><span>Fast</span><span>Private</span><span>Yours</span></TextLoop>

Source

Installs to components/galactrex/text-loop.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.

See plans

Props

PropTypeDefaultDescription
childrenReactNode—Each child takes a turn.
everynumber2.4Seconds per item.
transition"slide" | "fade" | "blur" | "scale""slide"Hand-over.
pauseOnHoverbooleantrueStop while hovered.
classNamestring—Extra classes for the outer element.

Variants

  • Badges. Rotating status chips.

Accessibility

  • Not a live region: changes are not announced; put essential content elsewhere too.

Motion and reduced motion

  • Presence transitions; pauses offscreen.
  • Reduced motion: fades.