Getting Started

Streamliner projects are self-contained documents. Each project stores a canvas size, a four-color palette, and one of three kinds of content: a stinger animation family, a frame border, or a set of element layers. The editor preview, the rendered WebM, and the live browser source all play back the same document, so what you see in the preview is what ships. The checkerboard pattern in the preview indicates fully transparent pixels; those areas remain transparent in the rendered file and on the live page.

Before designing, decide how the graphic will reach your broadcast software. The output format depends on the project kind.

This guide walks through creating a stinger and installing it in OBS. Frames, elements, and browser sources are covered in the other guides.

Create a project

1. On the Projects page, select New project.
2. Under Workspace, select Stinger.
3. Select the Aspect ratio that matches your broadcast canvas. At the default 1080p resolution, 16:9 produces a 1920×1080 canvas. The available ratios are 16:9, 9:16, 21:9, 1:1, 4:5, and 4:3.
4. Optionally enable custom colors and set the Primary, Secondary, Accent, and Background values. Animation families draw from these four palette slots. Individual parts can also be assigned a custom hex color later in the inspector.
5. Select Create. If you leave the name blank, the project is named "Untitled stinger".

Alternatively, open a preset from the gallery. This copies the preset into a new project under your account, and any subsequent edits apply only to your copy.

To change the canvas after creation, open Composition settings in the project header. Resolution can be set to 1080p or 4K (4K requires Premium), and frame rate can be set to 24, 30, or 60 fps. For most stingers, 30 fps is sufficient. Use 60 fps when the motion is fast enough that individual frames are visible.

Choose a family

The left rail lists the available animation families. Selecting a family rebuilds the preview immediately. The canvas size and palette are preserved when switching between families.

The following families make the timeline behavior easy to observe:

• Geometric Shatter fills the frame with a seeded field of polygons, then clears it.
• Gradient Band sweeps a luminance band across the frame.
• Frame Pulse draws corner brackets while leaving the center open.

Select Play to watch one full cycle. The cycle length is the project's Duration, which can be set between 0.4 and 6 seconds. The Speed control in the inspector scales the motion within that duration; it does not change the length of the rendered file.

Understand the timeline marks

The transport below the preview displays three marks on the timeline. Each mark is stored as a fraction of the duration, so its position in the cycle is preserved if you change the duration.

• Entry marks the point at which the frame is fully covered. For a shatter family, the polygon field has closed. For Gradient Band, the wipe has crossed the frame.
• Hold marks the scene-change point within the covered region. This is the moment the family was designed to hide the cut between scenes.
• Exit marks the point at which the graphic begins to clear. From Exit to the end of the duration, the graphic leaves the frame.

Drag a mark to reposition it. Adjacent marks are kept at least one frame apart. Select Reset to remove custom marks and restore the family's default pacing.

If you plan to install the stinger without a track matte, scrub the timeline until the preview is fully covered and note the time readout. That time, divided by the duration, is the transition point value you will enter in OBS.

Adjust the look

Randomize in the editor (or Generate variation on the project card) assigns a new seed and regenerates the family's parameters. Layout, element counts, and jitter are derived from the seed, so a given document always plays back identically. Select Randomize again to produce a different variation of the same family.

To preserve specific properties across randomization:

• Enable Lock palette to keep the current Primary, Secondary, Accent, and Background colors.
• Enable Lock logo to keep the current logo image.

Some families accept images:

• Upload graphic provides the source image for Graphic Shatter and the Iso families. Only the opaque pixels of the image become tiles.
• Upload backdrop provides the full-frame still image for Ken Burns.
• Upload in the logo section places a logo on the brand track, which is independent of the selected family.

FX inserts an impact hit at the current playhead position, and Audio inserts an audio hit the same way. Move the playhead before inserting additional hits, or drag an existing hit's marker to reposition it. A project can hold up to eight impacts. Rendering more than two impacts, more than one audio hit, or any premium impact or clip requires Premium.

Render the stinger

Select Render WebM. The editor captures every frame of the duration, uploads the frames, and encodes a transparent WebM. While this runs, the button reads Rendering. When the encode completes, the file appears in the notification menu and on the Renders page, accessible from the project header. You can download the WebM from either location.

Geometric Shatter, Graphic Shatter, and Gradient Band also produce a track matte alongside the WebM. When a render includes a matte, Download matte appears next to the WebM. In the matte, black preserves the outgoing scene and white reveals the incoming scene. The matte becomes fully white at the Entry mark, after which the opaque pixels of the WebM are drawn over the new scene.

Other families do not produce a matte. For those, the WebM alone is the transition: opaque pixels cover the scene change, and transparent pixels show whichever scene OBS is currently displaying.

Install the stinger in OBS

1. In OBS, open Scene Transitions, add a new transition, and select Stinger.
2. Set Video File to the downloaded WebM.
3. If the render includes a matte, set Track Matte to the matte file. OBS will reveal the incoming scene according to the matte rather than performing a single cut.
4. If the render does not include a matte, set Transition Point to the Entry time multiplied by the duration. For example, a 1.2-second stinger with Entry at 0.50 seconds uses a transition point of 600, or 600 milliseconds. This corresponds to the first frame in which the preview appears fully covered.
5. Name the transition and set it as the active transition for scene changes.

Test the transition between two scenes. If the scene cut is visible before the graphic fully covers the frame, either increase the transition point in OBS or move the Entry mark later in Streamliner and render again. Rendered files are not updated automatically; each render produces a new file.