Quick Start

1. Load audio — Click Load Audio in the toolbar and select one or more audio files (MP3, WAV, OGG, FLAC). Hold Ctrl or Shift to pick multiple files at once — they are loaded in the order selected and replace any currently loaded audio. Use + Track to append a single file to the existing tracks without replacing them. Each track’s waveform appears in the timeline in serial order with its filename as a sticky label.
2. Add layers — Click + in the Layers panel (left side) to open the layer picker. Layers are composited bottom-to-top: layers higher in the list render on top.
3. Configure — Select a layer to edit its properties in the right panel. Each layer type exposes its own set of controls.
4. Preview — Use the transport controls in the timeline toolbar (⏮ ⏪ ▶ ⏹ ⏩ ⏭) or press Space to play/pause. The timecode (hh:mm:ss:ff) and a seek bar in the top toolbar both track the current position.
5. Timeline — Use the timeline at the bottom to control when each layer is visible and to add fade-in / fade-out transitions. Grid lines and snapping help with precise placement.
6. Export — Choose resolution, FPS and bitrate in the toolbar, then click Export to render and download the video.

Background

Fills the entire canvas with a solid color or gradient. Always place this as the bottom layer.

• Type — Solid, Linear Gradient, or Radial Gradient
• Color(s) — Fill color; for gradients, two stop colors
• Angle — Rotation of a linear gradient in degrees

Image

Displays a static image. Aspect ratio is always preserved when resizing.

• File — Load a PNG, JPG, GIF, or WebP image
• Fit — Free (manual position & scale), Cover (fill & crop), Contain (letterbox), Stretch
• Free — drag — Select the Image layer, then drag the image in the preview to reposition it
• Free — resize — Drag any white corner handle to scale, or scroll the mouse wheel over the preview
• Center X / Y — Image center as fraction of canvas size (0.5 / 0.5 = centered)
• Scale — Image width relative to canvas width (1.0 = full width)

Ken Burns

Slowly pans and zooms the image for a cinematic documentary effect. Overrides the Fit setting while active (always uses cover-fill as the base).

• Enable — Toggle the Ken Burns animation on/off
• Zoom Amount — How much extra the image is scaled beyond cover-fill (0.25 = 25% bigger); this also determines how far the image can pan
• Pan Speed — How quickly the pan position cycles (Hz); try 0.02–0.05 for a slow, dreamy drift
• Zoom Speed — How quickly the zoom level breathes in and out (Hz)

Analyzer Bars

Classic frequency-spectrum visualization with vertical bars. Each bar represents a frequency band from the FFT.

• Bar count — More bars = finer frequency resolution
• Color mode — Solid color, vertical Gradient, or Hue-rotate (rainbow)
• Mirror — Reflect bars symmetrically from the center
• Smoothing — How quickly bars react; 0 = instant, 1 = very slow
• Canvas positioning — Select the layer, then drag the visualizer on the canvas to move it. Drag any white corner handle (or scroll the mouse wheel over the canvas) to resize it uniformly from the center. Position and size can also be set with the Position X / Y, Width, and Height sliders.

Analyzer Circle

Frequency spectrum arranged radially around a center point.

• Style — Bars, Dots, or Lines radiating outward
• Radius — Size of the inner hollow circle
• Bar count / length — Number and maximum size of spokes
• Canvas positioning — Select the layer, then drag the circle on the canvas to move it. Drag a corner handle (or scroll) to scale the radius. Position can also be set with the Position X / Y sliders.

Waveform

Draws the raw audio time-domain signal, updated each frame.

• Style — Line, Filled area (under the line), or Mirror (symmetric top/bottom)
• Color / line width
• Canvas positioning — Select the layer, then drag the waveform on the canvas to reposition it. Drag a corner handle (or scroll) to resize its bounding box. Position and size can also be set with the Position X / Y, Width, and Height sliders.

Geometry

A geometric shape that pulses to the beat. Driven by bass energy from the audio.

• Shape — Circle, Rectangle, Triangle, Hexagon, or Star
• Beat Scale — How much the shape grows on a bass hit
• Color / fill / stroke
• Canvas positioning — Select the layer, then drag the shape on the canvas to move it. Drag a corner handle (or scroll) to resize it. Position and size can also be set with the Position X / Y and Size sliders.

Text

Animated text overlay with optional custom font. Supports all Unicode characters and multiple lines.

• Text — The string to display. Press Shift+Enter in the text field to insert a line break.
• Font / Size / Line Height — Upload a TTF, OTF, or WOFF font file; set the size as a fraction of canvas height; adjust line spacing as a multiple of font size.
• Color / Bold / Italic / Stroke — Appearance options. Color Mode can be set to Hue-Rotate for a continuous color cycle.
• Canvas positioning — Select the layer, then drag the text directly on the canvas to reposition it. Drag a corner handle (or scroll) to change the font size. Position can also be set with the Position X / Y sliders. The text block is centered on that point.
• Anim In / Anim Out — Independent entrance and exit animations: None, Fade, Slide Left, Slide Right, Slide Up, Scale, or Typewriter. Anim Time sets how long each animation takes.
• Timeline-linked animation — When the layer’s clip is enabled in the timeline, the Anim In plays at the clip start and the Anim Out finishes exactly at the clip end — no matter how long the clip is. If the clip is shorter than twice the Anim Time, the animations are shortened proportionally so they never overlap.
• Free-running mode — When the clip is not enabled, the animations loop on their own internal timer: in → show (Show Time seconds) → out → repeat. Enable Loop to repeat the cycle continuously.

GLSL Shader

