Documentation

Quickstart

BiepBop turns an audio file into a video whose visuals are driven by the sound itself — in real time, with no hand-keyframing. You'll have a render in a few minutes, and nothing ever leaves your machine.

• Open the editor — it runs entirely in your browser, no account, no install.
• Drop in audio — an MP3 or WAV file. It's decoded and analyzed on your device.
• Add a layer and wire a frequency band to a parameter.
• Export to any aspect ratio. Your audio is muxed back into the .mp4.

Importing audio & media

On import, BiepBop decodes the file with the Web Audio API and runs an analysis pass that splits the signal into frequency bands sampled per frame. Your source file is never altered and never uploaded.

Analysis resolution

The spectrum is read every frame, so fast transients — hi-hats, snare hits — stay in sync with the visuals. Export doesn't re-record your track in real time: it re-runs the exact same analysis offline, frame by frame, which is both faster and immune to you switching tabs.

Multiple tracks

Drop in more than one file and they sit on their own lanes in the timeline, each with its own position, trim, fades, gain and mute. The visuals react to the mix.

Drop anything, anywhere

Drag files from your desktop onto any part of the editor — several at once is fine. An overlay tells you what will happen before you let go:

• Audio becomes a new track.
• Images (PNG, JPG, WebP, SVG, AVIF) become image layers, placed where you drop them on the canvas.
• GIFs and videos (MP4, WebM, MOV) become video layers. Drop a video on the timeline instead and its soundtrack is added as an audio track.
• An animated GIF on a picture — an image layer, the Background image or a visualizer's center logo — plays there in step with the timeline, like a GIF layer, in the preview and the export.
• A project file (.json) opens that project; if you have work open, it is backed up first.
• Lyrics and subtitles (.lrc, .srt, .vtt) fill the selected lyrics layer, or become a new one.

Dropping a single image or GIF inside the selected image layer replaces its picture (on the Background layer it becomes the background image). Hold Alt / Option to always add a new layer instead. Drop an image, GIF or clip on a layer's own media button (+ background image, + image / logo, a visualizer's center logo, + load video / gif) or on the row of a background, image or video layer in the layer list, and it goes into that layer. You can also paste an image from the clipboard with Ctrl + V (⌘ + V on a Mac). On a phone, Add → From your device opens the photo, video and music pickers.

Built-in loops

No track at hand? ＋ loop in the audio panel adds one of several royalty-free loops that BiepBop generates on your device — different tempos, keys and moods, plus a drums-only loop. They are yours to use in any video.

Project anatomy

A project is a stack of layers rendered bottom-to-top every frame. Each layer is one of 14 types — visualizer, WebGL shader, text, image / logo, video / GIF, lyrics, shape, shape grid, gradient, mask, audio meter, clock, progress bar and background. Every layer carries its own blend mode, opacity and reactivity.

{
  "size": [1080, 1920],
  "fps": 60,
  "layers": [
    { "type": "viz",  "style": "circle", "reactTo": "bass" },
    { "type": "text", "text": "MIDNIGHT DRIVE" }
  ]
}

Simple and Pro settings

The properties panel has two views, switched with Simple / Pro at its top (on a phone, at the top of the Properties sheet). Both edit the same layer: switching never changes a value, and undo, autosave and export work the same in either view.

• Simple shows the few settings that matter most for each layer type, under plain headings — Look, Movement, Where, Appear and disappear — and explains every one in a line of everyday words ("Smoothness — lower = snappy and nervous, higher = calm and flowing"). A visualizer gets its style, colors, size, how much it moves, what it reacts to (the whole song, the bass, voices, cymbals or the beat), smoothness, a jump on the beat and its place; a text layer its words, ready-made styles, font, size, color, boldness, shadow, how it comes in and goes out, and its place; a background its ready-made looks, kind, colors or picture (with blur, darken and gentle motion). Show all settings at the bottom opens Pro.
• Pro is the full panel with every setting.

The choice is remembered in your browser, not in the project. A new browser starts in Simple; a browser that already had a saved session when this view arrived starts in Pro.

Finer control

The setting sliders — in the properties panel (both views), Global effects and Reactivity — take exact values:

In Pro, every control explains itself in plain words: hover over it, or reach it with the keyboard and the explanation (and a slider's keys) appears under it. Screen readers read the same text as the control's description.

Fine-tuning

Pro's Fine-tuning section shows render settings the panel didn't show before — only those the renderer really uses, drawn the same in the preview and the export:

• Color shift — turns every color of the layer by the same amount around the color wheel (visualizers with your own colors, blended and moving backgrounds, gradient overlays, shaders, meters and shape grids; text, clock and lyrics while their colors animate). Echo layers that follow the main colors get their own Color shift, and one with its own color can follow the main colors again.
• Seamless color loop — the last color blends back into the first, so a palette repeats without a hard edge.
• Responsiveness for shaders, audio meters and shape grids (visualizers already had it), and Shape size for shape grids.
• Color animation for text: a color cycle, a set of colors to cycle through, its speed, and the next color on every beat.

Layers & blend modes

A project renders its layers from the bottom up, compositing each one onto the frame below. Stack a glowing visualizer under a logo under a title without ever leaving the editor — the preview updates live as you reorder.

Blend modes

Blend modes decide how a layer combines with what's beneath it. Screen and Add (lighten) are the workhorses for light-on-dark visuals; Multiply is handy for tinting. Set it per layer under BLEND, or for a whole multi-selection at once.

Text & image layers

Beyond the reactive visualizers you can drop in text, image / logo, video / GIF and lyrics layers. These react too: wire a band to opacity or size and your title pulses with the music.

• Text — type in the panel or double-click the text on the canvas. Choose a font and weight (see Fonts below), alignment, size, letter and line spacing, uppercase and a shadow, plus glow, outline and a pulse on the bass.
• Image / logo — any image your browser can open (PNG, JPG, SVG…; an animated GIF plays in step with the timeline), with size, rotation, rounded corners, a circle mask, flips, a border and a drop shadow that follows the picture's transparency. Fit to canvas, Fill canvas and Use as background are one click away. A logo can also sit in the center of a radial visualizer (see Visualizer styles).
• Video / GIF — MP4, WebM and MOV clips, and animated GIFs, which play frame-accurately in the preview and the export. Use as background fills the frame and moves the clip to the bottom of the stack.
• Lyrics — timed lines from pasted text, an .lrc, .srt or .vtt file, shown line by line or word by word (see Lyrics & karaoke).

Fonts

Text, lyrics and clock layers share one FONT picker. It shows every font in its own face, set in your layer's own words, in three groups:

• Built-in — Space Grotesk (Sans) and JetBrains Mono (Mono).
• Library — open-license (SIL OFL) fonts that ship with BiepBop: Montserrat (bold display), Bebas Neue (condensed caps), Playfair Display (serif), Pacifico (script), Caveat (handwritten), Fredoka (rounded), Press Start 2P (pixel / retro) and Orbitron (techno / wide). Each is fetched the first time you open the picker or a project uses it.
• Your fonts — upload a TTF, OTF, WOFF or WOFF2 file of up to 10 MB with ＋ Upload font… at the bottom of the picker, or drop it anywhere on the editor: with a text, lyrics or clock layer selected it is applied to that layer, otherwise it arrives as a new text layer set in it. On a phone: Add → Font in the tab bar. A file your browser can't read as a font is refused with a message.

WEIGHT follows the font: a variable font offers its real weights, a font with a single weight offers Regular and a Bold that the browser draws heavier. Copy style / Paste style carries the font along.

Lyrics & karaoke

A Lyrics / subtitles layer shows one line at a time, from the line's own time on the timeline until the next line starts. Lines can also be timed word by word, for karaoke lyrics and TikTok-style captions.

Getting the lines in

• Import in the layer's properties takes pasted text or Open file…: plain text (one line per row, placed 2 s apart to start with), LRC with a [mm:ss.xx] time per line, enhanced LRC with a <mm:ss.xx> tag before every word or syllable, or SRT / WebVTT subtitles. Replace swaps the layer's lines, Add merges them in.
• Drop an .lrc, .srt or .vtt file anywhere on the editor: it fills the selected lyrics layer, or arrives as a new one.
• Edit the list directly: the time button moves a line to the playhead (its word timings move along), ＋ line at the playhead adds one, and an empty line clears the screen. Fixing a typo keeps the words' timings. The ♪ after a line says how many of its words are timed.

Display modes

Inactive opacity is how visible a word is before it is sung: 0 keeps it hidden until then (words appear one by one). Lines without word timings are spread evenly over their time, so every mode also works with line-by-line lyrics. In every mode the last line stays at least 4 s, longer when its timed words run past that (until about a second after the last one). Font, weight, color and color motion, glow, shadow, animations and color effects apply in every mode; long lines wrap to fit the frame. Like everything else, the preview at any playhead is exactly the exported frame.

Tap to sync

Open ♪ Tap to sync… in the layer's properties, choose Word by word or Line by line, play the track and press Space or J — or the big tap button, on a phone — the moment each word (or line) starts. The card shows the line you are on with the next word marked.

• Hold the key on a long note: the word lasts as long as you hold it.
• Backspace steps back one tap and rewinds 2 s so you can tap it again; K plays or pauses; Esc closes the card.
• ⤷ next to a line syncs from that line on, with a 2 s run-up.
• Nudge all moves every line and word 0.01 or 0.1 s earlier or later — handy when an imported file is a little off.

A tap is stored as the moment you heard the word: the time the key went down, minus your audio output's delay. Times are kept to 1/100 s, the precision of LRC files, and every change can be undone.

Exporting the lyrics

⤒ .lrc downloads the lines as LRC — enhanced LRC with word tags when words are timed — which BiepBop reads back exactly: every line, word, syllable, held note and word without a time of its own. (Where an untimed word follows a held one, its end tag is written twice, <01:02.50><01:02.50>; other karaoke players read that as an ordinary tag, and players that only know plain LRC still show the lines.) ⤒ .srt downloads subtitles for YouTube or a video editor, one cue per line; ⤒ .vtt the same as WebVTT, with the word times as karaoke timestamps. Subtitle files have no held notes, and a gap of under 0.05 s between two lines closes when they are read back. Word timings are saved in the project file, the autosave and the Projects library.

Backgrounds

The Background layer sits at the bottom of the stack and sets the mood of the whole video. Start from one of the preset swatches at the top of its properties, then make it your own.

Frequency bands

Every reaction starts from the live spectrum: 96 logarithmically spaced bins from 30 Hz to 16 kHz, re-read every frame. Those bins are pooled into three core bands; energy and beat sit alongside them, and you can define your own custom Hz range too.

Each band is auto-ranged as the track plays, so a quiet mix still moves and a loud one doesn't pin at maximum — the numbers your layers see are always 0–1.

Parameter mapping

Mapping is the core idea: link a property to a source and it follows the audio every frame, in the preview and in the export. In a layer's properties open Audio automation, press ＋ Automate property, pick the property, and tune its row.

The automation row

Each automated property gets one row with these controls:

What you can automate

On a visualizer layer: Glow, Intensity, Sensitivity, Rotation, Width (X), Height (Y), Amplitude, Line width, Spin speed, Swirl speed (particles) and Opacity. Position X, Position Y and Opacity can be automated on every layer type, and each type adds its own properties (text size, image corners, shader zoom…).

Curves & smoothing

Raw band values are twitchy. Every automation row and every named analyzer has a Curve — a single exponent you drag from 0.3 to 3 — that reshapes the response before it reaches the parameter.

Smoothing

A named analyzer adds inertia on top: attack sets how fast its value rises to a transient, release how slowly it falls back. A touch of release prevents strobing on busy mixes. Layers themselves carry a sensitivity and a smoothing control for the same reason.

Named analyzers

Open the Reactivity panel and add analyzers under ANALYZERS: named frequency ranges you can pick as a source in Reacts to, in Audio automation and in the Global effects. Each has a live level meter and these controls:

Beat detection

BiepBop derives a beat onset from the bass transient that you can use like any band — perfect for one-shot reactions right on the hit.

• Beat punch — extra pop on every detected kick, on any visualizer (Reaction & size).
• Bounce on the beat — the core, or your center logo, jumps on each kick (Circle, Center, Rings, Arcs, Dots, Sunburst, Pulse rings, Tunnel, Kaleidoscope, Galaxy, Polar rose, Particle burst and Radar).
• Switch color on the beat — under Color animation, with your own colors.
• Camera shake — shakes the whole image on the beat or a band, set in the Reactivity panel.
• Beat as a source — on any automation row or effect.

Visualizer styles

44 visualizer styles ship in the box, grouped into 6 families in the style picker. Each reads the live spectrum directly, and switching style keeps the layer's colors, reactivity, placement and automation. The picker also has Custom, where you build your own style instead of choosing one (see Design your own visualizer).

The newest styles

• Mountains (Grid & 3D) — a synthwave wireframe landscape rolling toward you: a flat road, mountains that grow with the part of the spectrum under them and a striped sun. Set the depth, grid density, speed, peak height and road width; turn Solid ground off to keep only the lines over your footage.
• Silk (Waves) — see-through ribbons flowing over each other, each one listening to its own part of the spectrum, mirrored into lens shapes like a voice assistant.
• Helix (Grid & 3D) — a turning DNA double helix whose rungs are the spectrum, lows on the left.
• Liquid (Organic) — glossy drops that drift, swell with the music and melt together like a lava lamp.
• Audiogram (Bars) — the podcast waveform: the loudness of the last seconds scrolling left, mirrored around a center line or standing on the floor.
• Radar (Radial) — a circular spectrogram: a sweeping hand writes the spectrum around the circle, so the last few seconds stay visible and the beat reads as spokes. Room for your logo in the middle.
• Sphere (Particles) — a turning globe of dots that the music pushes outward into spikes.
• Lasers (Radial) — a club laser show: beams fan out from the bottom, the top or two crossed corners and swing with the track.

Their options sit under Shape options in the Pro view like every other style's, each with a one-line explanation when you point at it or tab to it; double-click a slider to go back to the default. Four Built-in looks show them off (Project → Built-in looks): Night Drive, Podcast Wave, Laser Club and Lava Lamp.

Styles and their shape options

Every style has its own Shape options: counts, line widths, rotation speeds and more. The table lists them per style with each slider's range, read straight from the editor, so it matches the panel exactly.

Looks & color

The Color section starts with LOOK. House is the default: a white core line with a rainbow glow. Neon is a second built-in look, offered on Wave, Spectrum, Scope, Terrain, Ribbon and Circle. Custom uses your own colors. Neon Ribbon always renders its fixed look; only its shape reacts.

• Color mode — Solid, Gradient or Palette, with quick looks and your saved colors and palettes.
• Color animation — Hue rotation, Shift palette and Switch color on the beat.
• Color FX — None, Noise or Glitch, with FX intensity, FX speed and Audio drive.
• ↺ Reset colors — back to the House look, clearing palette, animation and color FX.

Reaction & size

How hard and how smoothly a style moves. In the Compact panel layout these live under Reactivity & motion.

Center logo & beat bounce

Circle, Center, Rings, Arcs, Dots, Sunburst, Pulse rings, Tunnel, Kaleidoscope, Galaxy, Polar rose, Particle burst and Radar have an open center. Upload a PNG under Logo (center), then set Show logo, Ring around logo, Zoom and its position. Bounce on the beat makes the core, or the logo, jump on every kick, with a Bounce strength slider.

Echo layers

Echo layers: delayed, colored copies of this visualizer for a layered trail. Up to 9.

Add them under Sub-layers / echo. Each echo has its own controls:

Reactivity panel & settings

The Reactivity panel tunes how every visual reacts to the sound, live: Global sensitivity, band gain for Bass, Mid and Treble, dynamics (Attack, Release, Compression curve, Noise floor / gate, Auto-gain), analysis-only pre-processing (Bass boost, Pre-filter, Limiter), Camera shake and your named analyzers. Settings holds preferences saved in this browser, including Preview quality: Reduced lowers preview resolution, glow radii and echo counts on weaker machines, while exports always render at full quality.

The properties panel has two layouts for visualizers. Classic shows Style, Color, Reacts to, Reaction & size, Logo (center), Shape options, Position & size and Sub-layers / echo as separate sections. Compact regroups the same controls into Look & color, Reactivity & motion (with Beat & automation), Shape options, Placement (with Stretch, logo & echo), Layer & timing and Color effects.

Design your own visualizer

Pick Custom in the style picker and the visualizer draws a design of your own instead of a preset. The Design section takes the place of the shape options, with five cards. Everything else a visualizer has still applies: colors and the House look, glow, sensitivity and smoothness, automation, keyframes, animations, echo layers, the center logo and beat bounce.

Your own path (SVG)

Choose Path, then Import SVG path… with an .svg file (your logo, say), paste path data such as M12 2 L22 22 L2 22 Z, or try one of the sample shapes. BiepBop follows the longest outline in the file; Next outline steps through the others, and a plain background rectangle comes last. The outline is resampled once into 512 points and only those points are stored in the layer, so the file itself is not kept, and nothing is uploaded. Text, embedded images and scripts in an SVG are ignored.

Starting points

• ✎ Customize this style under the style picker turns Bars, Circle, Dots, Wave or Spectrum into a matching Custom design (same shape, count, frequency range and reach) to change from there.
• 🎲 Randomize makes a random design from combinations that look good together; Ctrl+Z goes back.
• Built-in looks: Halo, Neon Mirror and Dot Prism are Custom designs to open and change.
• Save as preset… stores the visualizer in Presets & looks → My presets, where you can export it as a .json file to share or back up.

Keyframes & automation

Two ways to move things over time. Automation rides the audio — any automatable property follows a source live (see Parameter mapping). Keyframes animate on a clock: under Keyframes (time) pick a property, move the playhead and press ＋ keyframe at current time; BiepBop interpolates between the keys.

Each key sets how the value travels to the next one:

A layer whose position or size is animated still moves like any other: its handles on the canvas sit where it is at the playhead, and dragging, resizing, rotating, the arrow keys or its position controls move the whole animation — every keyframe value, or the range of the automation, shifts by the same amount (sizes scale by the same factor). One undo step brings it back.

Animation

Every layer has an Animation section in its properties, so titles, logos and visuals can enter, leave and move without a single keyframe. Animations are timed from the timeline: scrubbing shows the exact frame, and the exported video matches the preview.

• In plays when the layer appears — at the start of its own time range, or else at the start of the export range (the in and out handles on the timeline, which is also what an export covers).
• Out plays when it ends — the end of its time range or of the export range; “Ends early” finishes it sooner.
• Loop runs continuously, and most loops can follow the music: a band, the beat or one of your named analyzers.

In & Out

Each has a duration, a delay and an easing (linear, ease out, ease in-out, back (overshoot), elastic and bounce). Typewriter works on text and clock layers.

Loop

Each loop has a speed and an intensity.

One-click combos

Title reveal, Pop & pulse, Float in, Glitchy and Cinematic fade set In, Out and Loop together. The ▶ button next to each row previews that animation on the canvas without moving the playhead, and the command palette has Animate: … commands that apply to every selected layer at once.

Timecode & chapters

The Clock / timecode layer writes time as text, styled like a text layer (font, color, glow, shadow, animations). Under SHOWS you pick what it says:

Markers

Markers name the parts of your track: the chapters of an episode, the tracks of a mix. Press M to drop one at the playhead, or use Project → Add marker at playhead. They sit in the MARKERS lane under the timeline's ruler: drag a marker to move it, click it to jump there, double-click to rename it, ✕ to delete it; with a marker focused, the arrow keys nudge it. The scrub bar shows them as small ticks. Markers are saved with the project, and every change can be undone.

YouTube chapters

Project → Copy YouTube chapters copies a list you paste into the video's description; YouTube turns it into chapters. Project → Chapters & markers… shows the same list, lets you type exact times and names, and checks YouTube's rules: the first chapter at 0:00, at least three chapters, each at least 10 seconds long. Times count from the start of the export range, and the chapter already running at the in handle is listed at 0:00.

0:00 Intro
1:42 Artist – First track
5:10 Artist – Second track

Beat grid & scenes

BiepBop knows the tempo of your track, so edits can land on the beat. The timeline's ruler marks every beat, with a longer line on each bar, and the SCENES row under the markers shows the tempo in BPM next to a magnet. With the magnet on, dragging a layer's time range, a keyframe, a marker, a scene's start or the in and out handles snaps to the nearest beat, or to bars when you zoom far out. Hold Alt (Option on a Mac) while dragging to place freely. Every drag is one undo step.

Tempo

The built-in loops and the demo tracks carry their own tempo, so their grid is exact. Other audio is analyzed on your device when it is added or moved: BiepBop finds the tempo, where the beats fall and which beat is the “1”, from the first 8 minutes of the timeline. The “1” is where the chords and the bass change and where a kick, not a snare, falls — so a beat with the kick on 1 and 3 still gets its bars right. Music that speeds up or slows down gets its average tempo. When a groove reads as two tempos, say 72 or 144 BPM, it picks the one between 70 and 140.

Project → Beat grid & scenes… (or the tempo on the SCENES row) lets you type the BPM, halve or double it, nudge it by 0.1, set the beats per bar and move the “1”. Or tap it: click TAP on every beat, and when you tap while the song plays, starting on a “1”, the grid also lines up with your taps. A tempo you set yourself stays when you change the audio; Detect again reads it from the audio again.

Checking the “1”

Press ▶ Play in the dialog: the light next to the tempo counts the beats and shows 1 where each bar starts. When the analysis isn't sure where that is — drums without chords, say — the tempo shows 1? and the dialog and the phone's Audio sheet say so, with the fixes:

• Beat 1 is here — the beat nearest the playhead becomes the “1” (while the song plays, the beat you hear as you click). The beats themselves stay where they are.
• ½ bar (Shift by half a bar) — the “1” moves two beats, the fix when it landed on the 3; ◀ beat and beat ▶ move it by one.
• It's right — keeps the “1” and stops flagging it.

Each fix is one undo step, and a “1” you fixed stays when the audio changes. “1” exactly at the playhead, under Where the grid sits, moves the whole grid instead: for a tempo you typed, put the playhead on a kick and click it. Beat 1 is here and the half-bar shift are also in the command palette.

Scenes

A scene is a part of the song, such as the intro, a verse, the chorus or the drop, with its own set of layers. ＋ on the SCENES row starts a new scene at the playhead (on a beat when snapping is on), and Turn markers into scenes makes one scene per marker, named after it. A scene lasts until the next one starts. On the timeline, drag the start of a scene to move it, click a scene to jump there and double-click it to rename it.

In the dialog's Scenes tab, tick which layers each scene shows (a group is one row), or use Shows in in a layer's Beat & scenes section. A layer ticked in every scene is not managed by scenes and shows all the time, as before. Inside its scenes a layer keeps its own time range, fades, animations and keyframes, and one layer can show in several separate scenes: a verse–chorus–verse–chorus song needs each look only once.

With a tempo, transition lengths are chosen in beats, from a quarter beat to one bar. The exported video shows the scenes and their transitions exactly as the preview does.

On the beat

Select a few layers and choose Cut between them: they take turns, one every 1 to 16 beats (a single layer blinks). Pulse on the beat gives the selection a Heartbeat loop on the beat grid, a pulse exactly on every beat. Both are in the properties panel of a multiple selection, the Scenes tab and the command palette, and any loop animation can follow Beat grid (tempo) under Reacts to.

Effects & shaders

Stack a chain of 20 post-effects over the finished frame in the Global effects panel, plus 5 WebGL shader layers (Plasma, Tunnel, Fractal flow, Fluid and Starfield) for the things Canvas 2D can't do. Every effect can be switched on and off, and 10 of them can react to the audio themselves — point one at a band and the glitch lands on the beat.

Bloom (GPU), Chroma (GPU), Twirl, Bulge / Pinch, Fish-eye, Kaleidoscope, Polar and Wave / ripple run on the GPU (marked ✦ in the menu).

Audio & color FX

Per-layer color grading (brightness, contrast, saturation, hue) and an analysis-only audio pre-FX stage (bass boost, filter, limiter) let you shape both the picture and what the visuals react to.

Audio pipeline

BiepBop renders the video against your track and muxes the audio back into the file — entirely on your device. The picture is encoded with WebCodecs as H.264; the audio is encoded to AAC, with an Opus fallback when the browser can't encode AAC.

Export & presets

One project renders to every feed. Pick a platform preset or set a free custom width × height; BiepBop re-frames the composition for each aspect ratio.

Resolution & frame rate

Every preset renders at 720p, 1080p, 1440p or 4K, at 30 or 60 fps — or set a fully custom width × height up to 7680 px. Nothing is gated: 4K is as free as 720p.

An export covers the export range between the in and out handles. Timecode layers count over that range, and Project → Copy YouTube chapters lists your markers relative to its start (see Timecode & chapters).

Render in the background, start the next video

Clicking Render takes a copy of the project as it is at that moment — the layers, pictures, videos and GIFs, fonts, the audio tracks with their placement, volume and fades, the analysis settings and analyzers, markers, beat grid and scenes, the range and the global effects — and renders from that copy in the background. You don't have to wait for it: keep editing, open another project from the Projects library or start a new one (the Exports panel has a New project button while it renders). Each file comes out exactly as the project was when you clicked, and a badge on the Exports button tells you when one is ready.

• One after another — renders queue up and run in turn, from as many projects as you like. The Exports panel shows which project each file comes from and when it was queued.
• Keep the tab open — the render runs in this tab (it keeps going when the tab is in the background). Closing or reloading the page while an export waits or renders asks first.
• Memory — a waiting export keeps its project's audio as the file you added (compressed: a few MB per song) and decodes it only when its turn comes, then lets go of the decoded sound again once it is analyzed and mixed. Audio that has no file of its own — the demo beat, the built-in loops, and a video's soundtrack until the project is opened again — waits decoded, about 20 MB per minute of stereo sound. A finished export lets go of its copy.

Several formats in one go

Under the format cards, Also export adds more formats to the same render: tick any of the other ratios (16:9, 9:16, 1:1, 4:5, 21:9) and the button becomes Render 2 videos, Render 3 videos and so on — one file per format, queued in a row. Each file gets the size of its format at the chosen resolution; everything else is the same for all of them — the export range, frame rate, file type, audio and Transparent background. The project is copied at the click, so edits you make while the files wait in the queue don't change them. The size is part of every file name (Midnight Drive_1080x1920_30fps.mp4), so the files never overwrite each other.

• One analysis, one message — the files of one click share a single audio analysis and mix (the extra formats only cost their own rendering; each file is the same as a separate export of that format), and the batch ends with one notification, such as 3 videos done — 16:9 · 9:16 · 1:1, that also says which ones failed or were canceled. Each file keeps its own row with its progress in the Exports panel.
• Where they go — Fixed folder: all of them into that folder. Ask every time: you pick one folder for the whole batch. Keep in app: they wait in the Exports panel.
• Spotify Canvas isn't offered here: its 3–8 s loop has its own length, cross-fade and audio rules, so render it on its own.

Per-format placement

Positions and sizes are fractions of the frame, so a layout made for 16:9 usually needs a few tweaks in 9:16. Switch the preview to that format with the buttons above it, select a layer and set Placement, at the top of its properties, to Only 9:16. From then on dragging, resizing and rotating it on the canvas, the arrow keys, Align and the position and size controls change that layer in 9:16 only; the other formats keep the shared placement. Select several layers to switch them together. All formats drops the layer's own placement again (Undo brings it back).

• The preview in a format shows exactly what the file in that format gets, and in a batch every file uses its own format's placement.
• Placement follows the ratio: Reels / TikTok and Spotify Canvas are both 9:16, and a custom size uses its own ratio (or the preset ratio it matches).
• It covers position, size (width and height, text size, image scale, progress bar width) and rotation of the layers you can move on the canvas, a Background's position and zoom (the picture's focus point, or a radial gradient's center) and a Mask's position and radius — those two with their controls in the panel. Style, colors, timing and everything else stay shared.
• Animated layers — keyframes and audio automation belong to the layer and play in every format. A layer's own placement in a format is where it rests there, and its animation plays relative to it: shifted by the difference in position and rotation, scaled by the difference in size. A title that flies in from the left in 16:9 flies in the same way in 9:16, only lower and smaller if that is where you put it. Moving it with Only 9:16 on moves where the animation plays in 9:16; with All formats it moves the keyframes themselves, in every format without a placement of its own. The Placement row and the keyframe and automation lists show the shift (for example X +0.10 · Size ×0.80).
• In the export dialog, a dot on an Also export chip means some layers have their own placement in that format.
• It is saved with the project — autosave, the Projects library and project files — and kept when you duplicate or copy a layer. Presets, looks and Copy style don't carry it.

Spotify Canvas mode

Choosing Spotify Canvas — the Canvas button above the preview, or the preset in the export dialog — switches the editor into Canvas mode for Spotify's looping video. At the time of writing, Spotify's guidelines ask for 9:16, at least 720 px tall and 3–8 seconds, and a Canvas plays without sound; check Spotify for Artists for the current spec.

• Length — the export range (the timeline's in and out handles) must give 3–8 s. In Canvas mode the handles stay inside that window and a tag on the scrub bar shows the length. The export dialog won't render outside it and offers Use 8 s from the playhead and Use the loudest 8 s; the file never runs past 8.0 s.
• Seamless loop (on by default) — the render starts a moment early and cross-fades the last 0.25–1 s of the video into the frames that come just before its first frame, so the last frame leads straight into the first. A range that starts at 0:00 has nothing before it: the cross-fade then uses the start of the range, and the video is that much shorter. At high resolutions and frame rates the cross-fade may be shortened to fit in memory (the dialog says so). The editor's loop playback shows the plain range; the cross-fade happens in the export.
• Loop animations — with Seamless loop on, each layer's Loop animation (Float, Pulse, Sway, Spin, Heartbeat, Glow pulse) is retimed for the export to the nearest speed that completes whole cycles in the video's length. The dialog lists the changes; your project keeps its own speeds. Shake, Flicker, Glitch and loops that only follow the audio have no cycle and are left as they are.
• Audio — off by default: the file then has no audio track at all. Switch on Include audio to keep the sound.

Transparent overlays

Switch on Transparent background in the export dialog to render only your layers — the visualizer, titles, lyrics, logos — on a see-through background, to lay over footage in a video editor or add to a scene in OBS. Everything else renders exactly as in the preview. Preview transparency puts a checkerboard behind the preview wherever the file will be see-through (the Transparent preview ✕ tag on the canvas turns it off), and Save frame as PNG then saves a transparent still.

• WebM with alpha — VP9 video (VP8 where the browser has no VP9 encoder) with an alpha channel. It plays with its transparency in Chrome, Edge and OBS. With VP9 the alpha channel is lossless: see-through areas stay exactly see-through, and soft edges and glows keep their exact values — the same matte as the PNG sequence. That makes the file larger than an ordinary export; the size estimate in the dialog includes it. Video editors differ: check that yours imports WebM with alpha before you rely on it, and use the PNG sequence if it doesn't. The dialog offers WebM only after a quick test that this browser can make such a file and play it back.
• PNG sequence — one lossless PNG per frame, transparency included, in a .zip (frame_00001.png, frame_00002.png …). Large — about three times the size of the WebM (the dialog shows an estimate) — but it works in every browser that exports, and desktop video editors import numbered image sequences. With a save location picked, the archive is written to disk while it renders.
• Audio — off by default, since overlays usually go without sound. Include audio adds the track as Opus in the WebM, or as audio.wav in the .zip.

Using the file:

• OBS — add the WebM as a Media Source (or use it in a Stinger transition); the see-through parts show your scene.
• Premiere Pro / After Effects — unzip the PNG sequence, choose File → Import, select the first frame and tick Image Sequence; set its frame rate to the export's (Interpret Footage) if it differs.
• DaVinci Resolve — unzip the PNG sequence and add the folder to the Media Pool: the numbered frames come in as one clip.
• Other editors, CapCut included — check whether yours keeps the transparency of a WebM, or imports image sequences.

Where files land

The Save to setting in the export dialog decides what happens when a render finishes, and it's remembered between sessions.

• Ask every time — pick the filename and location up front; the finished file is written straight there.
• Fixed folder — choose a folder once and every export lands in it automatically, numbered so nothing is overwritten.
• Keep in app — keep the file in the Exports panel and download it when you're ready.

Saving your work

Everything is stored locally in your browser. Projects autosave as you go, and a project library, reusable presets and a media browser keep your assets one click away — all in IndexedDB, never on a server.

• Autosave — your work is restored when you come back. A chip next to the project name shows the save state, and warns you if a save ever fails.
• Projects library — save, open and delete named projects with thumbnails. Ctrl + S saves over the current project; Shift + Ctrl + S saves it as a new one.
• Presets & media — reuse layer setups and imported images, video and audio.
• Backups — starting a new project, applying a template or opening a project backs up what you had first. File → Restore backup brings it back.
• Project files — File → Download project file (.json) writes a copy you can archive or move to another machine, media included.

Install & offline

BiepBop can be installed as an app. It then opens in its own window straight into the editor, keeps working without an internet connection after your first visit, and — in Chrome and Edge on a computer — can be picked in your system's “Open with” menu for audio files.

• Chrome and Edge (desktop and Android) — Help → Install app… in the editor, or the install button in the address bar.
• iPhone and iPad — in Safari, tap Share → Add to Home Screen. The editor's menu shows the steps.

When a new version is published, a small banner offers to reload. It never reloads on its own, waits for an export to finish, and saves your work first. Settings → App shows the offline status, how much storage your projects use, and a Keep my work option that asks the browser not to clear BiepBop's storage when space runs low.

Keyboard shortcuts

The studio is built to be driven from the keyboard. This is the full list — the same one the editor shows when you press ?, so it cannot fall behind the app.

FAQ