Documentation/Installation & Frameworks

Installation & Framework Setup

Learn how to install and configure motion-organic across all modern frontend architectures.

bash
1npm install motion-organic

Framework Integration Guides

In Next.js App Router, page transitions work seamlessly with client-side navigation:

components/Header.tsx
1'use client';
2
3import { Mo } from 'motion-organic/react';
4
5export default function Header() {
6  return (
7    <header className="flex justify-between items-center py-6">
8      <Mo href="/" transition="organic-blob" sound="liquid">
9        Studio Home
10      </Mo>
11
12      <nav className="flex gap-4">
13        <Mo href="/work" transition="curtain-peel" preset="silk" sound={true}>
14          Selected Work
15        </Mo>
16        <Mo href="/contact" transition="aperture-iris" sound="shutter">
17          Contact
18        </Mo>
19      </nav>
20    </header>
21  );
22}