Frames, stingers, and elements
How each project kind works, what its controls affect, and which output format it produces.
All three project kinds share a canvas, a four-color palette, and a random seed. They differ in how their timelines work and how they are delivered to your broadcast software.
The canvas is defined in Composition settings by aspect ratio, resolution (1080p or 4K), and frame rate (24, 30, or 60 fps). The preview, rendered WebM, and browser source all use these dimensions. Design at the size your broadcast software will display. For example, a 1920×1080 stinger displayed on a 1280×720 canvas in OBS will appear soft, and a browser source sized differently from the composition will scale the entire page.
The palette contains four slots: Primary, Secondary, Accent, and Background. Family parameters and element layers reference these slots, or can be set to custom with a hex value. When Lock palette is enabled, Randomize preserves the current palette.
Stingers
A stinger is a single animation family on a fixed-length timeline. Stingers are rendered to a transparent WebM and installed in OBS as a Stinger transition. Stingers cannot be published as browser sources.
Families
The left rail selects the animation family. Selecting a different family rebuilds the preview from that family's parameters. The canvas, palette, logo, and timeline marks are preserved when switching, where the new family supports them.
| Family | Description | Image input |
|---|---|---|
| Geometric Shatter | Seeded polygon field that closes, holds, and opens | None |
| Graphic Shatter | Same motion as Geometric Shatter, with your image divided into tiles | Graphic. Only opaque pixels are displayed |
| Frame Pulse | Corner brackets with an open center | Logo (optional) |
| Gradient Band | Luminance band that wipes along an axis | None |
| Ken Burns | Full-frame still image with pan and zoom, crossfading at the Hold mark | Backdrop |
| Blob Morph | Large circles that merge and separate | None |
| Stream Rail | Particles following two or three curves | None |
| Glitch Signal | Horizontal slices and chroma offset, concentrated at Entry and Exit | Graphic (optional) |
| Iso Hex, Iso Brick, Iso Diamond | Isometric tile floor. Tiles enter, then exit outward | Graphic (optional). Opaque pixels define which tiles lift |
Speed (0.25 to 3) controls how quickly the family animates within the duration. Duration (0.4 to 6 seconds) sets the length of the rendered WebM.
Timeline
The timeline has three marks, each stored as a fraction of the duration:
- Entry — the frame is fully covered. For families that produce a track matte, the matte becomes fully white at this point.
- Hold — the scene-change point within the covered region. Ken Burns performs its crossfade here.
- Exit — the graphic begins to clear. The remainder of the duration is the exit animation.
Select Reset to remove custom marks and restore the family's default pacing. Default pacing is authored around a 1.2-second base duration and scaled to the project's duration and speed.
When installing in OBS without a track matte, set the transition point to the Entry time divided by the duration. When using a track matte (available for Geometric Shatter, Graphic Shatter, and Gradient Band), OBS follows the matte, which completes at the Entry mark.
Impacts and audio
FX and Audio insert a hit at the current playhead position. Drag a hit's marker to reposition it. Impacts are camera and typographic effects layered over the family, including a kinetic headline option; they are part of the stinger, not a separate project. Audio hits play in the preview and are included in the rendered file.
Randomize
Randomize assigns a new seed and regenerates the family's numeric parameters. Enable Lock palette or Lock logo first to preserve those properties. Generate variation on the project card performs the same operation without opening the editor.
Frames
A frame is a border drawn on the canvas with a transparent interior, allowing a camera feed or game capture to show through. Frames do not use timeline marks, impacts, or audio.
Select a border style from the left rail. Each style has its own set of motion options. Color, thickness, inset, and opacity are set in the inspector. Inset is expressed as a fraction of the shorter canvas edge, so the same value produces the same visual margin regardless of aspect ratio.
| Border | Motion options |
|---|---|
| Inset Border | None, breathe, or draw. Draw can be set to cut, reverse, or undraw |
| Bezeled Border | None, shine, pulse, cascade, or invert. Gleam color sets the highlight the motion moves toward |
| Corner Brackets | None, breathe, extend, or chase. Arm length and line count define the bracket shape |
| Tick Rail | None, still, crawl, or pulse. Tick count and major interval define the scale |
| Edge Bars | None, breathe, extend, or slide. With None, Position slides each bar along its edge. Each side has independent length and thickness |
| Chamfer Frame | None, breathe, draw, or gleam. The rim can be a stroke or a filled band |
The Run setting determines the available output:
- Timed frames have a duration. Render WebM produces one cycle as a transparent video. Download matte produces a still PNG mask of the interior (white where the underlying picture should show), which can be applied as a mask to the camera source in OBS. Both options are available only when Run is set to Timed.
- Indefinite frames loop continuously and are intended for browser sources. Render WebM and Download matte are disabled. To download a file, switch Run back to Timed.
Timed frames can also be published as browser sources, where they loop the duration. Use Indefinite when the motion should not restart at a visible seam.
Elements
An element is a stack of layers on the canvas. An alert is an element configured with reactions that play the layers when Streamlabs sends an event. The layer list, the Alert type, and the Reactions section are independent controls. Confusing them is the most common cause of an element that updates its text without playing, or that loops when a single playback was intended.
Layers
Add layers from the left rail: Shape, Text, Image, Bar, Effect, or Pattern. An element can contain up to 64 layers. Select a layer to edit it.
Layer position and size are expressed as fractions of the canvas; a width of 1 spans the full canvas width. Drag a layer on the canvas to move it, or drag a corner handle to scale it. Rotation is in degrees, and opacity ranges from 0 to 1.
Shift-click a layer to make it a child of the selected layer. Moving or scaling a parent also moves and scales its children, while each child retains its own position, styling, and animation settings. An element can contain up to 32 groups.
Each layer has its own animation:
- Enter and Exit set the layer's in and out transitions: none, fade, slide from a side, scale, pop, or shrink.
- Hold adds motion during the sustain: wave, bounce, wiggle, scale, pulse, sway, or shine. Multiple hold motions can be stacked.
An effect layer's in and out points are also displayed on the timeline.
Run
- Timed elements play for the Duration and then loop. If a reaction is configured to play the element, the browser source remains idle until that event occurs.
- Indefinite elements play their entrance once and then hold. Exit settings are retained but not shown; switch back to Timed to preview them.
Data bindings and playback
Two separate mechanisms control live behavior. Layer triggers replace layer content with live values. Reactions control whether the timeline plays. Triggers do not start playback on their own.
On a text layer, the Trigger setting determines what replaces the sample text:
| Trigger | Live value |
|---|---|
| Fixed text | None. The text field is displayed as written |
| Donor name, Amount, Message, Tier, Months, Count, Reward, Recipient | The corresponding field from the most recent alert. Toggles below the menu control which alert kinds can update the layer |
| Stream Deck counter | The integer stored under this layer's counter ID |
| Track name, Artist, Album | The currently playing track, via Music Magic |
The text field serves as the sample shown in the editor and as the fallback until a live value arrives. For counter triggers, this field is labeled Label rather than Sample.
A bar layer's Progress is a sample value from 0 to 1. Setting it to Goal causes the fill to follow the goal value from a tip alert.
An image layer can be set to Fixed, or its Music setting can be set to Album art. The uploaded image is displayed until a track is playing.
The element's Alert setting controls default playback:
- Static installs no default play reaction. The element loops its timeline.
- Tips, Subscriptions, Follows and raids, or Redemptions installs a single default reaction that plays the element once when that alert type arrives.
Editing the Reactions section replaces the default list. If you remove the play reaction associated with the selected Alert type, the inspector reinserts it so that the Alert setting continues to trigger playback.
Each reaction consists of a condition and an action.
When options:
- Tip, Subscription, Follow or raid, or Redemption
- Track changes
- A counter, selected from the element or pasted by ID
Then options:
- Play this element, as One shot or Loop. If one event matches both modes, Loop takes precedence.
- Add one to a counter, Set a counter, or Reset a counter
Most alerts use both a text binding and a play reaction: the binding fills in values such as the donor name and amount, and the reaction plays the entrance animation. A binding without a play reaction updates a graphic that is already on screen, which is appropriate for a goal bar or a now-playing display that should not replay on each event.
Counters
A Stream Deck counter consists of an ID and an integer value, with a maximum of one billion. The text layer displays its counter ID, which you can copy into the Stream Deck counter action or into another reaction's counter field. Publish the browser source after creating the layer so the live page subscribes to that ID. The current value can also be set from the Widgets tab.
Delivery
Elements are delivered as browser sources. Although Render WebM is available on the transport, only the browser source receives live alerts, counter updates, and music data.