Stroke Fill
SVG text animates from stroke to fill with smooth transition.
Main Features of Stroke Fill
How to Use Stroke Fill in Next.js
Installation Guide for Stroke Fill
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | Elegance | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
strokeWidth | number | 1.5 | Width of the stroke |
strokeColor | string | stroke-zinc-100 | Color of the stroke |
fillColor | string | #ffffff | Color of the fill |
fontFamily | string | font-[900] | Font family class |
fontSize | string | text-8xl | Font size of the text |
fontWeight | string | uppercase | Font weight of the text |
tracking | string | tracking-widest | Letter spacing |
animationDuration | number | 3 | Animation duration in seconds |
fillDelay | number | 2 | Delay before fill animation |
fillDuration | number | 1 | Duration of fill animation |
className | string | Additional CSS classes |
Related Components
When to Use
Excellent for luxury brand logos, cinematic intros, and Next.js Landing Pages. Use this React component for a high-impact reveal where text starts as a delicate outline and fills into a solid, bold shape.
Best Practices
Follow React best practices by setting the `fillDelay` to match your viewport entry. Maintain consistent spacing within your design system by using high-contrast colors for the `strokeColor`. Optimize for performance by keeping the SVG path complexity manageable.
Why This Component Matters in Modern UI Development
SVG stroke animations are a classic mark of quality in modern frontend development. This customizable UI component provides a robust framework for timed reveals, adding visual polish and semantic authority to your real-world application architecture.
Frequently Asked Questions
QDoes it work with any font?
Yes, it works with any web font or local font. The component automatically generates the SVG paths based on the rendered text.
QIs the stroke thickness adjustable?
The `strokeWidth` prop allows you to make the initial outline as delicate or as heavy as your design requires.
QCan I trigger the fill on hover?
The current implementation is time-based for cinematic effect, but a hover-triggered fill can be easily implemented with a state change.