# Shared Axis Y
URL: https://remocn.dev/docs/typography/shared-axis-y

Per-word hard-cut staircase transition for sharp editorial phrase swaps

- Install: `npx shadcn@latest add @remocn/shared-axis-y`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shared-axis-y
```

## Usage

```tsx
// src/Root.tsx
import { Composition, Sequence } from "remotion";
import { SharedAxisY } from "@/components/remocn/shared-axis-y";

const SharedAxisYScene = () => (
  <>
    <Sequence durationInFrames={40}>
      <SharedAxisY fromText="Layered navigation." toText="Hierarchy made clear." />
    </Sequence>
    <Sequence from={40} durationInFrames={40}>
      <SharedAxisY fromText="Hierarchy made clear." toText="Depth with restraint." />
    </Sequence>
  </>
);

export const RemotionRoot = () => (
  <Composition
    id="SharedAxisY"
    component={SharedAxisYScene}
    durationInFrames={80}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Each word in the outgoing phrase snaps off in a hard cut, then the incoming phrase's words snap on in a staircase pattern—no fade or motion, just a sharp editorial swap. Chaining two instances in back-to-back `Sequence`s walks through a full phrase chain—the second transition reuses the first's `toText` as its `fromText`, so the text flows A → B → C.

### Chained example

This is the two-`Sequence` chain above rendered on an 80-frame timeline:

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { SharedAxisY } from "@/components/remocn/shared-axis-y";
import { Backdrop } from "@/components/remocn/backdrop";

const SharedAxisYScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <SharedAxisY
      fromText="Layered navigation."
      toText="Hierarchy made clear."
    />
  </Backdrop>
);

export const RemotionRoot = () => (
  <Composition
    id="SharedAxisY"
    component={SharedAxisYScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `fromText` (required) | `string` | — | The outgoing phrase, shown first then hard-cuts off word by word. |
| `toText` (required) | `string` | — | The incoming phrase that snaps in word by word. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- Swapping two text values in a slide-deck style transition (A → B → C chained in `<Sequence>`).
- You want a crisp, editorial replacement without blur or scale — vertical word-by-word staircase reads as confident.
- The outgoing and incoming phrases are thematically related (before/after, old/new, step N / step N+1).

## Don't use when
- You only need to bring text in for the first time with no outgoing content — use `short-slide-down` or `staggered-fade-up` for a clean entrance instead.
- You want a depth or focus-shift feel between two contexts — use `shared-axis-z` which scales rather than slides for that spatial metaphor.
- The transition should feel playful or bouncy — the hard-cut staircase is intentionally sharp; use `spring-scale-in` for a springy swap.