Scroll Velocity⁽⁰²⁴⁾

Infinite marquee text banners accelerating dynamically based on page scroll velocity.

Scroll

Requires:motion

KIBO COMPONENT LIBRARY KIBO COMPONENT LIBRARY KIBO COMPONENT LIBRARY KIBO COMPONENT LIBRARY KIBO COMPONENT LIBRARY KIBO COMPONENT LIBRARY

NEXT.JS & TAILWIND NEXT.JS & TAILWIND NEXT.JS & TAILWIND NEXT.JS & TAILWIND NEXT.JS & TAILWIND NEXT.JS & TAILWIND

Loading…

Installation

$npx kibo add scroll-velocity

Usage

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

Props Reference

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Child elements or content to render inside the component.
`baseVelocity`	`number`	velocity	Controls the base velocity for the component animation.
`scrollContainerRef`	`React.RefObject<HTMLElement>`	-	Optional RefObject to a scrollable container element.
`className`	`string`	''	Additional CSS classes for styling and layout.
`damping`	`number`	50	Controls the damping for the component animation.
`stiffness`	`number`	400	Controls the stiffness for the component animation.
`numCopies`	`number`	6	Controls the num copies for the component animation.
`velocityMapping`	`VelocityMapping`	{ input: [0, 1000], output: [0, 5] }	Controls the velocity mapping for the component animation.
`parallaxClassName`	`string`	-	Controls the parallax class name for the component animation.
`scrollerClassName`	`string`	-	Controls the scroller class name for the component animation.
`parallaxStyle`	`React.CSSProperties`	-	Controls the parallax style for the component animation.
`scrollerStyle`	`React.CSSProperties`	-	Controls the scroller style for the component animation.
`scrollContainerRef`	`React.RefObject<HTMLElement>`	-	Optional RefObject to a scrollable container element.
`texts`	`React.ReactNode[]`	[]	Controls the texts for the component animation.
`velocity`	`number`	100	Controls the velocity for the component animation.
`className`	`string`	''	Additional CSS classes for styling and layout.
`damping`	`number`	50	Controls the damping for the component animation.
`stiffness`	`number`	400	Controls the stiffness for the component animation.
`numCopies`	`number`	6	Controls the num copies for the component animation.
`velocityMapping`	`VelocityMapping`	{ input: [0, 1000], output: [0, 5] }	Controls the velocity mapping for the component animation.
`parallaxClassName`	`string`	-	Controls the parallax class name for the component animation.
`scrollerClassName`	`string`	-	Controls the scroller class name for the component animation.
`parallaxStyle`	`React.CSSProperties`	-	Controls the parallax style for the component animation.
`scrollerStyle`	`React.CSSProperties`	-	Controls the scroller style for the component animation.