Letters peel out and the next phrase settles in. Drive it with a button or your own state.
Token ready
520ms
tsx
"use client"import { useState } from "react"import { Flux } from "@/components/motion/flux"import { Button } from "@/components/ui/button"const TEXTS = [ "Token ready", "Copy and ship", "Compose freely", "Ship quieter UI"]export function Example() { const [index, setIndex] = useState(0) return ( <div className="flex flex-col items-center gap-6"> <Flux texts={TEXTS} index={index} duration={520} className="text-2xl font-medium tracking-wide text-foreground sm:text-3xl" /> <Button variant="outline" onClick={() => setIndex((current) => (current + 1) % TEXTS.length)} > Flux </Button> </div> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add fluxUsage
import { useState } from "react"import { Flux } from "@/components/motion/flux"import { Button } from "@/components/ui/button"const [index, setIndex] = useState(0)<> <Flux texts={["Token ready", "Copy and ship", "Compose freely"]} index={index} /> <Button onClick={() => setIndex((i) => (i + 1) % 3)}>Flux</Button></>API Reference
Flux
| Prop | Type | Default |
|---|---|---|
| texts | string[] | — |
| index | number | 0 |
| duration | number | 520 |
| className | string | — |
Also accepts the other native span attributes.