DocsScroll Based Velocity

Scroll Based Velocity

Text that scrolls across the screen and speeds up based on the user's scroll velocity.

Installation

pnpm dlx shadcn@latest add @componentry/scroll-based-velocity

Dependencies: framer-motion

Usage

API Reference

PropTypeDefault
textstring

The text to display and scroll.

—
default_velocitynumber

The base speed of the scrolling.

5
classNamestring

Classes to style the text element.

—

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousText RepelNextAnnotated Text
Scroll to see the effect
Velocity ScrollVelocity ScrollVelocity ScrollVelocity ScrollVelocity ScrollVelocity ScrollVelocity ScrollVelocity Scroll
Velocity ScrollVelocity ScrollVelocity ScrollVelocity ScrollVelocity ScrollVelocity ScrollVelocity ScrollVelocity Scroll
import { ScrollBasedVelocity } from "@/components/ui/scroll-based-velocity";
 
<ScrollBasedVelocity
  text="Velocity Scroll"
  default_velocity={5}
  className="font-display text-center text-4xl font-bold tracking-[-0.02em] text-foreground drop-shadow-sm md:text-7xl md:leading-[5rem]"
/>