Renders a fully custom fragment shader using WebGL. Compatible with most Shadertoy shaders. When you add a GLSL Shader layer, a shader picker opens first so you can either start from a preset or begin with a blank shader.

Shader Picker

• Browse the built-in shader library on the left. Use the All / Overlay / Solid filter buttons to narrow the list. Shaders tagged Overlay support alpha transparency and work well composited over other layers.
• Click any entry to see a live animated preview in the panel on the right
• Click Use This Shader to add the selected shader as a new layer with all passes and channel mappings pre-configured
• Choose Blank Shader at the top of the list to start from scratch with the default audio-reactive template

Writing & Editing Shaders

• Write a mainImage(out vec4 fragColor, in vec2 fragCoord) entry function
• Open the full shader editor via the Edit Shader button in the layer properties
• The shader recompiles automatically when the editor loses focus; compile errors appear at the bottom of the editor

Uniforms

• iTime — Playback position in seconds
• iResolution — Canvas dimensions (vec3)
• iChannel0 — By default: 512×1 luminance texture updated every frame with FFT frequency data (single-pass), or the output of the previous buffer pass (multi-pass)
• iChannel1 — For multi-pass shaders: audio frequency texture (same 512×1 format) available in the Image pass
• iMouse, iDate, iFrame, iTimeDelta, iSampleRate — Standard Shadertoy uniforms

Multi-pass Shaders

Shaders with one or more Buffer passes (A–D) are fully supported. The default channel routing follows the common Shadertoy convention:

• Buffer A — iChannel0 = Buffer A’s own previous frame (ping-pong / temporal accumulation); iChannel1 = same
• Buffer B (and later) — iChannel0 = previous buffer’s current output; iChannel1 = this buffer’s previous frame
• Image pass — iChannel0 = last buffer’s output; iChannel1 = audio
• Channel assignments can be changed per-pass in the shader editor

Particles

A fully customizable GPU-friendly particle system. Emit dots, stars, lines, triangles, squares, or custom sprites from a freely positionable emitter. All settings are saved in the project file.

Presets

Choose a preset from the Apply Preset dropdown to instantly configure a complete look. Available presets:

• Fire — Line emitter at the bottom, upward burst with yellow→red lifetime gradient
• Fireworks — Point emitter, omnidirectional burst with cycling hue; audio-reactive emit rate
• Rain — Full-width line emitter at the top, fast downward lines with slight wind drift
• Snow — Full-width line emitter at the top, slow drifting dots with turbulence
• Sparks — Upward cone of fast lines that arc under gravity; audio-reactive speed
• Dust — Rect emitter fills the frame with slow, turbulent drifting motes
• Steam — Point emitter, slow rising cloud of large fading dots
• Magic — Circle emitter with hue-rotating stars pulled by a swirl modifier; audio-reactive
• Explosion — Point emitter, omnidirectional burst with fast-decaying yellow→red gradient

Emitter

• Source Type — Point (single origin), Line (particles spawn along a line — good for rain and snow), Rect (spawn anywhere inside a rectangle), Circle (spawn on a circle edge)
• Emitter X / Y — Position of the emitter as a fraction of the canvas (0–1). Values outside this range are allowed, useful for off-screen line emitters
• Source Size — Length of the line, side of the rect, or radius of the circle, as a fraction of the canvas short edge
• Source Angle — Rotation of the source shape itself (e.g. tilts a line emitter to produce diagonal rain)
• Direction — Main emission direction in degrees (0° = right, −90° = up, 90° = down)
• Spread — Half-angle of the emission cone in degrees; 0 = pencil beam, 180 = omnidirectional

Canvas Interaction

Select a Particles layer to see the emitter gizmo overlaid on the preview canvas. Gizmos are never baked into the exported video; disable them temporarily with the Show Gizmos checkbox.

• Move emitter — Drag the yellow dot at the emitter origin to reposition it
• Rotate direction — Drag the yellow arrowhead (50 px along the emission direction) to swing the direction angle
• Move attractor — When Attractor On is enabled, drag the cyan/red circle to reposition it
• Move swirl center — When Swirl On is enabled, drag the purple circle to reposition it

Particle Appearance

• Shape — Dot (filled circle), Star (5-point), Line (oriented along velocity — ideal for rain and sparks), Triangle, Square, Sprite (uses the currently loaded sprite image)
• Sprite picker — A scrollable gallery of 93 built-in sprites organised by category (circle, dirt, fire, flame, flare, light, magic, muzzle, scorch, slash, smoke, spark, star, symbol, trace, twirl, window). Click any thumbnail to select it and switch to Sprite shape automatically. The selected sprite is saved in the project file by filename — no image data is embedded, keeping projects compact. Rotated variants are included for directional effects.
• Load Custom… — Load your own PNG or JPG as the sprite. Custom sprites are stored as binary data inside the project JSON so projects remain fully self-contained.
• Size / Size Variance — Base particle size in pixels; variance (0–1) randomises each particle’s size around that base

Animated Sprite

When Enable Animation is turned on, each particle cycles through a sequence of images instead of a single static shape. The particle shape is ignored while animation is active.

• Mode: Loop — The sequence loops at FPS (loop) frames per second. Each particle gets a random phase offset so they don’t all blink in sync.
• Mode: Lifetime — The full sequence plays exactly once across the particle’s lifetime, regardless of FPS.
• Frames (multi-image) — Click thumbnails in the frame picker to build an ordered sequence. Click a selected thumbnail again to deselect it. Playback follows the order shown.
• Load Sheet… — Import a single sprite-sheet image whose frames are arranged in a regular grid. Set Cols and Rows to match the sheet; total frames = cols × rows. Sprite sheets animate faster than multi-image sequences for large frame counts.
• Particle color tinting and rotation apply to animated frames the same way as static sprites.

