# 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.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: motion
- Live preview: https://21st.dev/@uniquesonu/components/animated-circle-text-effect

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/animated-circle-text-effect?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt