Real-World Production Examples

Next.js 15+ App Router Global Transitions

Production template configuring layout.tsx and template.tsx with <Mo> links and zero hydration layout shifts.

E-Commerce Product Card Unfold Transition

Smoothly expands a floating product grid item into a fullscreen product detail view using CardExpandPortal.

Editorial Magazine Page Peel & Sheen

Combines LiquidSheenText header with CurtainPeelTransition for high-fashion digital lookbooks.

Cinema Typography Scroll Dive Portal

Headline word acts as vector stencil mask that expands 60x as the user scrolls, plunging into next chapter.

1'use client';
2
3import React from 'react';
4import { Mo } from 'motion-organic/react';
5
6export default function Template({ children }: { children: React.ReactNode }) {
7  return (
8    <div className="min-h-screen transition-wrapper">
9      <header className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-8 py-4 backdrop-blur-md bg-white/75">
10        <Mo href="/" transition="organic-blob" sound="liquid" className="font-bold tracking-tight">
11          STUDIO.V
12        </Mo>
13
14        <nav className="flex items-center gap-6 text-sm">
15          <Mo href="/work" transition="curtain-peel" preset="silk" sound={true}>
16            Work (08)
17          </Mo>
18          <Mo href="/about" transition="liquid-tear" sound="liquid">
19            About
20          </Mo>
21          <Mo href="/contact" transition="aperture-iris" sound="shutter">
22            Contact
23          </Mo>
24        </nav>
25      </header>
26
27      <main className="pt-24">{children}</main>
28    </div>
29  );
30}