Gooey Text Morphing

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)

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gooey Text Morphing to your project and fits it to your theme.

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 };