Documentation/React Components & Hooks

React Components & Hooks API

motion-organic/react provides declarative React components and optimized hooks engineered for React 18, React 19, and Next.js App Router.

<Mo />Component

A drop-in link transition component that triggers cinema transitions at click origin coordinates.

tsx
1import { Mo } from 'motion-organic/react';
2
3<Mo
4  href="/destination"
5  transition="curtain-peel"     // Any of 25 transitions
6  preset="silk"                 // 'silk' | 'liquid' | 'snappy' | 'cinematic' | 'bouncy'
7  sound="fabric"                // 'liquid' | 'whoosh' | 'fabric' | 'portal' | 'shutter'
8  gesture="horizontal"          // Optional swipe gesture listener
9  duration={800}                // Custom duration in ms
10  className="custom-btn"
11>
12  Explore Destination
13</Mo>
<MoText />Component

Universal component wrapper for all 14 cinema-grade typography effects.

tsx
1import { MoText } from 'motion-organic/react';
2
3<MoText
4  effect="liquid-sheen"
5  colors={['#b8db1e', '#edff82', '#ffffff']}
6  speed={1.2}
7  interactive={true}
8>
9  ORGANIC VECTOR
10</MoText>
<MoActionBadge />Component

Interactive badge with 1-click clipboard copy, audio haptic feedback, and confetti burst.

tsx
1import { MoActionBadge } from 'motion-organic/react';
2
3<MoActionBadge
4  copyText="npm install motion-organic"
5  successText="Copied to Clipboard!"
6  sound={true}
7  confetti={true}
8  magnetic={true}
9>
10  npm install motion-organic
11</MoActionBadge>