Docsscroll physics

📜 <ScrollPhysics />

The ScrollPhysics component translates scrolling velocity into global physical forces, making UI elements lean and tilt as you navigate.

🛠️ Usage

import { ScrollPhysics, PhysicsProvider } from 'vibedev-motion';

function App() {
  return (
    <PhysicsProvider>
      {/* Global scroll listener */}
      <ScrollPhysics intensity={0.5} damping={0.8} />
      
      <main>
        {/* Your content */}
      </main>
    </PhysicsProvider>
  );
}

🧠 Features

  • Velocity Tracking: Uses useVelocity on the scroll position to measure page momentum.
  • Impulse Sync: Iterates through all dynamic bodies in the RAPIER.World and applies an impulse proportional to scroll speed.
  • Natural Inertia: Elements "swing" and "tilt" based on scroll direction, then settle when scrolling stops.

🌟 Detailed Use Case

"Liquid" Page Experiences: As the user scrolls fast down a page, the buttons and cards "tilt" towards the direction of travel or "shake" in response to the inertia of the scroll, making the entire site feel like one cohesive physical object instead of static blocks.

© 2026 Synthron AI Technologies. All rights reserved.

Developed & Maintained by Synthron