Trace

1"use client"23import { useState } from "react"4import { Trace } from "@/components/motion/trace"5import { Button } from "@/components/ui/button"67export function Example() {8  const [play, setPlay] = useState(0)910  return (11    <div className="flex flex-col items-center gap-6">12      <Trace13        play={play}14        duration={1200}15        strokeWidth={2}16        color="#71717a"17      >18        <svg viewBox="0 0 64 64" className="size-20" fill="none">19          <path d="M12 44V20c0-2.2 1.8-4 4-4h16c6.6 0 12 5.4 12 12s-5.4 12-12 12H20" />20          <path d="M20 28h12" />21          <circle cx="44" cy="44" r="6" />22        </svg>23      </Trace>24      <Button variant="outline" onClick={() => setPlay((n) => n + 1)}>25        Trace26      </Button>27    </div>28  )29}

1"use client"23import { useState } from "react"4import { TraceBorder } from "@/components/motion/trace"5import { Button } from "@/components/ui/button"67export function Example() {8  const [play, setPlay] = useState(0)910  return (11    <div className="flex flex-col items-center gap-6">12      <TraceBorder13        play={play}14        duration={1200}15        strokeWidth={1.5}16        color="#71717a"17        radius={12}18        className="w-full max-w-sm"19      >20        <div className="px-5 py-5">21          <h3 className="text-sm font-medium tracking-wide">Token ready</h3>22          <p className="mt-1 text-xs tracking-wide text-muted-foreground">23            The outline draws itself around the surface.24          </p>25        </div>26      </TraceBorder>27      <Button variant="outline" onClick={() => setPlay((n) => n + 1)}>28        Trace29      </Button>30    </div>31  )32}