A fluid text morphing component that creates smooth, gooey transitions between words. This component is designed to work seamlessly with shadcn/ui themes, providing an engaging visual effect for hero sections, loading states, or interactive text displays.
Features
Props
texts - Array of strings to cycle throughmorphTime - Duration of morphing animation in seconds (default: 1)cooldownTime - Pause duration between morphs in seconds (default: 0.25)className - Additional classes for containertextClassName - Additional classes for text elements (overrides theme text color if specified)
import * as React from "react";
import { GooeyText } from "@/components/ui/gooey-text-morphing";
function GooeyTextDemo() {
return (
<div className="h-[200px] flex items-center justify-center">
<GooeyText
texts={["Design", "Engineering", "Is", "Awesome"]}
morphTime={1}
cooldownTime={0.25}
className="font-bold"
/>
</div>
);
}
export { GooeyTextDemo };