Components
Morph Surface
An animated feedback widget that morphs from a compact pill into an expanded textarea form with smooth spring animations and configurable dimensions, labels, and content.
"use client";
import { MorphSurface } from "@/components/ui/morph-surface";
export default function MorphSurfaceDemo() {
const handleSubmit = async (formData: FormData) => {
const message = formData.get("message") as string;
console.log("Submitted message:", message);
await new Promise((resolve) => setTimeout(resolve, 500));
};
return (
<div className="flex justify-center items-center w-full min-h-[360px] p-8">
<MorphSurface
triggerLabel="Feedback"
placeholder="What's on your mind?"
onSubmit={handleSubmit}
/>
</div>
);
}