Scroll Reveal⁽⁰²³⁾

Progressive word-by-word opacity and blur reveal anchored to scroll position.

Scroll

Requires:gsap

↓ Scroll down inside window

Crafting interfaces with motion is about rhythm, responsiveness, and tactile feedback.

Reveal every character with fluid motion as you explore deep into the document.

Built for developers who demand complete source code ownership and uncompromising design.

↑ Scroll back up

Loading…

Installation

$npx kibo add scroll-reveal

Usage

1import { ScrollReveal } from "@/components/kibo/scroll-reveal/component";
2 
3export default function Example() {
4  return (
5    <ScrollReveal />
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.
`enableBlur`	`boolean`	true	Whether to enable progressive blur-to-sharp animation.
`baseOpacity`	`number`	0.1	Controls the base opacity for the component animation.
`baseRotation`	`number`	3	Controls the base rotation for the component animation.
`blurStrength`	`number`	4	Peak blur amount in pixels.
`containerClassName`	`string`	''	Additional CSS classes for the outer wrapper container.
`textClassName`	`string`	''	Additional CSS classes applied directly to the text elements.
`scrollStart`	`string`	'top 90%'	ScrollTrigger starting threshold string (e.g., 'top 85%').
`rotationEnd`	`string`	'top 40%'	Controls the rotation end for the component animation.
`wordAnimationEnd`	`string`	'top 40%'	Controls the word animation end for the component animation.