Speed, Lifetime & Rotation

• Speed px/s — Initial particle speed; variance randomises per particle
• Lifetime (s) — How long each particle lives; variance randomises per particle
• Init Rotation / Rot Speed — Starting rotation of each particle and how fast it spins (degrees/second); variance adds per-particle randomness to the spin rate

Color

• Mode: Solid — All particles use a single fixed color
• Mode: Hue-Rotate — The global hue cycles at Hue Speed deg/s; each particle is born with the current hue, shifted by a small random offset, then its hue drifts slightly over its lifetime
• Mode: Lifetime — Each particle interpolates from Color (young) to Color (old) as it ages
• Alpha Fade — When enabled, particles fade out over the last 40% of their lifetime
• Fade-in Time (s) — How long each particle spends fading in from transparent at birth. 0 = appear instantly. Combined with Alpha Fade, particles will ramp up and then ramp back down.

Physics Modifiers

• Gravity X / Y — Constant acceleration in px/s²; positive Y = downward. Use negative Y for fire-like upward drift
• Wind X / Y — Constant velocity offset in px/s; displaces particles without accelerating them
• Damping — Velocity retained per second (1.0 = no friction, 0.9 = strong drag). Applied independently in both axes
• Turbulence — Adds a random force each frame, creating a jittery organic motion

Attractor

A point that pulls or pushes all particles toward or away from it. Enable with Attractor On.

• Position X / Y — Location as canvas fraction; drag the cyan/red gizmo on the canvas for quick positioning
• Strength — Force in px/s²; positive = attract, negative = repel. Scales with inverse distance so near particles are affected more strongly

Swirl

A rotational force field around a center point that makes particles orbit it. Enable with Swirl On.

• Position X / Y — Center of the swirl; drag the purple gizmo on the canvas
• Strength — Tangential force in px/s; positive = counter-clockwise, negative = clockwise
• Radius — Distance from center where swirl effect falls to zero, as a fraction of canvas short edge

Direction Drift

Randomly changes each particle’s velocity direction at a regular interval, creating organic wandering paths. Enable with Enable.

• Interval (s) — How often each particle picks a new direction. Each particle’s first change is randomised within the interval to prevent synchronised lurches.
• Max Turn Angle ° — The maximum angle by which the direction can rotate per change (0–359°). Speed is preserved; only the direction changes.

Trails

Each particle draws a fading trail of ghost copies behind it. Enable with Enable Trail. All trail settings are saved in the project file.

• Trail Segments — Number of past positions stored per particle. More segments = longer trail. Values above ~40 increase memory and fill-rate cost.
• Mode: Alpha-fade — Segments fade from the particle’s current alpha at the head down to transparent at the tail (default).
• Mode: Cut-off — All segments are drawn at full opacity; the trail ends abruptly rather than fading.
• Mode: Custom Colors — Segments interpolate through a user-defined list of color stops from tail to head. Use the color swatches to add, change, or remove stops. Fade Alpha additionally fades the trail transparent toward the tail.
• Trail: Use Dots (Faster) — Appears when Shape is Sprite or Animated Sprite is on. When checked, trail segments are drawn as simple dots instead of scaled sprite images. Significantly faster with large particle counts or long trails.
• Trail segments taper in size from full at the head to 30% at the tail. The active particle color (including lifetime gradient and hue-rotate) is used for trail coloring.

Audio Reactivity

• Enable Audio Reactive to drive a chosen property from the bass energy of the playing audio
• React Property — emitRate (bursts on beats), speed (particles fly faster on beats), or size (particles grow on beats)
• Multiplier — How strongly the audio energy scales the chosen property (higher = more dramatic response)

Particles 3D

A perspective-projected particle system identical in features to the 2D Particles layer, but operating in a full 3D world. The camera is fixed at the origin looking down the Z axis; particles are placed and move in 3D space and are projected onto the canvas with correct perspective scaling.

3D-Specific Controls

• Emitter Z (depth) — Depth of the emitter in world units (default 500). Lower values = closer to camera (particles appear larger). Higher values = further away.
• Tilt X / Tilt Y — Rotate the emitter shape itself around the X or Y axis. A line emitter with Tilt X 70° becomes a mostly-horizontal ring tilted in 3D space.
• Direction Pitch — Tilts the emission cone toward (+) or away from (–) the camera. 0° = flat in screen plane. 90° = particles fly directly into the screen. –90° = fly toward the viewer.
• Gravity Z / Wind Z — Accelerates particles into or out of the screen over time.
• Attractor / Swirl Depth — Sets the depth of the attractor or swirl center point in 3D space.
• Focal Length — Perspective strength. Higher = less distortion (telephoto feel). Lower = strong fisheye. Default 500 matches a neutral perspective at emitter depth 500.

Physics Notes

Gravity, wind, and turbulence are depth-scaled so that a particle at the focal-length depth behaves identically to the 2D Particles layer. Particles further away move more slowly in screen space (correct perspective behavior). Speed is set in screen pixels/s at the emitter depth — so changing emitter depth does not change the initial apparent speed.

The gizmo overlay works identically to 2D Particles: drag the yellow dot to move the emitter, drag the arrow tip to rotate the yaw direction. Pitch is set via the property slider.

Presets

• fire — Classic upward fire at screen depth 500
• tunnel — Particles rain from deep in the scene straight toward the camera — creates a tunnel or warp-speed effect
• orbit — Tilted disc of particles orbiting the screen center using swirl + attractor
• sparks — Ground sparks flying upward with slight depth angle
• snow — Snowfall with gentle depth variation
• explosion — Omnidirectional burst expanding in 3D

