character-morph-custom-demo

1"use client";
2 
3import { CharacterMorph } from "@/registry/default/ui/character-morph";
4 
5export default function CharacterMorphCustomDemo() {
6  return (
7    <div className="flex flex-col items-center justify-center gap-8">
8      <div className="text-center">
9        <h3 className="mb-4 font-semibold text-lg">Fast Morph</h3>
10        <CharacterMorph
11          texts={["Code", "Hack", "Debug", "Fix"]}
12          interval={2000}
13          staggerDelay={0.02}
14          charDuration={0.3}
15          className="font-mono text-2xl text-primary"
16        />
17      </div>
18 
19      <div className="text-center">
20        <h3 className="mb-4 font-semibold text-lg">Slow Morph</h3>
21        <CharacterMorph
22          texts={["Design", "Create", "Build", "Deploy"]}
23          interval={4000}
24          staggerDelay={0.05}
25          charDuration={0.8}
26          className="font-bold text-3xl text-destructive"
27        />
28      </div>
29    </div>
30  );
31}