Text Morph Input Demo

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useState } from "react";
5import { TextMorph } from "@/components/sora-ui/texts/text-morph";
6 
7/** Docs preview — live morph as you type. */
8export function TextMorphInput() {
9  const [text, setText] = useState("Craft");
10 
11  return (
12    <div className="flex w-full max-w-sm flex-col items-center justify-end space-y-12">
13      <TextMorph className="font-medium text-5xl text-foreground" live="polite">
14        {text}
15      </TextMorph>
16      <input
17        className={cn(
18          "h-9 w-full rounded-lg border border-input bg-transparent p-2",
19          "text-base text-foreground shadow-xs outline-none transition-colors",
20          "placeholder:text-muted-foreground",
21          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
22        )}
23        onChange={(event) => setText(event.target.value)}
24        placeholder="Type your text here"
25        type="text"
26        value={text}
27      />
28    </div>
29  );
30}
31 
32export default TextMorphInput;