Page Turn Effect

PageTurnEffect mounts a Three.js renderer into its container div and animates a paper curl by deforming the vertices of a PlaneGeometry. When isOpen changes the right side of the plane folds toward the centre, simulating a page turning. A paper-texture.png is loaded as a material map if present at the public root.

The component fills its parent absolutely (w-full h-full absolute inset-0), so place it inside a position: relative container with explicit dimensions.

SSR note — PageTurnEffect is "use client" and initialises a WebGL context on mount. Wrap it in dynamic(() => import(...), { ssr: false }) for Next.js apps.

Installation

npx shadcn@latest add @adv/page-turn-effect

Usage

import { useState } from 'react';
import dynamic from 'next/dynamic';

const PageTurnEffect = dynamic(
  () => import('@/components/page-turn-effect'),
  { ssr: false }
);

export default function BookPage() {
  const [open, setOpen] = useState(false);

  return (
    <div className="relative w-80 h-96">
      <PageTurnEffect isOpen={open} onComplete={() => console.log('done')} />
      <button onClick={() => setOpen((v) => !v)}>Turn page</button>
    </div>
  );
}

Example

Props