Fold Text⁽⁰¹⁴⁾

3D origami accordion fold animation that bends and unrolls text slices dynamically.

Scroll

Requires:gsap

Loading…

Installation

$npx kibo add fold-text

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

Prop	Type	Default	Description
`text`	`string`	'Design unfolds'	The text content to display and animate.
`splitBy`	`SplitBy`	'char'	Controls the split by for the component animation.
`hinge`	`Hinge`	'top'	Controls the hinge for the component animation.
`duration`	`number`	0.65	Duration of the animation in seconds or milliseconds.
`stagger`	`number`	0.045	Stagger delay in seconds between individual characters/elements.
`ease`	`string`	'power3.out'	GSAP or cubic-bezier easing curve for animation smoothing.
`perspective`	`number`	700	Controls the perspective for the component animation.
`creaseShading`	`number`	0.55	Controls the crease shading for the component animation.
`trigger`	`Trigger`	'mount'	Controls the trigger for the component animation.
`fontSize`	`string \| number`	80	Font size in pixels, rems, or fluid clamp notation.
`fontWeight`	`string \| number`	800	Font weight (e.g., 400, 700, 900, 'bold').
`color`	`string`	'#f7f2e8'	Text or primary fill color.
`className`	`string`	''	Additional CSS classes for styling and layout.
`style`	`CSSProperties`	{}	Controls the style for the component animation.