Masked Heading(018)
Kinetic reveal effect slicing text through angled geometric masks with smooth easing.
Scroll
Requires:gsap
Loading…
Installation
$npx kibo add masked-heading
Usage
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | 'Designed in the details' | The text content to display and animate. |
tag | ElementType | 'h2' | Controls the tag for the component animation. |
mediaType | 'image' | 'video' | 'image' | Controls the media type for the component animation. |
src | string | '' | Controls the src for the component animation. |
poster | string | '' | Controls the poster for the component animation. |
fillScale | number | 1.25 | Controls the fill scale for the component animation. |
parallax | number | 26 | Controls the parallax for the component animation. |
drift | number | 18 | Controls the drift for the component animation. |
brightness | number | 1 | Controls the brightness for the component animation. |
saturation | number | 1 | Controls the saturation for the component animation. |
grayscale | boolean | false | Controls the grayscale for the component animation. |
reveal | Reveal | 'rise' | Controls the reveal for the component animation. |
duration | number | 1.1 | Duration of the animation in seconds or milliseconds. |
stagger | number | 0.09 | Stagger delay in seconds between individual characters/elements. |
trigger | Trigger | 'view' | Controls the trigger for the component animation. |
align | 'left' | 'center' | 'right' | 'center' | Controls the align for the component animation. |
weight | number | 700 | Controls the weight for the component animation. |
tracking | number | -0.03 | Controls the tracking for the component animation. |
lineHeight | number | 1.06 | Controls the line height for the component animation. |
textScale | number | 0.115 | Controls the text scale for the component animation. |
className | string | '' | Additional CSS classes for styling and layout. |
style | CSSProperties | - | Controls the style for the component animation. |