Animated Circle Text Effect

This React component creates a visually appealing text effect where the word 'Marketing' is encircled by an animated path. The animation is achieved using the `motion` library from Framer Motion. The component renders a heading containing the text 'Scale your Marketing with Simple AI Tools'. The word 'Marketing' is positioned within a dynamically generated SVG circle. This circle is drawn using a path element that is animated to create a reveal effect. The animation starts when the component is in the user's viewport. The component utilizes several key features: 1. **Framer Motion:** This library provides the `motion.path` component, which is crucial for creating the animated SVG path. The `initial`, `whileInView`, and `transition` props control the animation's starting state, triggering condition, and timing, respectively. 2. **SVG Path:** A custom SVG path defines the shape of the circle. The `d` attribute specifies the path's coordinates, creating a smooth circular shape. 3. **Inline Styling:** The styling for the SVG path (stroke color, width) and the overall container (background color, text color) is applied inline using CSS classes. 4. **Responsive Design:** The `max-w-2xl` class ensures that the text is responsive and adapts to different screen sizes. The `grid` and `place-content-center` classes help with centering the content. This component is ideal for situations where you want to draw attention to a specific word or phrase on a webpage, adding a touch of dynamism and visual interest. It could be used in a marketing landing page, a product showcase, or any other scenario where a stylish presentation is needed. The animation is subtle yet effective, enhancing user engagement.

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

import { DrawCircleText } from "@/components/ui/animated-circle-text-effect";

export default function DemoOne() {
  return <DrawCircleText />;
}