Typography
CreativeText 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.
npx @galactrex/ui add text-loopUsage
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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Each child takes a turn. |
every | number | 2.4 | Seconds per item. |
transition | "slide" | "fade" | "blur" | "scale" | "slide" | Hand-over. |
pauseOnHover | boolean | true | Stop while hovered. |
className | string | — | 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.