# Brush transition

A wide brush paints the frame over in one stroke, back and forth from top to bottom. The paint then leaves from where the stroke began. It is a cover: it takes the whole frame and the next scene starts underneath it.

> Live preview: see the transition playing at https://bettertyped.github.io/react-wrapped/docs/transitions/brush/

## Usage

Every scene already has a transition: the video's seed picks one per scene, so two videos rarely cut the same way. To choose one yourself, name it for that scene in the config.

```tsx
import { DEFAULT_WRAPPED_CONFIG, type WrappedConfig } from "@react-wrapped/kit";

const config: WrappedConfig = {
  ...DEFAULT_WRAPPED_CONFIG,
  // The scene with the key "total" leaves with Brush.
  cuts: { total: "brush" },
};
```

## How it works

A cover is a few big shapes, three layers deep, in the palette's levels two, three and four. The layers follow each other by a beat, so the cover's edge is a band of colours and never one hard line. The next scene starts under the closed cover, so it clears onto a scene that is already playing.

Transitions are placed on the same GSAP timeline as the scenes. Seeking backwards through one undoes it exactly, which is what makes the timeline scrubbable and the video exportable frame by frame.

## Related

- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)
- [Doors transition](https://bettertyped.github.io/react-wrapped/docs/transitions/doors/)
- [Scan transition](https://bettertyped.github.io/react-wrapped/docs/transitions/scan/)
- [Lift transition](https://bettertyped.github.io/react-wrapped/docs/transitions/lift/)
- [Charts](https://bettertyped.github.io/react-wrapped/docs/charts/)

Source: https://bettertyped.github.io/react-wrapped/docs/transitions/brush/