Fade Out

Overlays a black rectangle whose opacity ramps up over the layer duration. Use it as the topmost layer to create a global fade-to-black at the end of the video. Configure start time and duration via the Timeline.

Effects

Applies a non-destructive post-processing effect to all layers below it — similar to an adjustment layer in Photoshop. Each Effects layer processes a snapshot of the composited image beneath it and blends the result back using the layer’s Opacity and Blend Mode. Stack multiple Effects layers for combined processing.

Select an effect from the Effect dropdown. Effects are organised by category:

• Color — Brightness/Contrast, Hue/Saturation, Color Temperature, Sepia, Monochrome, Invert, Levels, Color Curves, Gradient Map
• Texture — Noise, Vignette, RGB Shift (chromatic aberration)
• Retro — VHS, CRT Monitor, Vintage Film, Pixelate, Dither (Bayer ordered), C64 Palette
• Art — Halftone, Emboss, Sharpen, LED Screen, ASCII
• Glow — Bloom, Star Glow (directional light streaks)
• Blur — Gaussian Blur, Motion Blur, Zoom Blur, Circular Blur, Depth of Field
• Distort — Ripple, Swirl, Pinch/Bulge, Polar Coords, Frosted Glass
• Surface — Paper, Digital Glitch

Opacity as blend strength — At Opacity 1.0 the effect fully replaces the image. Reducing opacity interpolates between the original and the processed version, letting you dial in subtle grades. The ASCII effect renders using Canvas 2D and supports Original Colors (per-character color sampled from the source image) or a single Solid Color.

Magic Spell

A glowing orb that travels endlessly around a defined path and leaves a fading color trail behind it — perfect for framing album art, images, or other layers with an animated magical border.

Path

• Shape — Circle, Ellipse, Rect, or Triangle. Circle uses only the Width value; Ellipse and Rect use both Width and Height independently.
• Center X / Y — Position of the path center as a fraction of the canvas (0 = left/top, 1 = right/bottom).
• Width / Height — Size of the bounding box as a fraction of the canvas dimension. Values above 1 extend beyond the canvas edges.

Motion

• Speed rev/s — How many full loops per second. Positive = clockwise, negative = counter-clockwise. Typical values: 0.1–0.5 for a slow drift, 1–2 for a fast orbit.

Trail

• Length — How much of the path is covered by the trail, as a fraction (0.01 = tiny tail, 1.0 = full loop).
• Head Color — The color at the brightest, newest end of the trail.
• Tail Color — The color at the oldest, fading end of the trail. The trail interpolates smoothly between the two.
• Width (px) — Stroke width at the head; the trail tapers down to 1 px at the tail.

Head Glow

• Glow Radius — Outer radius of the soft halo in pixels.
• Core Color — The bright inner dot color.
• Glow Color — The softer surrounding halo color.

Sparks

• Enable — Toggle the particle burst at the head on or off.
• Rate — How many spark particles emit per second at the head position.
• Size / Color / Lifetime / Speed — Control the appearance and movement of each individual spark. Sparks spread outward in random directions with slight gravity and fade as they age.

Audio

• Audio Reactive — When enabled, bass energy temporarily increases the travel speed.
• Speed Boost — The maximum speed multiplier added on a strong bass hit. A value of 1.5 doubles the speed at peak bass.

Lens Flare

Realistic, fully automatable lens flare effects rendered in real time using Canvas 2D additive blending. Each instance is an independent layer, so you can stack multiple flares.

Category & Preset

• Category — Four optical styles: Anamorphic (cinema horizontal streaks), Spherical (classic circular ghost orbs & rings), Sun Flares (large glow with starburst rays), Streaks (diffraction spikes). Changing category resets to preset 0.
• Preset — 27 hand-crafted presets per category (108 total). Selecting a new preset refreshes the Elements section with that preset’s named parts.

Light Source

• Position X / Y — Normalised coordinates of the virtual light source. 0 = left/top edge, 1 = right/bottom edge. Automatable — animate over time for moving light. You can also drag the selection handle on the canvas.

Appearance

• Scale — Uniformly scales all flare elements. Automatable for a breathing, pulsing effect.
• Intensity — Adjusts the brightness of every element. Automatable.
• Tint — Multiplicatively colour-tints the entire flare. White = no tint.
• Rotation° — Rotates streaks and starburst rays around the light source. Automatable for spinning diffraction effects.

Audio

• Audio Reactive — When enabled, audio energy is added to Intensity on every frame.
• Band — Which frequency band drives reactivity: Bass, Mid, High, or All.
• Amount — How strongly audio energy affects the intensity (0 = off, 2 = very strong).

Elements

Each named element in the current preset can be individually overridden:

• Color — Replaces the preset’s default colour for this element. Automatable via the [~] button (cycles through hues).
• Scale — Size multiplier for this element only (1.0 = preset default). Automatable for rhythmic pulsing.
• Opacity — Fades this element independently of others. Automatable for on/off strobing.

The layer defaults to Screen blend mode, which is optimal for bright light effects on dark backgrounds. Change to Add (lighter) for maximum brightness.

Titles

A feature-rich titles layer for intros, credits, and scrolling text. Choose one of four modes from the Mode dropdown — the property panel updates to show only the relevant controls.

Intro Credits

A slideshow of individually positioned text blocks (pages), each with its own header and body text. Pages are shown one after another and will be automatically timed to fill the layer’s clip on the timeline.

