A motion & typography framework for the modern web

Make the web
feel alive.

A cinema-grade toolkit for organic page transitions and tactile typography. Built for designers and developers who care about the in-between. Zero dependencies, pure harmonic spring momentum & 120 FPS optics.

Get Started (Docs) Open Studio Playground
14 Typography Effects25 Page TransitionsProduction TemplatesMIT Licensed

01 / Cinema-Grade Typography

Award-winning text. In 2 lines.

Cinema-grade typography effects engineered for pure performance. Zero layout shift, fully selectable, responsive text with harmonic spring physics and live parameter controls.

View Typography API Docs
01 · Fluid & Iridescent
Interactive Cinema-Grade Typography Suite
Interactive Hover & Physics Active

MOTION ORGANIC

Multi-tone iridescent liquid gradient flowing smoothly under a specular glass sheen with neon contour definition and spring parallax.

INDEX #01 / 14
Live Parameters
Outline Color
#f3f7f4
Outline Width1
Outline Offset (px)3
Flow Speed (s)4.5
<MoText as="h1" effect="liquid-sheen" outlineColor="#f3f7f4" outlineWidth={1} offset={3} speed={4.5}>
  MOTION ORGANIC
</MoText>

02 / The transition library

Choose your in-between.

Every transition is composable, interruptible, and designed to make a moment matter across all 25 signature transitions.

View Transitions API Docs
Transitions /OrganicBlobPortal#01 · Harmonic SVG
Scene 01 · Liquid Studio
Drag to Scrub

Living Harmonic Droplet

Fourier wave modulation with fluid aperture dynamics

INDEX: #01 / 25
95k / 22d
Scene 02 · Bio Garden
OCCLUDED DESTINATION

Liquid Portal Enveloped

Full-bleed harmonic contour locked at maximum occlusion

SWAP COMPLETE · READY TO REPLAYINTERRUPTIBLE: TRUE

Living harmonic liquid droplet window expanding from center with dynamic Fourier surface tension waves.

Physics Preset
import { Mo } from 'motion-organic/react'

<Mo
transition="organic-blob"
preset="default"
sound="liquid"
gesture="horizontal"
onTransition=={() => router.push('/next')}
>
<button className="cta-btn">Trigger OrganicBlobPortal</button>
</Mo>
Scrub (0%)t = 0.000

03 / Start building

One line to
get moving.

Install the package, import a transition or text effect, and make your next route feel like a place—not a page.

App.tsx
1 import { MoText, Mo, MoActionBadge } from 'motion-organic/react'
2
3 export default function App() {
4   return (
5     <div>
6       <MoText effect="liquid-sheen">MOTION ORGANIC</MoText>
7       <Mo transition="curtain-peel" href="/about">Explore</Mo>
8     </div>
9   )
10 }
npm install motion-organic

04 / The good stuff

Made for the details.

Zero Dependencies

Tree-shakable ESM modules under 18kb gzip with zero external runtime dependencies.

React & Vanilla Primitives

Simple React hooks and zero-dependency classes that slot directly into Next.js, Vite, or any modern stack.

Feels, not flashes

Harmonic spring physics, Fourier liquid splines, and vector SVG clip paths make every transition feel intentionally alive.