react-scroll-motions

react-scroll-motions

A collection of high-performance React hooks for parallax scrolling, 3D tilt, magnetic hover, animated counters, and scroll-reveal effects. Lightweight and dependency-free.

Features

• useParallax -- Smooth scroll-based movement for creating depth and layered effects.
• useTilt -- 3D perspective tilt on hover for cards and interactive elements.
• useMagneticHover -- Elements that subtly follow the cursor for a premium interactive feel.
• useCountUp -- Animated number counters that trigger when elements enter the viewport.
• useScrollReveal -- Efficient entrance animations using IntersectionObserver.
• Performance Optimized -- Uses requestAnimationFrame and passive event listeners throughout.

Installation

npm install react-scroll-motions

Usage

Parallax Effect

Add data-parallax-speed to any element. The speed value controls how fast the element moves relative to the scroll (0.1 = slow, 0.5 = fast).

import { useParallax } from 'react-scroll-motions';

function HeroSection() {
  useParallax();

  return (
    <section>
      <div data-parallax-speed="0.1">
        <h1>Welcome</h1>
      </div>
      <div data-parallax-speed="0.3">
        <p>Background layer moves at a different speed</p>
      </div>
      <div data-parallax-speed="0.5">
        <img src="/stars.png" alt="Stars" />
      </div>
    </section>
  );
}

3D Tilt Effect

Add data-tilt to any card or interactive element for a perspective-based tilt on hover.

import { useTilt } from 'react-scroll-motions';

function ProjectCard({ title, description }) {
  useTilt();

  return (
    <div data-tilt className="card">
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

Magnetic Hover

Add data-magnetic to buttons or links. The element will subtly follow the cursor when hovered.

import { useMagneticHover } from 'react-scroll-motions';

function CallToAction() {
  useMagneticHover();

  return (
    <div>
      <button data-magnetic className="cta-button">
        Get Started
      </button>
      <a data-magnetic href="/docs" className="nav-link">
        Documentation
      </a>
    </div>
  );
}

Count Up Animation

Add data-count-target to number elements. Use data-count-suffix and data-count-prefix for formatting.

import { useCountUp } from 'react-scroll-motions';

function StatsSection() {
  useCountUp();

  return (
    <div className="stats">
      <div>
        <span data-count-target="150" data-count-suffix="+">0</span>
        <p>Projects Completed</p>
      </div>
      <div>
        <span data-count-target="1.6" data-count-suffix="M">0</span>
        <p>Downloads</p>
      </div>
      <div>
        <span data-count-target="99" data-count-suffix="%">0</span>
        <p>Uptime</p>
      </div>
    </div>
  );
}

Scroll Reveal

Add .reveal, .reveal-left, .reveal-right, or .reveal-scale to elements. Define .active styles in your CSS.

import { useScrollReveal } from 'react-scroll-motions';

function AboutSection() {
  useScrollReveal();

  return (
    <section>
      <h2 className="reveal">About Us</h2>
      <p className="reveal-left">We build high-quality software.</p>
      <p className="reveal-right">Our team spans 12 countries.</p>
      <div className="reveal-scale">
        <img src="/team.jpg" alt="Team" />
      </div>
    </section>
  );
}

/* Required CSS for scroll reveal */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: all 0.8s ease;
}
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right.active { opacity: 1; transform: translateX(0); }
.reveal-scale.active { opacity: 1; transform: scale(1); }

.reveal { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.9); }

Combining Multiple Hooks

import {
  useParallax,
  useTilt,
  useMagneticHover,
  useCountUp,
  useScrollReveal
} from 'react-scroll-motions';

function App() {
  useParallax();
  useTilt();
  useMagneticHover();
  useCountUp();
  useScrollReveal();

  return (
    <div>
      {/* All hooks are now active across the entire app */}
    </div>
  );
}

API Reference

Hook	Data Attribute	Description
useParallax()	data-parallax-speed="0.3"	Parallax scroll movement
useTilt()	data-tilt	3D perspective tilt on hover
useMagneticHover()	data-magnetic	Cursor-following hover effect
useCountUp()	data-count-target="100"	Animated number counter
useScrollReveal()	.reveal / .reveal-left / .reveal-right / .reveal-scale	Scroll entrance animations

Browser Support

All modern browsers (Chrome, Firefox, Safari, Edge). Requires IntersectionObserver and requestAnimationFrame.

License

MIT -- see LICENSE for details.