A handy online tool that will let you easily show Baseline Status in your videos.

How It Works

Select the Feature ID you want to show, tweak the styling, and hit record. You'll get a short video to download, which you can easily import into your editing software.

The video background is dark red by default, as the browser logos have the least similarity with it, making it easier to set Chroma Key (Green Screen) to make the background transparent.

The widget is shown on the screen only for a few seconds, so use a freeze frame feature in your editing software to make it stay on the screen as long as you want.

The tool works best with Google Chrome, as it allows you to easily capture a pure screen without browser elements (as opposed to Safari and Firefox).

To use the tool, you'll need to enable screen recording in your browser after you hit Record, but also in your OS for the browser you're using (Screen & System Audio Recording on MacOS).

To be perfectly clear and transparent, all recordings are local, only available to you on your system—they are not stored nor sent anywhere.

Try It Out

1. Use the sidebar controls to customize the appearance and behavior of your component
2. Preview your changes in real-time in the main area
3. Use the recording bar to capture your screen and download the video
4. Press Escape or click to exit fullscreen preview or recording mode

Tech Stack

1. Framework: Next.js
2. Language: TypeScript
3. UI: Chakra UI
4. Video Processing: FFmpeg.wasm
5. Icons: react-icons, @tabler/icons
6. Testing: Vitest
7. Linting: Prettier, Stylelint, ESLint

Links

• Fork on GitHub
• Newsletter
• Buy me a Coffee