Scroll Float⁽⁰²²⁾

Weightless typography effect where characters float smoothly upwards on scroll.

Scroll

Requires:gsap

Weightless floating typography engineered for high-impact landing pages.

Loading…

Installation

$npx kibo add scroll-float

Usage

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

Props Reference

Prop	Type	Default	Description
`children`	`ReactNode`	-	Child elements or content to render inside the component.
`scrollContainerRef`	`RefObject<HTMLElement \| null>`	-	Optional RefObject to a scrollable container element.
`containerClassName`	`string`	''	Additional CSS classes for the outer wrapper container.
`textClassName`	`string`	''	Additional CSS classes applied directly to the text elements.
`animationDuration`	`number`	0.8	Controls the animation duration for the component animation.
`ease`	`string`	'back.out(2)'	GSAP or cubic-bezier easing curve for animation smoothing.
`scrollStart`	`string`	'top bottom+=40%'	ScrollTrigger starting threshold string (e.g., 'top 85%').
`scrollEnd`	`string`	'bottom bottom-=40%'	ScrollTrigger ending threshold string (e.g., 'bottom 40%').
`stagger`	`number`	0.025	Stagger delay in seconds between individual characters/elements.
`triggerOnHover`	`boolean`	true	Controls the trigger on hover for the component animation.