User Guide

Symbol Stream Generator is a browser-based motion graphics tool that combines flowing symbols, vector shapes, and animated overlay text.

Recommended browser: Google Chrome

Quick Start

1. Adjust LanesStart with lane count, angle, and speed.

2. Choose ElementsSelect symbol text or a mix of up to seven vector shapes.

3. Save & ExportUse the Save tab to export MP4 video, a settings URL, or JSON settings.

Simple and Detail Modes

Use the switch at the upper-left of the panel to choose which controls are shown. Simple keeps the essential size, lane, scroll, color, text, and save controls in view. Detail reveals rotation, flipping, phase offsets, individual lane speeds, gradients, shadows, and other fine adjustments. Switching modes never changes your settings.

Lane Settings

Layout and Motion

Panel Mode: Use the button in the panel header to switch between a floating panel and a docked layout with motion on the left and controls on the right.
Scroll Angle: Sets lane movement direction. Choose the symbol rotation reference in Detail mode.
Fine adjustments: Use the − and + buttons on either side of each slider value to change it by one configured step.
Lane Count and Width: Lane count starts at one lane and controls stream density. Fit calculates the width from the current screen size.
Speed and Alternating Direction: Controls movement speed and whether adjacent lanes travel in opposite directions. In Detail mode, turn off “Sync Lane Speeds” to set odd and even lane speeds independently.
Rotation, Flip, and Phase: Detail mode provides fixed angle, spin, odd/even counterclockwise direction, lane flips, phase offsets, and random starting positions. With Infrequent enabled, one to three visible elements make one full rotation every 10 to 20 seconds.

Symbols and Vector Shapes

Font and Symbol Text: Choose a preset or enter custom comma-separated symbols. Character splitting uses each entered character separately.
Local and Google Fonts: On supported browsers, you can grant permission and select a font installed on your device. Use “Load Google Fonts” to optionally load the curated Google Font list only when needed.
Using Google Fonts: The Google Fonts available in this app can be used for normal web-font display, video export, and commercial generated works. No on-screen attribution is required. Only follow each font’s license when redistributing or bundling the font files themselves.
Vector Shapes: In Detail mode, mix up to seven Canvas vector shapes and set the active count, shape, individual 30° rotation, and wireframe rendering for each.
Size, Order, and Glow: Adjust symbol size in Simple mode; reverse order, randomize placement, and set neon-like glow strength in Detail mode. High-density preview rendering and symbol caching reduce shimmer, including for emoji. Higher glow settings may reduce performance depending on your device and browser.

Colors and Background

Lane Colors: Set odd/even symbol and background colors. Detail mode adds color synchronization, opacity, and per-lane gradients with colors, angle, and stop.
Multi-Color Palette: Apply a two- to seven-color palette. Detail mode adds random assignment, brightness choice, and direct palette editing.
Automatic Palette: Generates colors from the odd-lane background using Complementary, Analogous, Triadic, or Tetradic harmony. It does not overwrite an active multi-color palette.
Background: In Detail mode, choose solid, linear, or radial background modes and adjust colors, angle, and stop position.

Overlay Text

Display Text: Enter the text shown at the center of the screen.
Fonts: Local and Google Font loading, plus a bold switch, are also available for overlay text.
Motion: Choose Bounce, Scroll, Slow Pulse, Flicker, Typing, Wave, Swing, Bow, Zoom, Pop, or Static. When scrolling, text stays inside a text box when that plate is selected, or scrolls across the screen when the max-width band is selected. Swing moves all characters together by ±30°. Bow animates one character at a time through 10° right, 60° left, 5° right, then upright. Zoom pops in sequentially, while Pop uses a fast 0.22-second appearance with a 0.5-second gap before the next character.
Decoration: Combine a background plate, padding, font size, and text color for legibility. Letter spacing, plate opacity, shadow, and animation speed are available in Detail mode.

Save Tab

The Save tab in the panel contains video export, settings URL sharing, and JSON save/restore controls.

Export an MP4 Video

Choose a resolution (HD, Full HD, square, or vertical), duration (5, 10, or 15 seconds), and frame rate (30 or 60fps), then press “Export MP4.” 60fps is more demanding, but produces smoother video in supported browsers.

Preview difference: Exported videos may differ slightly from the preview in the size and color appearance of symbols, shapes, and text. Full HD at 60fps can take more than a minute, so keep this page open until it finishes. Safari covers the stage with a dark overlay while exporting.

Share Settings

“Copy Settings URL” copies a URL containing the current lane, shape, color, background, and text settings directly. “Short URL” creates a shorter URL backed by temporary saved settings; it expires after 3 months. Opening either URL restores the shared configuration. Anyone who knows either URL can view and restore settings such as overlay text, font names, and colors, so treat them as public information.

Save and Restore Settings

Press “Save Settings” to download the current configuration as a JSON file. Use “Restore Settings” to select a saved JSON file and restore its parameters.

Tip: Press H or use the button in the upper-right corner to hide the settings panel and preview the animation across the full screen.