THE EDITOR CANVAS-BASED COMPOSITION
If you've used Figma, you're already most of the way there.
The overlay editor uses a familiar canvas model: layers, groups, alignment tools, asset import, and a properties panel. You position elements visually, not by editing JSON or wrestling with CSS. The difference from Figma is that what you build here is live — it renders in a browser, responds to real-time data, and updates on stream without a re-export.
After Effects gives you motion. The overlay editor gives you motion that reacts to your show state. A lower-third that slides in when Scrapbot detects a raid. A goal bar that fills as donations come in. A sponsor panel that arms and disarms from your dashboard. That's the gap AE can't close — it renders to video, not to a live system.
Get access → VS FIGMA DESIGN TOOL VS LIVE TOOL
Figma designs. This deploys.
Figma is a design tool. It produces static frames you then have to re-implement somewhere else. The overlay editor is the implementation — what you build is what runs on stream. No handoff, no re-build, no version drift between the design and the thing your viewers see.
You can import Figma assets directly. Use Figma to design, use the overlay editor to make it live.
Overlay marketplace → VS AFTER EFFECTS MOTION VS REACTIVE
AE renders to video. This renders to now.
After Effects is a render pipeline. You animate, export, import into OBS as a media source, and it plays back the same way every time. There's no connection to your show state — it can't know a raid just happened, or that you're 80% to your sub goal.
The overlay editor produces browser sources that are wired to live data. The animation plays when the trigger fires, not on a loop. That's a fundamentally different tool for a fundamentally different job.
FEATURE STATE TRIGGERS
Overlays that respond to your show.
Wire any overlay element to a state trigger: Scrapbot events, dashboard actions, donation thresholds, segment markers. When the trigger fires, the element animates in. When it clears, it animates out. You define the behaviour once in the editor, then forget about it during the show.
FEATURE VARIABLES
Live data in your layouts.
Bind text elements to variables — viewer count, donation total, current goal, custom operator inputs. The value updates in real time on stream without touching the overlay. Design the layout once, the data fills itself in.
FEATURE ASSET IMPORT
Bring your own brand.
Import PNG, SVG, WebP, and web fonts directly into the editor. Your brand assets, your colour tokens, your typography — the editor works with what you already have. No forced templates, no watermarks, no "upgrade to remove branding".
OBS BROWSER SOURCE DEPLOY
One URL. Drop it into OBS. Done.
Every overlay you build gets a unique browser source URL. Copy it, add it to OBS as a browser source, set the dimensions, and it's live. Updates you make in the editor propagate to the source without touching OBS. Arm and disarm from the Scraplet dashboard mid-show — no scene switching required.
Deploy Scraplet →