• Transition — Animation effect between pages: fade, slide-up, slide-down, slide-left, slide-right, scale-in, scale-out, blur-in, typewriter, wipe-up
• Pages panel — Use Previous / Next to navigate, + Add Page to append a copy of the current page, ✕ Remove Page to delete it
• Header / Body Text — Each page has a header line (large, bold by default) and a body text area (smaller). Either can be left empty
• Position X / Y — Centre position of this page’s text block, as a fraction of canvas size. Each page can be positioned independently. Drag on the canvas to reposition the current page
• Fade In / Show Time / Fade Out — Per-page timing in seconds. When the layer has a finite clip on the timeline all timings are scaled proportionally so every page is visible exactly once within the clip duration

Star Wars Crawl

Classic perspective-scrolling text that recedes toward a vanishing point on the horizon — just like the Star Wars opening crawl.

• Text — Multi-line text. Lines starting with ## are rendered as bold headers; all other lines are body text
• Scroll Speed — How fast the text advances in world units per second
• Perspective Depth — Focal length of the virtual camera. Lower values = more dramatic fish-eye perspective; higher values = flatter, more subtle effect
• Tilt Angle — How steeply the text plane is tilted away from the viewer. Higher values make the perspective more pronounced
• Horizon — Vertical position of the vanishing point as a fraction from the top of the canvas
• Curve Type / Amount — none for the classic straight crawl; arc bends the path into a smooth arc (great for circular credits); wave applies a sinusoidal S-curve

Outro Credits

Standard vertically scrolling end-credits, similar to a film end-roll.

• Credits Text — Multi-line. Lines beginning with ## become bold category headers; all other lines are body text. Blank lines add vertical spacing
• Scroll Speed — Pixels per second
• Center X / Column Width — Horizontal centre and width of the credits column as fractions of the canvas
• Loop — When enabled, restarts the scroll after all text has passed off the top of the screen

Horizontal Ticker

A continuously scrolling single-line text ticker (like a news ticker or concert-hall display).

• Ticker Text — The message that repeats seamlessly. Add trailing spaces or a separator character to control the gap between repetitions
• Speed — Scroll speed in pixels per second
• Position Y — Vertical position as a fraction of canvas height
• Background Bar — Optional solid-colour bar behind the text; colour and opacity are independently configurable

Shared settings

All four modes share the Header Typography and Body Typography sections (font family, size, colour, bold/italic, line spacing, alignment, and optional text stroke). Load a custom font with Load Font — the same font file is applied to both header and body. To use different fonts, type the family name manually in each field after loading.

MilkDrop

Renders classic Milkdrop visualizations in real time using the Butterchurn WebGL2 engine. 1 754 presets are included, pre-converted from the original .milk format. The visualization reacts to the audio playing in the app every frame.

• Preset — Choose any of the 1 754 included presets from the dropdown. The preset loads with a smooth blend transition.
• ← Prev / ⟳ Random / Next → — Navigate sequentially through the preset list or jump to a random one. The configured blend time applies to all transitions.
• Auto-Cycle — Automatically advances to the next preset after the configured interval expires. Restarted whenever the interval value changes.
• Cycle Interval (s) — How many seconds to spend on each preset before advancing (5–120 s).
• Blend Time (s) — Duration of the cross-fade between presets (0 = instant cut, up to 10 s).

The layer uses a dedicated WebGL2 canvas internally; its output is composited onto the main canvas each frame via the normal layer opacity and blend-mode controls.

Video

Plays a local video file as a layer. The file is streamed from disk using a blob URL — it is never loaded entirely into RAM, so even large video files work efficiently. Stack multiple Video layers for collages or picture-in-picture compositions; each layer uses its own independent decoder.

Loading

• When you add a Video layer a file picker opens immediately. Click Load Video… in the Properties panel at any time to swap the file.
• The timeline clip length snaps to the video’s natural duration once the metadata is read.

Fit & Positioning

• Free — Manual position and scale, identical to Image layer (default). Select the layer and drag the video on the canvas to reposition it; drag any white corner handle or scroll the mouse wheel to resize it. The Center X / Y and Scale sliders in the panel stay in sync.
• Cover — Fills the entire canvas, cropping if aspect ratios differ
• Contain — Letterboxes the video inside the canvas
• Stretch — Fills exactly, ignoring aspect ratio

Use Free mode with multiple Video layers to build a video collage or drop a video clip into end-credits alongside text layers.

Looping

Extend the clip beyond the video’s natural length in the timeline — the video wraps seamlessly. Choose the wrap style in the Playback section:

• Loop (restart) — When the video ends it jumps back to the first frame
• Ping-pong — Alternates forward and backward: plays to the end, then plays backward to the start, and repeats

Reverse

Enable Play Reverse to invert the playback direction. Works independently of the loop mode — combine with Ping-pong to start from the end instead of the beginning.

Sync

During live preview the video element plays alongside the audio and re-syncs if it drifts more than 300 ms. Reverse and Ping-pong modes seek per-frame for correctness. During offline export every frame is seeked to the exact audio position.

Clip Editing (Cut / Copy / Paste / Split)

Click any clip block in the timeline to select it (brighter fill) and automatically switch the layer list & properties panel to that layer. With a clip selected:

Space always toggles play/pause even when a slider, button, or drop-down has focus — it first releases focus from that control.

Right-click any clip block for a context menu with Cut, Copy, Paste, Split at Playhead (razor cut), and Delete. These operations work on all layer types, not just Video.

Project Save / Load

The video file is not embedded in the project JSON. Only the filename and duration are saved. After loading a project that contains Video layers, click Load Video… in the Properties panel to re-select the original file from disk.

