Docs·Scroll 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

Usage

API Reference

PropertyTypeDefault
text

The text to display and scroll.

string—
default_velocity

The base speed of the scrolling.

number5
className

Classes to style the text element.

string—

View source

Click the icon in the preview panel to browse source for each variant.

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
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]"
/>