Falling Text⁽⁰¹³⁾

Interactive 2D physics simulation where words fall with gravity, collisions, and drag.

ClickHover

Requires:matter-js

Installation

$npx kibo add falling-text

Usage

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

Props Reference

Prop	Type	Default	Description
`text`	`string`	''	The text content to display and animate.
`highlightWords`	`string[]`	[]	Controls the highlight words for the component animation.
`trigger`	`'auto' \| 'scroll' \| 'click' \| 'hover'`	'auto'	Controls the trigger for the component animation.
`backgroundColor`	`string`	'transparent'	Controls the background color for the component animation.
`wireframes`	`boolean`	false	Controls the wireframes for the component animation.
`gravity`	`number`	1	Controls the gravity for the component animation.
`mouseConstraintStiffness`	`number`	0.2	Controls the mouse constraint stiffness for the component animation.
`fontSize`	`string`	'1rem'	Font size in pixels, rems, or fluid clamp notation.