# Page Turn
URL: https://remocn.dev/docs/transitions/page-turn

The exiting scene swings up and away like a notebook page in stop-motion poses

- Install: `npx shadcn@latest add @remocn/page-turn`
- Vibe: paper
- Natural length: 128f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/page-turn
```

## Usage

`pageTurn` is a `TransitionPresentation` for `@remotion/transitions`. The
outgoing scene lifts and rotates away like a page being turned; the incoming
scene is simply already there, underneath.

```tsx
// src/Root.tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { pageTurn } from "@/components/remocn/page-turn";

export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={76}>
      <PageOne />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 24 })}
      presentation={pageTurn()}
    />
    <TransitionSeries.Sequence durationInFrames={76}>
      <PageTwo />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);
```

24 frames is the pairing this transition was built around — eight poses at the
kit's default tempo of three frames each.

### The exiting scene stays on top

This is the one transition in the catalog that inverts the usual stacking. In a
`TransitionSeries` the entering scene normally paints over the outgoing one;
here the outgoing wrapper takes `zIndex: 2`, because a page you are turning has
to pass in front of whatever it uncovers. The entering scene is rendered
completely untouched — no fade, no transform. The reveal *is* the entering
animation.

### Poses, not a sweep

Progress is eased, then snapped to `poses` discrete values, so the page moves in
hand-shot jumps rather than gliding. That happens inside the presentation, so it
survives whichever timing function you pass — `springTiming` will change how
long each pose is held, but it cannot smooth the motion back out.

Lower `poses` for a rougher, more obviously hand-made turn; raise it toward 16
and the page starts to look mechanical.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `angle` | `number` | `-7` | Rotation in degrees at full lift; negative swings the page left |
| `origin` | `string` | `"18% 100%"` | CSS transform-origin the page pivots around |
| `poses` | `number` | `8` | How many discrete stop-motion poses the turn is snapped to |

## Use when
- Act breaks in paper or scrapbook stop-motion videos — the current page physically leaves and the next scene is already living beneath it.
- You want the outgoing scene to pass IN FRONT of the incoming one. This is the only transition in the catalog that does that: the exiting wrapper takes `zIndex: 2`, inverting the TransitionSeries default.

## Don't use when
- You need a smooth cinematic cut between UI scenes — use `whip-pan` or `push-through`.
- You want a dissolve — use the shader dissolve family.
- The entering scene needs its own entrance animation: here the reveal IS the entrance, and the entering scene is rendered untouched.