Components
Loading preview...
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 - Smooth morphing transitions between text phrases - Customizable animation timing - Gooey effect using SVG filters - Automatic theme adaptation with shadcn/ui - Responsive text sizing - Fully customizable styling - TypeScript support Props - `texts` - Array of strings to cycle through - `morphTime` - Duration of morphing animation in seconds (default: 1) - `cooldownTime` - Pause duration between morphs in seconds (default: 0.25) - `className` - Additional classes for container - `textClassName` - Additional classes for text elements (overrides theme text color if specified)
@victorwelander
npx shadcn@latest add https://21st.dev/r/victorwelander/gooey-text-morphingimport * 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 };