---
title: "Animated Stroke Text — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Text. Make your headlines pop with Animated Stroke Text."
canonical: "https://framer.elliotli.dev/component/animated-stroke-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Animated Stroke Text

# Animated Stroke Text

Animated outline text.

[View on Framer](https://framer.com/marketplace/components/animated-stroke-text/?via=elliot-li)

![Animated Stroke Text preview image 1](https://framer.elliotli.dev/og/component/animated-stroke-text/0afd7266f9340a54/1600x1200.jpg)

## Summary

Make your headlines pop with Animated Stroke Text.

## Description

Make your headlines pop with **Animated Stroke Text**. This high-impact typography component creates a stylish outline (stroke) effect that can be dynamically filled with color using a smooth wiping animation.

It's designed for modern web design, allowing you to cycle through an array of keywords (e.g., "Design", "Build", "Launch") to create engaging, changing sentences. You have complete control over the **stroke width**, **glow intensity**, and animation timing. Whether you want a neon cyberpunk look or a clean, minimalist outline, this component delivers a polished, professional result without custom CSS.

**Functions (Key Features):**

-   ✍️ **Outline Effect:** Customizable stroke width and color using WebkitTextStroke.
    
-   🎨 **Animated Fill:** Smoothly fills the text with color from left to right using a clipping mask animation.
    
-   🔄 **Word Cycling:** Automatically cycles through a list of words (Text Array) to create dynamic headlines.
    
-   ✨ **Glow Mode:** Optional drop-shadow glow effect to make the text stand out on dark backgrounds.
    
-   📐 **Layout Control:** Full support for horizontal and vertical alignment (Left, Center, Right).
    

**How to Use:**

1.  **Insert:** Drag the **Animated Stroke Text** component onto your canvas.
    
2.  **Text:** To cycle words, enable **Use Array** and add your keywords (e.g., "FAST", "EASY", "POWERFUL"). Otherwise, just set the static **Text**.
    
3.  **Styling:** Adjust **Stroke Width** and **Stroke Color** to define the outline. Pick an **Animated Fill** color for the fill effect.
    
4.  **Animation:** Tweak **Duration** and **Cycle Delay** to control how fast the text fills and changes.
    
5.  **Glow:** Enable **Stroke Glow** and adjust intensity for a neon sign effect.
    

**Control Panel**

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-k6o6qugi-bRlW0Zxy9GZvOogpYBko0MiYtRqc68)

## Rank history [How rankings work →](/terms#rankings)

-   All · #8725

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-02-16
- **Updated**: 2026-07-26
- **Added**: 2026-02-07
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing