Scroll Based Velocity

Scroll-based text animation that moves at a speed influenced by how fast the user scrolls. It creates a dynamic effect as the text shifts horizontally. Use it to add visual interest to sections with scrolling content.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/scroll-based-velocity

npx layro-cli add @magicuidesign/scroll-based-velocity

npx layro-cli add @magicuidesign/scroll-based-velocity

bunx layro-cli add @magicuidesign/scroll-based-velocity

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import React, { useContext, useEffect, useRef, useState } from "react"
import {
  motion,
  useAnimationFrame,
  useMotionValue,
  useScroll,
  useSpring,
  useTransform,
  useVelocity,
} from "motion/react"
import type { MotionValue } from "motion/react"