25 Signature Page Transitions

1import { Mo } from 'motion-organic/react';
2
3export function Navigation() {
4  return (
5    <Mo
6      href="/portfolio"
7      transition="curtain-peel"
8      preset="silk"
9      sound="fabric"
10      duration={850}
11    >
12      View Selected Work
13    </Mo>
14  );
15}

1import { useRouter } from 'next/navigation';
2import { usePageTransition } from 'motion-organic/react';
3
4export function CheckoutButton() {
5  const router = useRouter();
6  const { trigger, isAnimating } = usePageTransition('aperture-iris', {
7    sound: 'shutter',
8    preset: 'snappy',
9    blades: 9,
10  });
11
12  const handleCheckout = async (e: React.MouseEvent) => {
13    await trigger(e, () => {
14      router.push('/order-confirmation');
15    });
16  };
17
18  return (
19    <button onClick={handleCheckout} disabled={isAnimating}>
20      {isAnimating ? 'Processing...' : 'Complete Purchase'}
21    </button>
22  );
23}