Scramble

1"use client"23import { useState } from "react"4import { Scramble } from "@/components/motion/scramble"5import { Button } from "@/components/ui/button"67const TEXTS = [8  "Token ready",9  "Copy and ship",10  "Compose freely",11  "Ship quieter UI"12]1314export function Example() {15  const [index, setIndex] = useState(0)16  const [play, setPlay] = useState(0)1718  return (19    <div className="flex flex-col items-center gap-6">20      <Scramble21        text={TEXTS[index]}22        play={play}23        duration={1100}24        speed={28}25        className="text-2xl font-medium tracking-wide text-foreground sm:text-3xl"26      />27      <Button28        variant="outline"29        onClick={() => {30          setIndex((current) => (current + 1) % TEXTS.length)31          setPlay((current) => current + 1)32        }}33      >34        Scramble35      </Button>36    </div>37  )38}