motion-organic

motion-organic is an Awwwards-grade, physics-driven organic scroll & page transitions framework for React (18 & 19), Next.js (App & Pages Router), Vite, and Vanilla JavaScript.

25 Page Transitions

Harmonic liquid blobs, stencil masks, 3D card unfolds, razor cuts, and procedural synapsing.

14 Typography Effects

Liquid sheen, variable physics oscillations, glass refraction, and character morphing.

Zero Dependencies

Lightweight ESM under 18kb gzip with built-in Web Audio synthesis and spring solver.

60-Second Quick Start

Install the package using your favorite package manager:

bash

1# npm
2npm install motion-organic
3
4# pnpm
5pnpm add motion-organic
6
7# yarn
8yarn add motion-organic
9
10# bun
11bun add motion-organic

1. Declarative React Transition Link

Use the <Mo> component anywhere in your React or Next.js app to seamlessly trigger cinema-grade page transitions upon navigation:

components/Header.tsx

1import { Mo } from 'motion-organic/react';
2
3export function Navigation() {
4  return (
5    <nav className="flex gap-6">
6      <Mo
7        href="/about"
8        transition="curtain-peel"
9        preset="silk"
10        sound={true}
11        className="nav-link"
12      >
13        About Studio
14      </Mo>
15
16      <Mo
17        href="/projects"
18        transition="text-portal"
19        word="DISCOVER"
20        sound="whoosh"
21        className="nav-link"
22      >
23        Projects
24      </Mo>
25    </nav>
26  );
27}

2. Cinema-Grade Interactive Typography

Render high-performance text effects with 2 lines of code using <MoText>:

components/Hero.tsx

1import { MoText } from 'motion-organic/react';
2
3export function Hero() {
4  return (
5    <h1>
6      <MoText
7        effect="liquid-sheen"
8        colors={['#b8db1e', '#edff82', '#ffffff']}
9        speed={1.2}
10      >
11        MOLTEN LIGHT
12      </MoText>
13    </h1>
14  );
15}

3. Vanilla JavaScript Execution

All transitions and text effects can also be instantiated directly via zero-dependency ESM classes:

src/main.js

1import { CurtainPeelTransition, LiquidSheenText } from 'motion-organic';
2
3// Initialize typography
4new LiquidSheenText(document.getElementById('headline'));
5
6// Trigger page transition on button click
7const peel = new CurtainPeelTransition({
8  currentPageEl: document.getElementById('scene-1'),
9  nextPageEl: document.getElementById('scene-2'),
10  sound: 'fabric',
11});
12
13document.getElementById('cta-btn').addEventListener('click', async (event) => {
14  await peel.trigger(event, () => {
15    // Swap content or load route at maximum occlusion
16    renderNextPage();
17  });
18});

Ready to install?

Check out the complete framework installation guide for Next.js, Vite, and Astro.

Installation Guide