║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Scroll Based Velocity date: 2024-05-22 description: Scrolling text whose speed changes based on scroll speed author: whyismynamerudy published: true

<ComponentPreview name="scroll-based-velocity-demo" /> <ComponentPreview name="scroll-based-velocity-images-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/scroll-based-velocity

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install motion

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="scroll-based-velocity" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Usage

import {
  ScrollVelocityContainer,
  ScrollVelocityRow,
} from "@/components/ui/scroll-based-velocity"

<ScrollVelocityContainer className="text-4xl font-bold md:text-7xl">
  <ScrollVelocityRow baseVelocity={20} direction={1}>
    Velocity Scroll
  </ScrollVelocityRow>
  <ScrollVelocityRow baseVelocity={20} direction={-1}>
    Velocity Scroll
  </ScrollVelocityRow>
</ScrollVelocityContainer>

Props

ScrollVelocityContainer

| Prop | Type | Default | Description | | ----------- | ----------- | ------- | --------------------------------------------- | | className | string | - | The class name to be applied to the component | | children | ReactNode | - | Content to be animated |

ScrollVelocityRow

| Prop | Type | Default | Description | | -------------- | ----------- | ------- | -------------------------------------------------- | | className | string | - | The class name to be applied to the row container | | children | ReactNode | - | Content to be duplicated and scrolled | | baseVelocity | number | 5 | Base scroll velocity percentage of content width | | direction | 1 \| -1 | 1 | Scroll direction (1 = left-to-right, -1 = reverse) |

Performance

• Pauses updates when offscreen and when the tab is hidden.
• Respects user preference for reduced motion.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║