Stroke Text⁽⁰²⁷⁾

Vector outline drawing animation sketching letter paths with SVG stroke transitions.

Scroll

Requires:gsap

Loading…

Installation

$npx kibo add stroke-text

Usage

1import { StrokeText } from "@/components/kibo/stroke-text/component";
2 
3export default function Example() {
4  return (
5    <StrokeText />
6  );
7}

Props Reference

Prop	Type	Default	Description
`text`	`string`	DEFAULT_TEXT	The text content to display and animate.
`strokeColor`	`string`	'#A78BFA'	Controls the stroke color for the component animation.
`fillColor`	`string`	'#F8FAFC'	Controls the fill color for the component animation.
`strokeWidth`	`number`	1.4	Controls the stroke width for the component animation.
`drawDuration`	`number`	1.6	Controls the draw duration for the component animation.
`fillDelay`	`number`	0.2	Controls the fill delay for the component animation.
`stagger`	`number`	0.05	Stagger delay in seconds between individual characters/elements.
`ease`	`string`	'power2.out'	GSAP or cubic-bezier easing curve for animation smoothing.
`trigger`	`StrokeTextTrigger`	'mount'	Controls the trigger for the component animation.
`fillMode`	`StrokeTextFillMode`	'wipe'	Controls the fill mode for the component animation.
`fontSize`	`number`	128	Font size in pixels, rems, or fluid clamp notation.
`fontWeight`	`number \| string`	800	Font weight (e.g., 400, 700, 900, 'bold').
`letterSpacing`	`number`	-4	Controls the letter spacing for the component animation.
`reverse`	`boolean`	false	Controls the reverse for the component animation.
`className`	`string`	''	Additional CSS classes for styling and layout.
`style`	`CSSProperties`	{}	Controls the style for the component animation.