motioncss-ui

Modern React motion and CSS effects.

Installation

npm install motioncss-ui

Magnetic

A lightweight magnetic hover effect for React elements.

Usage

import { Magnetic } from "motioncss-ui";

function App() {
  return (
    <Magnetic strength={0.4} speed={0.2} scale={1.05}>
      <button>Get Started</button>
    </Magnetic>
  );
}

Props

| Prop | Type | Default | Description | | ----------- | ------ | ------: | -------------------------- | | strength | number | 0.3 | Magnetic movement strength | | speed | number | 0.25 | Animation transition speed | | scale | number | 1 | Hover scale | | className | string | "" | Custom CSS class |

TiltCard

A 3D tilt hover effect with optional glare highlight for cards and elements.

Usage

import { TiltCard } from "motioncss-ui";

function App() {
  return (
    <TiltCard tilt={15} scale={1.05} glare={true}>
      <div className="card">Hover me for 3D effect</div>
    </TiltCard>
  );
}

Props

| Prop | Type | Default | Description | | ------------- | ------- | ------: | ----------------------- | | tilt | number | 15 | Max rotation in degrees | | scale | number | 1.03 | Scale on hover | | glare | boolean | true | Show a glare highlight | | perspective | number | 1000 | Perspective in px | | className | string | "" | Custom CSS class |

ScrollReveal

Reveals elements with animations when they scroll into view.

Usage

import { ScrollReveal } from "motioncss-ui";

function App() {
  return (
    <ScrollReveal animation="fade-up" duration={800} delay={100} distance={40}>
      <h2>Reveals on Scroll</h2>
    </ScrollReveal>
  );
}

Props

| Prop | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------ | ----------: | -------------------------------------------------- | | animation | "fade" \| "fade-up" \| "fade-down" \| "fade-left" \| "fade-right" \| "zoom" | "fade-up" | Animation type | | duration | number | 700 | Duration in ms | | delay | number | 0 | Delay in ms | | distance | number | 32 | Distance in px for directional animations | | threshold | number | 0.2 | Visibility ratio that triggers the animation (0-1) | | once | boolean | true | Only animate once | | className | string | "" | Custom CSS class |

Spotlight

A highly customizable spotlight hover effect that follows the mouse cursor.

Usage

import { Spotlight } from "motioncss-ui";

function App() {
  return (
    <Spotlight size={400} intensity={0.9} color="#6366f1" mode="glow">
      <div className="card">Move your mouse</div>
    </Spotlight>
  );
}

Props

| Prop | Type | Default | Description | | ----------- | ---------------------------------------------------- | ----------: | ------------------------------- | | size | number | 320 | Spotlight diameter in px | | intensity | number | 0.85 | Brightness of the lit area, 0-1 | | color | string | "#ffffff" | Spotlight color | | blur | number | 60 | Blur/softness in px | | mode | "radial" \| "glow" \| "soft" \| "sharp" \| "neon" | "radial" | Visual mode preset | | enabled | boolean | true | Whether spotlight is active | | className | string | "" | Custom CSS class |

RevealText

Reveals text word-by-word with a staggered slide-up animation triggered on scroll.

Usage

import { RevealText } from "motioncss-ui";

function App() {
  return (
    <RevealText as="h1" stagger={80} duration={700} delay={100}>
      Words slide in one by one
    </RevealText>
  );
}

Props

| Prop | Type | Default | Description | | ----------- | --------------------------- | ------: | ----------------------------------------- | | stagger | number | 70 | Delay between words in ms | | duration | number | 700 | Animation duration per word in ms | | delay | number | 0 | Initial delay before animation starts, ms | | once | boolean | true | Only animate the first time in viewport | | as | keyof JSX.IntrinsicElements | "div" | HTML element to render as | | className | string | "" | Custom CSS class |

GradientFlow

A continuously animated shifting gradient background. Can wrap children or be used standalone.

Usage

import { GradientFlow } from "motioncss-ui";

function App() {
  return (
    <GradientFlow
      colors={["#6366f1", "#ec4899", "#f59e0b", "#06b6d4"]}
      angle={120}
      duration={12}
      style={{ padding: "60px", borderRadius: "16px" }}
    >
      <h2>Gradient content</h2>
    </GradientFlow>
  );
}

Note: Add the .mcss-gradient-flow class to your global CSS to enable the shifting animation:

.mcss-gradient-flow {
  background-size: 300% 300%;
  animation: mcss-gradient-shift linear infinite;
}
@keyframes mcss-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Props

| Prop | Type | Default | Description | | ----------- | -------- | ------------------------------------------: | -------------------------- | | colors | string[] | ["#6366f1","#ec4899","#f59e0b","#06b6d4"] | Gradient color stops | | angle | number | 120 | Gradient angle in degrees | | duration | number | 12 | Seconds for one full cycle | | className | string | "" | Custom CSS class |

EdgeWave / WaveReveal

Two components for cinematic wave transitions.

• EdgeWave - A full-screen wave that sweeps across the viewport and exits. Perfect for page route transitions.
• WaveReveal - A cover overlay that sweeps away on mount to reveal content underneath.

Usage

import { EdgeWave, WaveReveal } from "motioncss-ui";

// Full-screen page transition wave
function PageTransition() {
  return (
    <EdgeWave
      origin="left"
      duration={900}
      color="#111111"
      curve={8}
      onComplete={() => console.log("Wave done")}
    />
  );
}

// Reveal content on mount
function HeroSection() {
  return (
    <WaveReveal origin="left" duration={900} color="#0a0a0a">
      <h1>Revealed!</h1>
    </WaveReveal>
  );
}

EdgeWave Props

| Prop | Type | Default | Description | | ------------ | ----------------------------------------- | ----------: | ------------------------------------- | | origin | "left" \| "right" \| "top" \| "bottom" | "left" | Direction the wave travels | | duration | number | 900 | Total animation duration in ms | | color | string | "#111111" | Wave fill color | | curve | number | 8 | Leading edge curve depth (0-100) | | blur | number | 0 | Backdrop blur behind the wave, in px | | onComplete | () => void | | Called once the wave exits the screen |

WaveReveal Props

| Prop | Type | Default | Description | | ---------- | ----------------------------------------- | ----------: | ------------------------------ | | origin | "left" \| "right" \| "top" \| "bottom" | "left" | Direction the cover wave exits | | duration | number | 900 | Duration in ms | | color | string | "#111111" | Overlay fill color | | curve | number | 8 | Curve depth | | blur | number | 0 | Backdrop blur in px |

Scrollytelling

A scroll-progress context provider. Provides a progress value (0-1) to child components via the useScrollytelling() hook, letting you drive any animation based on scroll position.

Usage

import { Scrollytelling, useScrollytelling } from "motioncss-ui";

function AnimatedPanel() {
  const { progress } = useScrollytelling();
  return (
    <div
      style={{
        opacity: progress,
        transform: `scale(${0.8 + progress * 0.2})`,
      }}
    >
      I animate on scroll
    </div>
  );
}

function App() {
  return (
    <Scrollytelling height="400vh">
      <AnimatedPanel />
    </Scrollytelling>
  );
}

Props

| Prop | Type | Default | Description | | ----------- | ---------------- | --------: | ----------------------------------------------- | | height | string | number | "400vh" | Total scrollable height of the sticky container | | className | string | "" | Custom CSS class |

Hook

const { progress } = useScrollytelling();
// progress: number � 0 at the top, 1 at the bottom

License

MIT