Time Code

Overlays the current playback position as text and/or a progress bar. Every visual aspect — font, color, bar style, and position — is independently customisable.

Layout

• text-only — timecode text only, no bar
• bar-only — progress bar only, no text
• above-bar / below-bar — text and bar on separate rows with an adjustable Gap
• in-bar — text overlaid on the bar (works best with a tall Height)

Content & Formats

The Content dropdown controls what is displayed:

• elapsed — time since the start of the playlist
• remaining — time until the end
• elapsed+remaining — elapsed on the left, remaining on the right
• elapsed/total — e.g. 01:23 / 03:45
• track-elapsed / track-remaining / track-elapsed+remaining / track-elapsed/total — same modes but relative to the current track in a multi-track project; the counter resets when each new track begins

Five Format options: hh:mm:ss, mm:ss, m:ss, mm:ss.cs, hh:mm:ss.cs (cs = centiseconds).

Bar Styles

• line — thin track line with a movable playhead dot
• rect — filled rectangle that grows as time progresses
• rounded — same as rect but with adjustable corner radius

Follow Playhead

Enable Follow Playhead in single-value modes to have the timecode text slide along the bar with the playhead — the number physically moves across the screen as the song plays.

Fixed-Width Digits

On by default. Each digit character is given the same column width (the widest digit in the current font), so the layout never shifts when a digit changes width — especially important with proportional custom fonts.

Custom Font

Click Load Font in the Timecode section to import a TTF, OTF, or WOFF file. The font is embedded as base64 in the project JSON and automatically restored when you reopen the project.

Positioning & Resizing

Select the layer and drag the dashed outline on the canvas to move it. The two mid-edge handles (left and right) resize the width; the corner handles scale the entire element. All positions update the Center X / Y and Width sliders in the panel in real time.

Audio Reactivity

Enable Audio Reactive and choose a frequency Band (bass, mid, treble, all). The Affects setting controls what reacts:

• brightness — text and fill colors brighten on beats
• scale — the element grows slightly on beats
• both — brightness and scale together

Common Layer Properties

All layer types share these base properties, editable in the right panel when a layer is selected:

• Name — A label shown in the Layers panel and the Timeline
• Visible — The eye icon (👁) in the Layers panel toggles the layer on or off globally
• Opacity — 0 = fully transparent, 1 = fully opaque; independent of timeline fade
• Blend Mode — How this layer composites over those below it:

Reordering layers — Drag a layer up or down in the panel, or use the ▲ ▼ arrow buttons. The topmost entry in the list renders on top of all others.

Canvas Positioning

Most layer types can be positioned and resized interactively. Select a layer and work directly on the canvas preview:

• Move — Drag anywhere inside the dashed selection outline. The cursor changes to a grab hand to indicate the area is draggable.
• Resize (corner) — Drag any of the four corner handles. For center-based layers (Text, Geometry, Analyzer Circle, Lens Flare, Image, Video in Free mode) this scales the element from its center. For rect-based layers (Analyzer Bars, Waveform) both dimensions scale uniformly.
• Resize (edge) — Magic Spell and Time Code expose mid-edge handles for edge-only resizing: Magic Spell gets all four sides; Time Code gets left and right to adjust width independently of height.
• Scroll to scale — Hover over the canvas with a layer selected and scroll the mouse wheel to scale it without grabbing a handle.

The dashed outline and handles are only shown for the currently selected layer. Numeric sliders in the Properties panel stay in sync and update live during a drag.

Bloom (Glow Effect)

Available on Image, Analyzer Bars, Analyzer Circle, Waveform, Geometry, Text, and Particles layers. The Bloom section appears at the bottom of each layer’s property panel. All bloom settings are saved in the project file.

• Enable — Turns the glow on or off for this layer
• Size (px) — Blur radius of the glow in pixels; larger values create a wider, softer halo
• Strength — Opacity of the glow layer composited over the canvas (0 = invisible, 1 = full strength). Values above 1 are possible when audio reactivity amplifies the strength.
• Passes — Number of blur passes (1–4). Multiple passes stack blurs from tight to wide, creating a more natural falloff and a brighter core. Higher values are more expensive to render.
• Color Mode — Controls the color of the glow independently of the layer content:
  • Layer — The glow inherits the exact colors drawn by the layer (default)
  • Static — The glow is tinted with Color; useful for a fixed-hue halo around white or monochrome content
  • Gradient — The glow fades horizontally from Color on the left to Color 2 on the right
  • Hue-Rotate — The glow color cycles through the full spectrum over time at the speed set by Hue Speed. Works on any content color, including white text.
• Color / Color 2 — Tint colors used by the Static and Gradient color modes
• Hue Speed (°/s) — How fast the hue cycles in Hue-Rotate mode (degrees per second)
• Audio → Strength — When enabled, the glow strength pulses with audio energy. The effect is most visible on beats; silence reduces the glow to near-zero.
• Audio → Size — When enabled, the blur radius grows with audio energy, producing a larger halo on beats.
• Audio Band — Selects which frequency range drives the audio reactivity: bass (default, punchy response to kick drums), mid, treble, or all. Applies to both Audio → Strength and Audio → Size.

Presets

Save a layer’s visual settings as a named preset and load them onto any other layer of the same type in one click. Presets capture colors, sizes, fonts, and effect settings — but not clips, automation, or the layer’s display name, which stay independent.

Preset Bar

A Preset Bar appears at the top of every layer’s Properties panel:

