# brella-transition

> Generates the brella transition for OBS Studio.

Latest version **2.1.6** (published 2025-07-09) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install brella-transition
pnpm add brella-transition
yarn add brella-transition
bun add brella-transition
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.6 |
| Published | 2025-07-09 |
| First published | 2023-07-20 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 51.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | NorthWestWind |
| Maintainers | northwestwind |
| Keywords | obs, obs-studio, transition, generator, brella |

## Links

- npm: https://www.npmjs.com/package/brella-transition
- Repository: https://github.com/North-West-Wind/brella-transition
- Homepage: https://github.com/North-West-Wind/brella-transition#readme
- Issues: https://github.com/North-West-Wind/brella-transition/issues
- npm.io page: https://npm.io/package/brella-transition

## Recent versions

- 2.1.6 (latest) — 2025-07-09
- 2.1.5 — 2025-07-09
- 2.1.4 — 2025-07-09
- 2.1.3 — 2025-07-09
- 2.1.2 — 2025-07-09
- 2.1.1 — 2025-07-09
- 2.1.0 — 2025-07-09
- 2.0.1 — 2024-04-23
- 2.0.0 — 2024-04-23
- 1.0.1 — 2023-12-19
- 1.0.0 — 2023-07-20

## README

# Brella Transition
The coolest OBS Studio transition you will ever see. This repository contains the code that is used to generate the animation.

## Preview
![transition](https://raw.githubusercontent.com/North-West-Wind/brella-transition/main/preview.gif)

# Usage

## Requirements
- Node.js
- FFmpeg

## Installing to system
Run `npm i -g brella-transition` in the terminal.

## Generating the animation
Run `brella-transition` in the terminal.

You can also use additional options:
```
Options:
  -W, --width <number>        width of the canvas (default: "1920")
  -H, --height <number>       height of the canvas (default: "1080")
  -o, --output <string>       name of output file (default: "brella.webm")
  --brella <number>           maximum amount of brella (default: "30")
  --retries <number>          maximum retries before choosing to overlap, -1 to allow indefinite retries (default: "1000000")
  --fps <number>              framerate of the transition (default: "60")
  --attack <number>           frames of brella opening/closing (default: "15")
  --hold <number>             frames of brella staying opened (default: "30")
  --ribs <numbers>            possible number of ribs, separated by commas (default: "6,8")
  -h, --hue <numbers>         HUE angle range in degrees, separated by comma (default: "0,360")
  -s, --saturation <numbers>  saturation range in percentage, separated by comma (default: "80,100")
  -l, --lightness <numbers>   lightness range in percentage, separated by comma (default: "50,50")
  --help                      display help for command
```

Once generated, copy/move the WebM file to somewhere you can save permanently.

## Adding to OBS Studio
1. Launch OBS Studio.
2. Locate the "Scene Transitions" dock.
3. Click the "+" button and choose "Stinger".
4. Give it a name (I recommend calling it "Brellas").
5. Click "Browse" next to the "Video File" input field and choose your WebM file.
6. Change "Transition Point Type" to "Frame".
7. Set "Transition Point (frame)" to half of your WebM file's total frames.
8. Click "OK".
9. Change your transition from "Fade" (or whatever it is) to "Brellas" (or whatever you named it).
10. Profit!

# License
GPLv3

---
_Source: https://npm.io/package/brella-transition · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._