Contents
2. The timeline
3. Segment settings
4. Audio reactivity
5. Lanes & stacking
6. Masks
7. Scope
8. Body effects
9. Click to select (SAM 2)
10. Export
11. Server rendering
12. Keyboard
13. Adding your own effects
14. Troubleshooting
1. Quick start
- Double-click
start.bat(ornpm run dev) and openhttp://localhost:5180in Chrome or Edge. - Drop a video on the preview, or click open video. MP4, MOV, MKV and WebM work.
- Drag an effect from the library on the left onto a lane. Click it to tune it.
- Press Space to preview, then EXPORT MP4.
Everything runs on your own graphics card. Nothing is uploaded anywhere unless you pick the server render, which runs on your own machine too.
2. The timeline
Along the top: the time ruler, thumbnails, and the soundtrack waveform with faint beat ticks (bright ticks are bar downbeats). Click any of them to jump there. Drag the orange grip on the playhead to scrub.
- Place: drag a library card onto a lane, or double-click a card to drop it at the playhead.
- Move: drag the segment. Drag it up or down to change lane.
- Trim: drag its left or right edge. Edges snap to beats, the playhead and neighbouring segments.
- Zoom: the zoom slider, or Ctrl + mouse wheel over the timeline. fit shows the whole video.
- + lane adds a lane. An empty lane can be removed with its ✕.
Your timeline autosaves per video in this browser. For real projects use projects in the header: save (ctrl+s), save as (ctrl+shift+s), open and delete named projects. They live in Documents\Sizzle FX\Projects\<name>\project.sfx.json (plain JSON you can edit by hand) together with their baked masks, and the source video is kept once in Documents\Sizzle FX\Media, so opening a project brings back the video, the masks and every effect. Needs the local server (start.bat). export .json / import .json in the same dialog still work without it.
3. Segment settings
Click a segment to open its panel on the right. The preview updates live as you move sliders. Double-click a slider to reset it.
| effect | The effect's own controls (strength, colours, counts, angles...). Hover a row for a description. |
|---|---|
| mix | How much of the effect shows, 0 to 1. |
| fade in / out | Seconds to ramp the effect in and out at the segment's edges (drawn as dark ramps on the segment). |
| audio reactivity | Scales everything the effect hears. 0 ignores the music, 3 is very twitchy. |
| audio drive | What the effect follows: overall level, bass, mid, highs, or the kick / snare / hi-hat hits. |
| scope, mask | Whole frame, subject only or background only (needs a mask, see below). |
| seed | Changes the random pattern of glitchy effects without changing their look. |
duplicate copies the segment (with its settings) right after itself. remove deletes it (or press Delete).
4. Audio reactivity
When you open a video its soundtrack is analysed once: five frequency bands, kick, snare and hi-hat hits, the beat grid and bars. Preview and export use exactly the same numbers, so what you see is what you export.
5. Lanes & stacking
The bottom lane renders first. Every lane above works on the result of the lanes below it, so put colour grades and film looks on a top lane to tie everything together, and geometry (zoom, kaleidoscope, glitches) lower down.
6. Masks
A mask marks the subject in every frame. Open ◐ masks under the preview and pick one of three ways to make one:
| auto person | A matting model (Robust Video Matting) finds people automatically. Best for people, on any background. About 25 frames a second on a GTX 1080 Ti. |
|---|---|
| green screen | Classic chroma key, nearly instant. Only for green or blue screen footage. |
| click to select | SAM 2: click any object. See section 9. |
A mask is made ("baked") once, then saved in this browser with the video, so it is there next time you open the same file. view tints the subject so you can check it. You can keep several masks and pick which one each segment uses.
7. Scope
With a mask, any of the 129 effects can be limited without code: open the segment, set scope to subject only or background only. mask feather softens the edge, mask choke grows or shrinks it.
Examples: RGB split on the person only; a kaleidoscope, blur or thermal look on the room only.
8. Body effects
The Body category is built around the mask (◐ badge in the library):
| Rotational Clone | Rotated, offset ghost copies of the subject behind them, pushed by the music. |
|---|---|
| RGB Split Clone | Red, green and blue copies of the subject pulled apart. |
| Silhouette Echo | Coloured silhouettes of where the subject was over the last frames. |
| Subject Afterimage | Fading copies of only the subject trailing behind them. |
| Pulse Clone | Scaled-up echoes bursting out from the subject on the beat. |
| Neon Outline / Subject Aura | A neon line or a soft halo around the silhouette. |
| Background Swap / Spotlight | Replace, blur or drain the background so the subject pops. |
Thermal Camera and Lens Flare also use the mask when there is one (hot subject; flare that follows the head).
9. Click to select (SAM 2)
- Move the playhead to a frame where the object is clear, open ◐ masks, choose + click to select.
- Click the object on the preview. Right-click anything that should be left out.
- Pick whole, part or detail: the model offers three readings of each click (for example: the whole person, just the head, just the face).
- track it follows the selection through the video (a few frames a second).
10. Export
Pick a preset next to EXPORT MP4: X / YouTube (balanced) or Max quality (bigger file). The export renders every frame exactly, encodes H.264 High profile with BT.709 colour and fast start, and keeps your original audio untouched when it is AAC (anything else is converted to AAC, which X, YouTube and Instagram all accept). Then click DOWNLOAD MP4.
The timeline is locked while rendering. cancel stops it.
11. Server rendering
The render menu in the header switches between browser gpu and server gpu (python). The server is a small Python program that renders the same effect files through ModernGL and encodes with ffmpeg (NVENC when available, otherwise x264). It shows the same picture as the browser.
- Install Python 3.11 and ffmpeg (on the PATH).
- Run
server\start.bat. The first run creates its own environment and installs what it needs. - Reload the editor: the server option appears in the render menu.
Use it for x264 quality, very long videos, or a browser without WebCodecs. On a modern GPU the browser path is usually faster.
12. Keyboard
| Space | play / pause |
| ← → | step one frame (Shift: one second) |
| Delete | remove the selected segment |
| Ctrl+D | duplicate the selected segment |
| Ctrl+wheel | zoom the timeline |
| Esc | close the segment panel |
13. Adding your own effects
An effect is a folder with an effect.json (name, category, sliders) and a Shadertoy-style main.glsl. Drop it anywhere under public/effects/ and it appears in the library while the editor is running. The full guide is docs/EFFECTS.md in the project.
14. Troubleshooting
| Header says "h.264 high: missing" | Use a current Chrome or Edge, or switch the render menu to the server. |
|---|---|
| Mask buttons fail | The models live in public/models: run npm run fetch-models once. Auto person and SAM 2 need WebGPU (Chrome/Edge). |
| Server option is greyed out | Start server\start.bat, then reload the page. |
| A history effect (echo, trails) looks empty after a jump | Effects that use earlier frames need a moment of playback to fill up. Export always renders from the start, so the file is correct. |
Sizzle FX by @OneHung