# Shared Axis Z
URL: https://remocn.dev/docs/typography/shared-axis-z

Scale-based shared-axis transition for focus shifts and context depth

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

## Installation

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

## Usage

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

const SharedAxisZScene = () => (
  <>
    <Sequence durationInFrames={40}>
      <SharedAxisZ fromText="Zooming between states." toText="Elevate and settle." />
    </Sequence>
    <Sequence from={40} durationInFrames={40}>
      <SharedAxisZ fromText="Elevate and settle." toText="Scale with purpose." />
    </Sequence>
  </>
);

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

A Material shared-axis (Z) depth swap — the old phrase scales up and blurs away as it fades, while the new phrase rises from a smaller scale and sharpens into focus. Chaining two in Sequence 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 { SharedAxisZ } from "@/components/remocn/shared-axis-z";
import { Backdrop } from "@/components/remocn/backdrop";

const SharedAxisZScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <SharedAxisZ
      fromText="Zooming between states."
      toText="Elevate and settle."
    />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `fromText` (required) | `string` | — | The outgoing phrase, scales up and fades away. |
| `toText` (required) | `string` | — | The incoming phrase, rises from a smaller scale into focus. |
| `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
- Conveying a zoom-in narrative: moving from a broad context to a focused point.
- Transitioning between two text values where the second is a more specific or deeper layer of the first.
- Chaining multiple topic shifts in a `<Sequence>` where each swap should feel like a camera push forward.

## Don't use when
- The swap is a lateral topic change with no depth relationship — use `shared-axis-y` for a horizontal-edit-style cut instead.
- You only need to bring text in for the first time with no outgoing content — use `scale-down-fade` or `soft-blur-in` for a single-text entrance.
- The scene already has a lot of scale motion and you need variety — mix in `shared-axis-y` to alternate the spatial grammar.