• Dropdown — lists all saved presets for the current layer type. Presets for a Text layer only appear on Text layers, Geometry presets only on Geometry layers, and so on.
• Apply — loads the selected preset into the current layer, overwriting all its properties with the saved values
• Save as… — opens a dialog where you name the preset; if you type the name of an existing preset it is overwritten
• ✕ — deletes the selected preset after a confirmation prompt

Preset Pack Manager

Click the Presets button in the toolbar to open the Pack Manager:

• Browse all saved presets grouped by layer type and delete individual ones
• ⬇ Export All — saves all presets to a musicviz-presets.json file
• ⬆ Import Pack… — load a preset pack from disk; choose Merge to add the new presets alongside existing ones, or Replace all to clear your current presets first

Storage & Sharing

Presets are stored in the project JSON under a top-level presets key. They travel with the project file when you share it. Exported preset packs are standalone .json files in the musicviz-presets format and can be imported by any MusicViz user.

Automation & Modulation

Every numeric parameter in every layer can be driven by an LFO or a keyframe curve. Automations run in real time and are baked into exported video.

Adding Automation

Select a layer and look for the small ~ button next to any numeric slider or number field in the Properties panel. Click it to open the automation sub-panel for that property.

• None — The property uses its manually set value (default).
• LFO — A periodic oscillator modulates the property continuously.
• Curve — A keyframe curve drives the property at specific audio times.

LFO Settings

• Wave — Waveform shape:
  • Sine — Smooth, continuous oscillation
  • Triangle — Linear ramp up / ramp down
  • Sawtooth — Linear ramp that resets sharply
  • Square — Alternates between +amplitude and −amplitude
  • Sample & Hold — Random stepped values that change each cycle
• Freq — Oscillation speed in Hz (cycles per second). 1 Hz = one full cycle per second.
• Amplitude — How far the value swings from the center. The unit matches the property’s unit (pixels, fractions, degrees, etc.).
• Phase — Starting phase offset as a fraction (0–1). 0 = starts at zero, 0.25 = starts at peak, 0.5 = starts at zero descending.
• Center — The value the LFO oscillates around. Check “base” to use the property’s current manual value as the center.
• Active — Optional start and stop audio times (in seconds). Leave blank to run the LFO from the beginning to the end of the track.

Curve Settings

• Interp — How values are interpolated between keyframes:
  • Linear — Straight-line interpolation between keyframes
  • Smooth — S-curve (smoothstep) easing at each keyframe
  • Step — Holds the previous keyframe value until the next one
• Keyframe table — Each row sets a value at a specific audio time. The × button removes a keyframe (minimum 2 required). Click + Add Keyframe to insert another point at the end.

Timeline Automation Lanes

Any property with an LFO or Curve automation grows its layer row in the timeline with one sub-lane per automaton:

• Curve lane — Shows the interpolated curve as a purple line. Keyframe positions appear as draggable dots — drag them horizontally to adjust the time or vertically to adjust the value. Double-click an empty area of the lane to insert a new keyframe at that time. Right-click a keyframe dot to delete it (minimum 2 keyframes required).
• LFO lane — Shows a teal preview waveform. Vertical green / red lines mark the optional start and stop times if set.
• Color lane — Shows a gradient strip of the interpolated color over time, with a dot per keyframe. Drag dots horizontally to retime, double-click to add, right-click to delete.
• Motion Path lane — A blue bar spanning the clip with a red progress tick at the playhead. Edit the path on the canvas via the layer’s Motion Path section.

Keyframe Recording

Instead of typing keyframe times by hand, you can record them live. The KF control in the timeline transport bar (right next to the play / pause buttons) switches between three modes:

• Off — Editing a parameter never creates keyframes (normal behaviour).
• Auto — Scrub the playhead to any time, then change a parameter — a keyframe is inserted (or updated) at that time automatically. Move to another time, change it again, and the value tweens between them.
• Man (Manual) — Keyframes are recorded only while the round ● button is armed (it pulses red). Disarm it to make edits without recording. Use this when you want precise control over which changes become keyframes.

While recording is active the timeline playhead turns red with a pulsing dot. Recording works on numeric sliders/fields (linear·smooth·step tween) and on color properties (interpolated in RGB). Re-editing a parameter at the same playhead position replaces that keyframe rather than stacking a duplicate.

Motion Path (Spline)

Layers with a position (X / Y) expose a ⎯ Motion Path section at the bottom of their Properties. Click ✎ Edit Path on Canvas and draw a path directly over the preview:

• Click empty canvas to add a control point; drag a point to move it; double-click or right-click a point to delete it.
• The element travels the whole path over the length of its timeline clip — it starts at the clip start and finishes at the clip end, so the speed scales automatically with clip length.
• Closed loop joins the last point back to the first. Speed Easing controls acceleration along the path (constant / ease-in / ease-out / ease-in-out / smooth). Motion is arc-length based, so speed is visually even regardless of how the points are spaced.
• A red marker on the canvas shows the element’s position at the current playhead time. Click ✅ Done Editing Path to finish, or ✕ Clear Path to remove it.

The path feeds the same position channel as the keyframe system and appears as a ⎯ Motion Path lane in the timeline. Only the control points are stored (not thousands of baked samples), so the project file stays compact and the spline remains fully editable after loading.

Serialization

All automation definitions — LFOs, curves, color curves and motion-path control points — are saved as part of the project JSON and fully restored on load. The keyframe-record mode is saved too. The automation engine runs identically during both live preview and offline export.

Timeline

The timeline at the bottom of the screen organises every layer as a clip on its own track — similar to a non-linear video editor.

Audio Lane

The top lane always shows the audio waveform for reference and stays fixed even when scrolling layer lanes.

