# DatamoshTransition

> Page-transition overlay that looks like a corrupted video decode: a fixed grid of columns, narrow on the left and wide on the right, fills with flat blocks of saturated colour that fall, snap open through the middle of the frame and squeeze shut again; cover() drops the columns over the page right to left and reveal() lets them fall away, both as promises for any router's navigation hook.

- Package: `fancy-ui-react` (React 18/19 + Tailwind CSS v4)
- Category: Effects
- Tags: page transition, route, navigation, overlay, canvas, datamosh, glitch, columns
- Types: `DatamoshTransitionProps`, `DatamoshTransitionPhase`, `DatamoshTransitionHandle`, `DatamoshEffect`, `DatamoshSweep`, `DatamoshPaletteName`
- Docs: https://fancy-ui.rama.app/docs/components/datamosh-transition
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/react/src/components/datamosh-transition

## Import

```tsx
import { DatamoshTransition } from 'fancy-ui-react';
```

Setup (once per project): `npm install fancy-ui-react`, then put these lines in your main CSS file (the stylesheet import goes right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-react/tailwind.css";
```

and import the component styles once in the app entry: `import "fancy-ui-react/styles.css";`. Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in React; when one differs from the Svelte name, the Svelte name follows in parentheses. `class` becomes `className`, a callback takes the name the React port declares (`onclick` becomes `onClick`), snippets become `ReactNode` props (render functions when they take arguments) and the default snippet is `children`. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/react#divergences-from-the-svelte-api

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors` | `"broadcast" \| "sunset" \| "thermal" \| "mono" \| "acid" \| string[]` | `"broadcast"` | Palette preset or colour list, hex or rgb(); the lightest and darkest colours recur most often |
| `variant` | `"curtain" \| "rise" \| "split" \| "interlace"` | `"curtain"` | Shape of the cover: drop from the top, climb from the bottom, open from the centre line, or alternate curtain and rise per column |
| `sweep` | `"right" \| "left" \| "center" \| "edges" \| "random"` | `"right"` | Order the columns move in: from the right, from the left, out from the middle, in from both sides, or a seeded shuffle |
| `source` | `string \| HTMLImageElement \| HTMLCanvasElement` | — | Picture to decode: tiles take their colours from it, auto-levelled and saturated, instead of the palette; URLs must be same-origin or CORS-enabled |
| `seed` | `number` | `1` | Seed for the colour order; same seed, same strip |
| `columns` | `number` | `11` | Number of columns |
| `power` | `number` | `1.65` | Column edge exponent: 1 is a uniform grid, higher widens the columns to the right |
| `tiles` | `number` | `15` | Tiles per column stack, forced odd so one tile takes the centre |
| `coverDuration` | `number` | `380` | Time for one column to cover, in ms |
| `revealDuration` | `number` | `480` | Time for one column to clear, in ms |
| `stagger` | `number` | `28` | Delay between neighbouring columns in ms, rightmost first |
| `speed` | `number` | `1` | Speed of the falling tiles |
| `contained` | `boolean` | `false` | Fill the positioned parent instead of the viewport |
| `zIndex` | `number` | `9999` | Stacking order of the overlay |
| `phase` | `"idle" \| "covering" \| "covered" \| "revealing"` | `"idle"` | Current phase; bindable, read-only |
| `oncovered` | `() => void` | — | Called once the page is fully covered |
| `onrevealed` | `() => void` | — | Called once the page is fully revealed |
| `ref` | `HTMLDivElement \| null` | `null` | Bindable overlay element |
| `className` (Svelte `class`) | `string` | — | Additional classes on the overlay |

## Example

No React example is published for this component yet: start from the import above and the props table. The full examples are Svelte-only, on https://fancy-ui.rama.app/docs/components/datamosh-transition.md.