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:
Insert: Drag the Animated Stroke Text component onto your canvas.
Text: To cycle words, enable Use Array and add your keywords (e.g., "FAST", "EASY", "POWERFUL"). Otherwise, just set the static Text.
Styling: Adjust Stroke Width and Stroke Color to define the outline. Pick an Animated Fill color for the fill effect.
Animation: Tweak Duration and Cycle Delay to control how fast the text fills and changes.
Glow: Enable Stroke Glow and adjust intensity for a neon sign effect.
Control Panel
Alpheratz