• Single track — Select one file with Load Audio; the waveform fills the lane and the filename is shown as a label.
• Multiple tracks — Select several files at once with Load Audio (hold Ctrl/Shift in the file picker), or use + Track to append one file at a time. Each track is drawn in serial order at its correct time position. The filename of each track is shown as a sticky label: it remains visible at the left of the visible area even while scrolling or zooming so you always know which track you are looking at. A subtle boundary marker separates each track. The tracks play one after another automatically.

Transport Controls

The transport bar is embedded in the timeline toolbar:

The timecode display on the right of the transport bar shows the current playhead position as hh:mm:ss:ff. A seek bar and elapsed/total time counter in the top toolbar mirror the same position. Clicking anywhere on the ruler or an empty lane jumps the playhead to that time; the next Space or play button press starts from there.

Grid & Snap

• Grid checkbox — Toggles vertical grid lines across all lanes. When enabled, clip edges, fade handles, and the playhead automatically snap to the nearest grid line while dragging.
• Grid interval selector — Sets the spacing between grid lines. Auto picks a sensible interval based on the current zoom level (the same spacing used by the ruler).
• Snap: Clips checkbox — When enabled, clip edges and fade handles also snap to the start/end points and fade-handle positions of other clips on any layer, making it easy to align fades precisely across tracks.
• A teal dashed indicator line appears during a drag to show the active snap target.

Layer Lanes

One row per layer, each starting with a full-span clip block. Layers are listed in the same order as the Layers panel.

Multiple Clip Blocks

Each layer can have multiple visibility blocks for full flexibility over when it appears:

• Add a block — Double-click on an empty area in a layer lane to create a new clip block at that position (default width: 5 seconds).
• Remove a block — Right-click on an existing clip block to delete it.
• All blocks on the same layer behave independently and can each have their own fade-in and fade-out transitions.

Editing Clips

• Move — Drag the middle of a clip block to shift it in time
• Resize start — Drag the left edge of the clip to change when the layer becomes visible
• Resize end — Drag the right edge to change when it stops

Fade In & Fade Out

Each clip block shows two small triangle handles at the top edge:

• Left triangle (fade-in) — Drag rightward to set the fade-in duration. A dark-to-transparent gradient inside the block shows the fade region.
• Right triangle (fade-out) — Drag leftward to set the fade-out duration. The gradient appears on the right side of the block.

Handles are always present even when the fade duration is zero (shown slightly dim). The opacity of the layer is automatically interpolated from 0 to full opacity during the fade-in, and back to 0 during the fade-out. This works correctly during both live preview and video export.

Fade handles snap to the same targets as clip edges: grid lines (when the grid is enabled) and the start/end edges and fade-handle positions of other clips (when Snap: Clips is on). The teal snap indicator line and the duration tooltip appear during the drag, just like when moving or resizing a clip.

Navigation

• Click anywhere on the ruler or an empty lane area to jump to that time position
• Mouse wheel — Scroll the timeline horizontally
• Ctrl + Mouse wheel — Zoom in or out, anchored at the cursor position. Zooming out is limited to the level at which all loaded tracks fit exactly in the visible area.
• Drag layer names (left column) up or down to scroll the lane list vertically when there are more layers than fit in the timeline view

Export

MusicViz renders video entirely in the browser using the WebCodecs API — no server upload required.

Settings (toolbar)

• Resolution — 1280×720 (HD), 1920×1080 (FHD), 2560×1440 (QHD), 3840×2160 (4K)
• FPS — 24, 30, or 60 frames per second
• Bitrate — Higher bitrate = better quality and larger file size. 40 Mbps is a good default; use 80 Mbps for 4K.
• Format — WebM (VP9 + Opus) or MP4 (H.264 + AAC)

Process

1. Configure the settings above and click Export
2. Rendering happens offline (faster than real-time) — a progress bar shows the current frame
3. The finished file is automatically downloaded when complete
4. Click Cancel at any time to abort

Format Notes

• WebM works in all modern browsers and is always available as a fallback
• MP4 is supported in Chrome; Firefox and Safari will fall back to WebM regardless of the format selection
• All timeline clip ranges and fade transitions are baked into the exported video

Project Save / Load

Use Save to export the current project as a JSON file. The following is preserved:

• All layers with their properties, clip positions, and fade-in / fade-out values
• Timeline view state: zoom level, scroll position, and FPS setting
• Grid settings (enabled state and interval) and Snap: Clips setting
• Audio track filenames and durations — so the timeline displays the correct track layout and labels after loading the project

Use Load to restore a saved project. Audio and video files are not embedded in the project file. When a project is opened, two reload dialogs may appear in sequence:

• Reload Audio Tracks — lists every saved audio track by name. Click Browse… next to each track to select the original file from disk. Once all tracks are re-selected the dialog closes and the waveforms are restored.
• Reload Video Files — lists every Video layer that has no loaded source. Click Browse… to re-select the corresponding video file. Both dialogs have a Skip button to dismiss without loading files.

Undo

MusicViz keeps a full project-state history so you can step back through your changes:

• Ctrl+Z (or the ↩ Undo button in the toolbar) undoes the last action. Each press steps back one level.
• Every discrete action is captured as one undo step: adding, removing, or reordering a layer; toggling visibility; editing a property (slider drags are batched into a single step); moving, resizing, or deleting a clip block; cut / paste / split; and adding a new clip block by double-clicking.
• Hist: input in the toolbar sets how many steps are kept in memory. Default is 20; you can raise it up to 500 for the current session. Loading a project clears the history.
• Undo is blocked while an input, textarea, or select element has focus, so you can still undo text edits with the browser’s native undo before committing.

Changelog