AnimateCloth Physics Free directly in your browser.

Spandolab is your animation playground. No signups, no logins, no subscriptions. Draw vectors, animate keyframes with custom bezier curves, drop in Box2D physics & 3D models in seconds, and export production-ready SVG, Lottie, WebM, MP4, GIF, or interactive HTML sandboxes in one click.

Explore the full power of Spandolab.

The exact same comprehensive guide built into the app — browsable, searchable, and always up to date.

How to use Spandolab

Getting started

Spandolab is a browser-native keyframe animation editor. You draw shapes, text and images on an artboard, animate their properties over time on the timeline, layer on physics or effects, and export to SVG, GIF, Lottie, WebM or MP4.

Everything stays in this browser

Projects autosave to this browser’s local storage about a second after each edit — there’s no account and no cloud. The Gallery is your home screen: create a new animation, import files, or open, rename, duplicate and delete existing ones. Use Settings → Library to back up or restore everything as a single JSON file.

The workspace

  • The toolbar across the top holds the drawing tools, alignment, rulers and undo/redo.
  • The Layers panel on the left is your object tree — order, nesting, groups, masks and visibility.
  • The Properties panel on the right edits whatever is selected — transform, color, effects, physics and more.
  • The Timeline along the bottom holds keyframes, easing and playback.

Toolbar & tools

Pick a tool from the toolbar (or its shortcut), then draw on the artboard.

Select (V)

The default pointer. Click a shape to select it, drag to move or resize, drag on empty canvas to rubber-band marquee-select, and double-click to drill into a group.

Rectangle (R) & Ellipse (O)

Drag on the canvas to draw. A single click without dragging drops a default 120×120 shape. Hold Shift to constrain to a perfect square or circle.

Pen / Line (P or L)

Click to place path vertices; click-drag on a point to pull a smooth bezier handle. Click the first point again, or press Enter, to close/finish. Hold Shift to axis-constrain, Esc to cancel.

Pen mirror (M)

Toggles symmetrical drawing — points are mirrored across an axis into a closed symmetric shape. The toolbar exposes vertical / horizontal / off.

Text (T)

Click anywhere to drop a text layer, then edit its content and type in the Properties panel.

Hand / Pan (H)

Drag to pan the canvas. You can also hold Space with any tool.

Alignment & rulers

Align selected layers left/center/right/top/middle/bottom, or distribute evenly (needs 3+ selected). Toggle rulers with Shift+R.

Flip & rotate

Flip Horizontal , Flip Vertical , Rotate 90° Left and Rotate 90° Right act on the selection. A plain left-click applies the change in place (base value and every keyframe flip/rotate together). Right-clickone of these buttons for “Add animation to timeline” — it authors a one-shot ~300 ms hold→land transition at the playhead, so the layer animates into the flipped/rotated pose instead of just snapping.
Tip — Drop image, SVG, JSON, 3D (OBJ/GLB/GLTF), video or audio files straight onto the artboard to import them.

Layers panel

The left panel is the object tree. Rows are shown in paint order (top row = frontmost) with a type icon, an inline-editable name, and eye (visibility) and lock toggles.

Reorder & nest

Drag rows to reorder them or drop one into a group to nest it. Groups are collapsible and can be nested arbitrarily.

Right-click for actions

The context menu gives you Rename, Duplicate, Copy/Paste, Group / Ungroup, mask actions, Goo, Mesh, and text-only Convert to outlines / Rasterize to image.

Masks

Apply a layer as a mask over its sibling(s) to clip them to its shape. Mask rows offer Edit Mask (adjust the mask in place) and Release Mask.

Row badges

Small badges flag what a layer carries: Mask, Goo, FX (effects), Mesh, a physics role glyph, a blue paperclip (member of a physics-link group), and Animated SVG.

The Canvas row

Selecting the artboard row lets you edit the canvas size, frame rate and background, and enable world physics.

Properties panel

The right panel edits the selected layer. Every animatable row has a ◆ keyframe dot — editing a value adds a keyframe automatically once the property is animated.

Transform

Position X/Y (with a link toggle), Scale X/Y, Rotation (plus a “turns” stepper for full spins), and Skew X/Y. A Reset button clears distort/3D.

Fill & Stroke

Two compact paint rows, told apart by a leading icon: is the Fill and is the Stroke (the line). Each paints as Solid, Linear or Radial gradient — with neon gradient presets and a stops editor.

Animated gradients

Gradients tween between keyframes, not just snap. Add a gradient keyframe at two times and the colors, stop offsets, opacity and angle interpolate smoothly in between; even changing the number of color stops crossfades instead of popping. (A Linear↔Radial type switch can’t be interpolated, so it flips at the midpoint.) Add a stop only with the Add new color button — it drops one in the widest gap using the current color. Drag a stop’s handle to reposition it; “Remove stop” appears once there are more than two.

Stroke & dashes

Stroke adds width, cap, alignment and an animatable dash / gap / offset for marching-ants effects. The Set dash to line lengthbutton measures the selected line’s exact pixel length into the dash & gap fields — then animate the dash Offsetfrom that length down to 0 for a clean “draw-on” reveal, no manual measuring.

Shape & path

Convert a primitive into an editable path, then set node types (Corner / Smooth / Asymmetric / Cusp), open or close the path with Scissors, and keyframe the path itself to morph between shapes. A motion-path section shapes the trajectory a layer travels.

Per-layer loop

Replay a single layer’s own animation on a loop (count 0 fills the whole timeline evenly and gaplessly) — handy for spinners and repeating accents.

Multi-selection

With several layers selected you get batch color/opacity edits and quick “Group” / “Group & Apply Goo” cards.

Motion Presets

Don’t want to place keyframes by hand? The Motion Presets section in the Properties panel is a one-click animation library — pick a card and it authors the whole animation for you on the selected layer.

Hover to preview, click to apply

Hovering (or focusing) a card live-previews it on the actual object without touching your project — leave the card and the exact frame snaps back. Clicking applies it for real and grows the layer’s out point (and the composition) so the animation isn’t clipped.

What’s in the grid

Around 30 presets, grouped so they’re easy to browse:
  • Enter — Fade In, Slide In, Pop In, Blur In, Flip In, Roll In, Flip Reveal, Drop In.
  • Exit — Fade Out, Slide Out, Shrink Out.
  • Emphasis — Pulse, Heartbeat, Float, Shake, Wiggle, Tada, Jello, Rubber Band, Flash, Card Flip.
  • Motion — Bounce, Swing, Spin, Coin Flip, Tumble, Drift, Orbit.
  • Stroke Lines (shape layers only) — Draw On/Off, Marching Ants, Dash Flow, Comet Spin, Loading Sweep, Sonar, Neon Buzz and more.
Tip — “Enter” presets land the object at its current position — drop the layer where it should end up, then apply, and it flies in to exactly there.

Timeline & easing

The timeline is where motion happens. Transport controls jump to start, play/pause and jump to end; playback can run Once, Loop or Bounce.

Keyframes

Click an empty track to add a keyframe (a ghost diamond previews and snaps into place). Drag diamonds to retime them, shift- or cmd-click to multi-select, and marquee-drag to select a range.

Record mode (auto-keyframe)

Toggle the diamond button in the timeline header to record. With it on, moving, rotating or recoloring the selected layer no longer drops a single static keyframe — it authors a short 0.5 s hold→land tween (a “from” keyframe holding the old value plus a landing keyframe with the new one), then jumps the playhead to the landing keyframe so the canvas shows your edit. Great for building motion by just posing the object at different times.

Easing

The chip between two keyframes opens an easing popover: Linear, Ease In/Out/In-Out, Hold, or Custom. Custom opens a cubic-bezier editor with draggable handles and presets (including overshoot), plus Elastic and Bounce spring presets that inject extra keyframes.

Layer timing bars

Drag a layer’s bar body to shift all its keyframes together; drag the edges to stretch or squash the whole animation. Per-layer loop and inter-block gap delays live on the bar’s context menu.

Freeze a track

Every track row has an eye toggle. Click it to hide a track and that property freezes at its base value — not just on screen, but in every export too (all rendering runs through the same sampler). Click to unfreeze. When a layer’s tracks are all hidden the rows collapse behind a “Show N hidden” chip. It mirrors the eye toggles in the Layers panel.

Scrubbing & zoom

Click or drag the ruler to seek (it snaps to keyframes; hold Alt to scrub freely). Zoom with the −/+ controls or Cmd/Ctrl+wheel. Drag the right end of the composition strip to set the total duration.
Tip — Play is disabled until the project has at least one keyframe or physics enabled.

State machine

Beyond a single linear timeline, Spandolab can behave like an interactive prototype: define named states and the rules that move between them (click, hover, a delay…), so a button can react, or a scene can branch.

States are time-windows

A state is a named span [in → out] on the timeline. While you’re “in” a state the playhead runs across that window and your existing keyframes supply the motion — so you animate normally, then slice the timeline into states. One state is the initial state the animation starts in; any state can loop.

Wire up transitions

Drag from a state bubble’s edge onto another bubble to create a transition wire, then click the pill on the wire to choose what fires it:
  • Click, Mouse enter and Mouse leave — pointer events, aimed at the whole artboard or one specific layer.
  • After delay (a timeout in ms) and State ends — automatic transitions.
  • Key press — a recorded key.

The authoring switch

The toggle turns state-driven playback on. With it on (and at least one state defined), Play and Restart drive the state machine and Rewind replays from the initial state; with it off, Play just runs the plain linear timeline. There’s also an “Interact” live-preview so you can click/hover the canvas and watch the machine respond.

Physics & simulation

Spandolab embeds a full Box2D (Planck) rigid-body engine and a Verlet soft-body cloth solver. Turn physics on and layers tumble, collide, drape, swing on ropes, or ride conveyor belts in real time.

World physics

On the Canvas row, enable physics and tune Gravity (vertical and horizontal). Boundary walls keep bodies on the artboard — choose from Frame / Floor / None presets, or check individual top, bottom, left and right edges.

Per-layer physics & properties

Enable physics on any layer and choose Dynamic (falls, collides, reacts) or Static (immovable platforms, floors, obstacles). Fine-tune Bounciness (Restitution), Friction, Density (Mass),Air Drag (Linear Damping), Spin Drag (Angular Damping), and initial launch velocities.

Conveyor belts & motorized wheels

Turn any static or dynamic surface into an active Conveyor Belt. Contacting objects are driven smoothly left or right via Box2D contact friction at your chosen speed. You can also assign Motorized Drive to wheels or hinges with torque limits for functional machinery and vehicles.

Ropes, chains, springs & visual joints

Inside a layer’s Physics section, turn on Joints & Pins to tether or hinge it to the artboard world or another layer. Joint types include:
  • Rope / Cord — a flexible tether with physical length and slack. Ropes feature natural catenary sag and physical droop on canvas.
  • Chain — interlocking metallic chain links that swing and pull realistically.
  • Distance / Spring — a springy joint with customizable Stiffness (Hz), Damping, and visible wire coils.
  • Revolute (Hinge / Pin) — rotates freely around a pivot point; optionally enforce Min / Max angle limits or a motor.
  • Weld (Rigid) — locks two bodies together into one rigid compound.
Choose visual styles: Rope (braided fiber with custom stripe color), Chain (metallic links),Spring (coils and amplitude), Pin (bolts/rivets), or Solid bar. Drag the anchor points directly on the canvas to place pivots.

Physics rigs & carrying cloth (Rigged groups)

Group multiple bodies into a Physics Link: one dynamic driver body powers the rig, and child limbs or decorative shapes ride along seamlessly. You can even include Cloth members inside a rig — the entire cloth lattice is transported with the moving rig while simultaneously continuing to drape, sag, and ripple under world gravity.

Hollow containers & bowls

Turn any shape into a Hollow Container so balls, ragdolls, and free cloth tumble inside rather than sitting on top. Pick Closed / Cup / Open presets or toggle individual walls to let items spill out when tipped.

Cloth & soft-body mesh

Convert any shape or raster image into a Verlet cloth lattice. Hang it from Top, Bottom, Left, Right, Corners, or place custom draggable pins right on the canvas. Adjust Stiffness (stretch resistance),Bend resistance (cardboard stiffness vs. silk drape), Weight, and blow it with Wind and fluttering Turbulence.

Terrain scroller (Treadmill loop)

Turn on Terrain Scroller / Loopin a layer’s Physics section to make hills, platforms, or surfaces scroll continuously at a set speed (e.g. 200 px/s) beneath physics objects.

Force fields — magnet, repulsor, vortex

Make a layer emit invisible force fields: Pull (Magnet), Push (Repulsor blower), or Vortex (Swirl). Set strength and radius to influence surrounding rigid bodies and soft-body cloth.

Screen wrap & perfect loop

Screen wrap (Pac-Man) re-enters bodies crossing one edge at the opposite side. Perfect Loop warms the simulation up and crossfades the seam so physics animations loop seamlessly on replay and in exports.
Tip — Physics is recorded frame-by-frame for GIF, WebM, and MP4 exports, and runs live with full mouse/touch interaction in the standalone HTML sandbox export!

Goo

Goo is a gooey / metaball merge effect: the shapes inside a group visually fuse together with soft, liquid edges — great for blobs, drips and organic morphs.

How to use it

Select a group and toggle Goo in the Properties panel, or select several layers and choose “Goo selection” / “Group & Apply Goo Effect” from the menu.

Controls

  • Viscosity / Melt — how far edges reach out and merge (softness).
  • Edge Sharpness — the cutoff between merged and separate.
  • Glow Aura and Glow Color — an optional neon halo around the goo.
Tip — Goo reads the motion of its child shapes — animate them (or drop physics bodies in) and the blob follows.

Mesh warp

Mesh overlays a grid of control points on a shape or image so you can warp and deform it — bulge, bend, squash — and keyframe that warp for animated distortion.

How to use it

  • Toggle Mesh on a shape or image layer.
  • Set the grid’s Columns and Rows (2–8 each).
  • Select the Mesh keyframe diamond on the timeline, then drag the grid points on the canvas to warp.
  • Add more Mesh keyframes at different times to animate the deformation. Reset Mesh flattens the grid.

Filters & effects

Layers can carry visual effects, applied live on the canvas and baked into raster exports.

Blend mode

Choose how a layer composites with what’s behind it (multiply, screen, etc.).

Color filters

Turn on Filters to colorize / tint a layer (solid or gradient, with neon presets and keyframeable color), shift its Hue (0–360°), or Blur it (0–50px).

Shadows

Add a Drop shadow and/or Inner shadow, each with X, Y, Blur, Color and Opacity.
Tip — Any layer carrying an effect shows an FX badge in the Layers panel.

3D models

Import an .obj, .glb or .gltf file (with an optional .mtl and textures) and it becomes a real 3D model layer, rendered live with three.js. Bringing one in switches playback to the Anime.js engine, auto-sizes the model to about 60% of the artboard and centers it.

Bring one in

Drag a 3D file onto the canvas (drop its .mtl + textures alongside it) or use the toolbar Import button. Select the model and the 3D Model section in the Properties panel takes over; Replace swaps the file in place any time.

Rotate & auto-spin

The 3D Rotation X / Y / Z fields orient the model (each keyframeable), or just drag on the canvas to tumble it. Turntable 360° Auto-Spin gives a hands-free rotation — pick CW / CCW, the turns per loop, and the spin axis (Y turntable / X / Z), then Snap to N turns for a seamless loop.

Camera, light & material

  • Camera & View — keyframeable FOV and camera distance.
  • Lighting & Shadows — keyframeable light intensity and angle.
  • Material & Surface Finish — Default / Matte / Shiny / Metal / Chrome presets, plus keyframeable Metalness, Roughness, a Color Tint and a Wireframe toggle.

Animate & simulate it like any layer

A 3D model is a first-class layer, so it plugs into the rest of Spandolab. Keyframe its position, rotation, camera, light and material on the timeline (or drop it onto a Motion Preset) to author motion. You can also enable Physics on it — Static or Dynamic — and the model falls, collides and reacts inside the same Box2D world as your 2D shapes, obeying gravity, joints and force fields. Both the keyframed motion and the physics are captured in the raster export.
Tip — WebGL 3D can’t be written into a plain SVG or Lottie. It renders live in the HTMLexport and is composited into GIF / WebM / MP4.

Video layers

Drop a WebM or MP4 onto the canvas and it becomes a video layer. Select it and the Video section in the Properties panel controls how it plays.

Timeline vs. Independent

Two playback modes:
  • Timeline — the video is frame-locked to the playhead: scrub the timeline and the video seeks with it (the original behaviour).
  • Independent — the video runs on its own clock, scripted by play / pause / stop markers you drop on its timeline row.

Playback markers

In Independent mode the Play / Pause / Stop buttons drop a marker of that action at the playhead; drag those diamonds on the video’s timeline row to retime them, and the video starts, pauses or rewinds as the playhead crosses each. (Stop = pause and rewind to the start.)

Repeat & sound

Play N times sets how many times the clip runs (0 = loop forever, otherwise it holds the last frame after N). The sound button unmutes it (videos import muted).
Tip — Video renders on the live canvas and is composited into raster exports (GIF / WebM / MP4); SVG and Lottie can’t carry a video. A video’s own soundtrack isn’t muxed into the export — for exported audio, add a separate Sound layer (see the next section).

Sound layers

Drop an audio file (MP3, WAV, OGG, M4A, AAC or FLAC) onto the canvas, or use Import, and it becomes a Sound layer — a non-visual layer that draws nothing but rides its own timeline row. Select it and the Sound section in the Properties panel controls it.

Timeline vs. Independent

Just like video: Timeline plays the clip from the layer’s start as the playhead runs, while Independent gives it its own clock driven by play / pause / stop markers you drop on its timeline row.

Volume, repeat & mute

Volume is keyframeable — drop volume keyframes to fade in or out. Play N times repeats the clip (0 = loop forever). The mute button flips between Sound on and Muted.
Tip — Sound plays during playback (▶), and stays silent while you scrub. It’s mixed into MP4 (AAC) and WebM (Opus) exports — a muted clip is dropped from the mix. SVG, GIF, Lottie and HTML carry no audio track.

Export

The Export drawer slides in from the right and is non-modal — the live canvas behind it is your preview and plays with the background, speed and loop you pick. Six formats:

Formats

  • SVG — animated SVG + CSS you can download or copy; optional responsive sizing.
  • Lottie — baked JSON for Lottie players, in a Universal or Bodymovin (Classic) profile; text becomes vector outlines, and it warns about anything it can’t represent.
  • GIF — frame-by-frame raster with a Quality control. Universally shareable.
  • WebM — VP9 video with a real alpha channel when transparent, and an Opus audio track.
  • MP4 — H.264 video, the most broadly shareable, with an AAC audio track; opaque only (no transparency).
  • HTML — a single self-contained interactive file (see below).

Interactive HTML sandbox

The HTML format doesn’t bake a flipbook — it packs the real physics engine and renderer into one .html file that runs live in whoever opens it. Bodies fall and collide in their browser, and the viewer can grab and fling them with the mouse or a finger. Set Loop to Off for a pure physics sandbox (timeline frozen at the start), and choose Physics on loop → Continuous or Restart. Drop the file straight into an<iframe> to embed it.

Sound in the export

When the project has audible Sound layers, an Include audio option (on by default) mixes them into the MP4 (AAC) and WebM (Opus) track. SVG, GIF, Lottie and HTML have no audio track.

PNG optimization

For formats that embed raster images (SVG, Lottie, HTML) the PNG Optimization panel palette-quantizes the embedded PNGs to shrink the file — a Qualityslider (Smaller file ↔ Better quality) with a live “−X% saved” badge, and Revert to undo it. There’s also an Unroll loops toggle for SVG/Lottie that bakes per-layer loops into separate layers.

Shared options

Smoothness (fps), Speed (0.1×–5×), Scale (10–1000%), and Background (transparent or a solid color). Loop applies to SVG, GIF and HTML.

Honest file sizes

The size readout is a real measurement for SVG/Lottie/GIF and a close estimate for the video formats — never a made-up number.
Tip — Exporting physics? GIF, WebM and MP4 capture one run as a fixed recording, and HTMLkeeps it live and interactive. SVG and Lottie can’t carry a simulation.

Import

Bring work in via the toolbar Import button, drag-drop onto the canvas, paste from the clipboard (Cmd/Ctrl+V), or the gallery’s Import.

Paste from clipboard

Copy an image in a browser, or “Copy as PNG / SVG” from Figma, then pressCmd/Ctrl+V in the editor to drop it straight onto the artboard.

Images (PNG · JPEG · GIF · WebP)

Become image layers, fit-centered on the artboard.

SVG

Static SVGs are parsed into an editable, nested layer tree (groups, shapes, paths, gradients, strokes) so you can animate them. SVGs with baked-in SMIL/CSS animation come in as a single image tagged “Animated SVG”.

Lottie JSON

A real parser rebuilds Lottie into editable layers with keyframe tracks, shapes, gradients, strokes, images and mattes — with honest warnings for the few things it approximates.

3D models (OBJ · GLB · GLTF)

A 3D mesh — optionally with its .mtl material and textures — comes in as a live three.js layer (see the 3D models section). Video (WebM / MP4) and audio files land as Video and Sound layers.

Project JSON

Spandolab’s own export round-trips losslessly. Importing onto a non-empty canvas asks whether to Add or Replace.

SpanBot (AI)

SpanBot is an experimentalAI motion designer & lab helper built into the editor. It can see everything on your canvas and drive the editor for you — animate layers, tidy up and rename them, group sections, set up physics, or just brainstorm — using the very same actions you’d click, so every move it makes is undoable. It’s off by default and still rough around the edges.

Turn it on

In Settings → App, flip Activate SpanBot on. A sparklebutton then appears in the top toolbar — click it to open the SpanBot chat window (draggable & resizable, just like this guide).

Bring your own OpenAI key

SpanBot runs on OpenAI (not Claude), so the first time you open it you paste your own OpenAI API key. The key is stored only in this browser and sent straight to OpenAI — nothing goes through our servers — and you pick the model (gpt-4o, gpt-4o-mini, gpt-4.1 or gpt-4.1-mini). It runs on your OpenAI account, so it isn’t free.

What it can do

Chat naturally, or tap a starter like “What’s on my canvas?”, “Make this feel alive” or “Tidy up and rename my layers.” It can add / duplicate / delete / rename / group layers, set properties and keyframes, apply Motion Presets, enable physics, joints and force fields, adjust the canvas and playback, and undo/redo — watching it work and undoing anything you don’t like.
Tip — It’s experimental: it can misread a request, and it can’t export files, bring in images or audio, or be cancelled once a request is running. Treat it as a fast first draft, then refine by hand.

Settings & library

The Settings drawer tunes how Spandolab looks and manages everything stored in this browser.

Appearance

  • Theme presets — one-click chrome looks that re-skin the whole editor.
  • Color mode — Light, Dark or System.
  • UI type size and the interface font.
  • Reduce motion — skips chrome enter/leave animation (your OS setting still wins if it’s on).

Library

Shows how many animations live in this browser (and roughly how much space). download the open animation as a library item, download a full library backup as one JSON file, or restore a backup — the same lossless format, so nothing flattens on the round-trip.

Reset

  • Reset layout and UI prefs — back to defaults, animations untouched.
  • Restore stock demos — restores all official demo animations into the gallery; your other work stays.
  • Delete all animations — wipes all animations from this browser’s library (use Restore Stock Demos to reload them; files on disk are untouched).

Keyboard shortcuts

Select toolV
RectangleR
EllipseO
Pen / LineP/L
Pen mirrorM
TextT
Hand / PanH
Toggle rulersShift+R
Play / PauseSpace
Jump to start / endHome/End
Step one frame, / .
Nudge 1px (Shift = 10px)←→↑↓
Finish pen pathEnter
Cancel path / exit editEsc
Delete selectionDel
UndoCmd/Ctrl+Z
RedoCmd/Ctrl+Shift+Z
Copy / Cut / PasteCmd/Ctrl+C/X/V
DuplicateCmd/Ctrl+D
GroupCmd/Ctrl+G
UngroupCmd/Ctrl+Shift+G
Save nowCmd/Ctrl+S

That’s the tour. Everything here is a real feature — go make something move.

Sound, 3D, Video, Physics — Animate & Export Everywhere.

No need to switch between five different apps. Spandolab combines vector animation, audio sync, 3D meshes, and Box2D physics into a single browser workspace — with instant export to lightweight SVG, Lottie JSON, alpha video, or interactive HTML sandboxes.

Box2D Rigid-Body Physics

Continuous Physics

Simulate real gravity, bounciness, friction, revolute joints, and wind forces. Grab, throw, and fling objects live with mouse or touch gestures.

Best for: Physics rigs, ragdolls, gravity sandboxes, kinetic mechanisms

  • Collision Filtering & Masking
  • Revolute Joints, Springs & Ropes
  • Interactive Mouse Drag & Fling
  • Zero-Jump Sub-stepping

More Info & Highlights

  • •Joint System: Distance springs, ropes, prismatic sliders, revolute pin pivots, and weld joints.
  • •Force Fields: Directional gravity, point attractors, repulsors, and fluid drag resistance.
  • •Simulation Engine: Embedded Planck.js Box2D compiled to pure browser JS with zero WASM load delay.

Audio & Sound FX Sync

Web Audio API

Import audio tracks, scrub visual waveforms on the timeline, and trigger sound effects dynamically on physical collisions and interactive state transitions.

Best for: Sound-reactive animations, explainer videos, game SFX, rhythmic sync

  • Waveform Timeline Scrubbing
  • Collision-Triggered Audio FX
  • Volume & Cue Envelopes
  • Stereo Opus / AAC Muxing

More Info & Highlights

  • •Audio Scrubbing: Real-time audio pitch and sample scrubbing linked directly to timeline playhead.
  • •Dynamic Triggers: Fire audio clips when physics bodies collide above a configurable impulse threshold.
  • •Web Audio DSP: Native browser audio node graph with zero latency and high-precision sample alignment.

3D Models & Spatial Meshes

Three.js Engine

Bring 3D objects, lighting, and camera perspectives into your vector artboards. Animate 3D rotations and depth translations with smooth interpolation.

Best for: 3D product showcases, spatial vector layers, isometric motion, 3D text

  • Hardware-Accelerated WebGL
  • 3D Kinetic Text Extrusions
  • Dynamic Lighting & Shadows
  • GLTF / OBJ 3D Model Import

More Info & Highlights

  • •Shader Pipeline: Custom Three.js materials with metallic, roughness, and normal map support.
  • •Perspective Camera: Animate field-of-view, orbit focal point, and camera dolly paths alongside 2D layers.
  • •Hybrid Rendering: Seamlessly layer 2D vector shapes in front of or behind 3D WebGL meshes.

Video Layers & Alpha VP9

VP9 & WebCodecs

Layer transparent video with lossless alpha channels directly inside your animations. Apply SVG displacement filters and mask video with vector paths.

Best for: Transparent video overlays, broadcast graphics, game UI, green-screen compositing

  • Lossless Alpha Transparency
  • Frame-Accurate Video Scrub
  • Vector Mask Clipping
  • WebCodecs Hardware Decode

More Info & Highlights

  • •Alpha Compositing: Full support for VP9 ProRes alpha, WebM alpha, and canvas blend modes.
  • •Timeline Sync: Video frames bind to timeline keyframes for frame-by-frame forward and reverse playback.
  • •Filter Stacking: Apply chromatic aberration, blur, goo, and color grading directly over video layers.

Interactive State Graph

Visual State Machine

Build micro-interactions, interactive button states, and mini-games visually with click/hover event triggers and transition ease curves.

Best for: Interactive UI prototypes, design systems, clickable components, game mechanics

  • Event Triggers (Click/Hover)
  • Seamless State Transitions
  • Variable Logic & Counters
  • Exportable to HTML Sandbox

More Info & Highlights

  • •Finite State Machine: Visual nodes and transition arrows connecting poses and keyframe loops.
  • •Interactive Preview: Test hover, press, release, and drag gestures directly in the editor canvas.
  • •State Persistence: Component states can react to global signals and physics simulation events.

Liquid Goo & SVG Filters

SVG Filter Stack

Create metaball liquid goo effects, organic morphing shapes, turbulence noise, and Gaussian glows using high-performance SVG filter chains.

Best for: Organic blob UI, fluid drop simulations, neon glow effects, procedural morphs

  • Metaball Liquid Goo
  • Fractal Noise & Turbulence
  • Color Matrix & Gaussian Glow
  • GPU Hardware Accelerated

More Info & Highlights

  • •Metaball Shader: Threshold color matrix applied over blurred vector shapes creates seamless fluid merging.
  • •Perlin Turbulence: SVG feTurbulence creates real-time water ripple and displacement distortion.
  • •Zero Raster Bloat: 100% mathematical vector filters rendered natively by the browser GPU.

Cloth & Soft Body Physics

Verlet & Mass-Spring

Animate realistic cloth drape, waving banners, soft ropes, tearing meshes, and elastic jelly bodies with real-time mouse tearing and wind gusts.

Best for: Waving flags, curtains, rope bridges, dangling cables, soft elastic characters

  • Real-Time Verlet Integration
  • Dynamic Wind Turbulence
  • Interactive Pin & Drag
  • Tearable Elastic Meshes

More Info & Highlights

  • •Verlet Particle Grid: High-speed constraint solver calculates thousands of spring nodes per frame without lag.
  • •Wind & Aerodynamics: Procedural gust vectors react realistically across cloth surface geometry.
  • •Interactive Interaction: Slice ropes and rip cloth live with mouse drag gestures in preview or exports.

Motion & Group Presets

1-Click Animation

Apply production-grade animation curves, group staggers, spring bounces, and kinetic text reveals to any selection in a single click.

Best for: Staggered lists, button pop micro-interactions, entrance reveals, kinetic choreography

  • Group Stagger & Cascade
  • Spring Physics & Overshoot
  • 1-Click In / Out Presets
  • Custom Preset Library

More Info & Highlights

  • •Stagger Generator: Automatically offsets keyframe timings across child layers with linear or ease curve spacing.
  • •Reusable Styles: Save animated compound assemblies into your personal preset library for instant reuse.
  • •Batch Application: Animate hundreds of vector layers simultaneously without manual keyframe placement.

Custom Curves & Line Offsets

Cubic Bezier Graph

Fine-tune every movement with a full visual curve editor. Animate stroke dash offsets, trims, taper widths, and multi-color gradient shifts seamlessly.

Best for: Self-drawing line art, glowing neon borders, gradient sweeps, tailored deceleration curves

  • Interactive Bezier Tangents
  • Stroke Dash Offset & Trim
  • Multi-Stop Gradient Morphs
  • Per-Property Easing Control

More Info & Highlights

  • •Visual Bezier Editor: Adjust incoming/outgoing velocity handles with millisecond precision.
  • •Stroke Line Engine: Animate line start/end trims to create effortless hand-drawn outline write-on effects.
  • •Gradient Motion: Morph linear and radial color stops smoothly across keyframe intervals.

Vector Masks & Alpha Clipping

Shape-Driven Masks

Clip video, 3D canvases, and complex vector illustrations inside dynamic animated shapes with feathered borders and inverted alpha modes.

Best for: Complex UI reveal transitions, video framing, holographic lens effects, cutout typography

  • Animated Path Clipping
  • Inverted & Alpha Masks
  • Multi-Layer Group Clipping
  • Zero Pixel Artifacts

More Info & Highlights

  • •Dynamic Masking: Move, rotate, and morph mask shapes while the underlying content animates independently.
  • •Sub-Pixel Clipping: Crisp mathematical vector boundaries render flawlessly at Retina and 4K resolutions.
  • •Universal Export: Export masked compositions seamlessly to SVG, Lottie JSON, or WebM alpha video.

SVG + CSS Keyframes

Vector • Crisp

Pure vector code with standalone CSS keyframe animations. Tiny footprint, infinite resolution, zero external dependencies.

Best for: Web UI icons, loading spinners, responsive logos, lightweight hero assets

  • Zero blur at any scale
  • Self-contained CSS @keyframes
  • Inline or <img src>
  • Embeds directly in HTML/React

More Info & Highlights

  • •Ultra-Light: Typical files are 2KB - 15KB with zero JavaScript runtime overhead.
  • •Responsive: Scales cleanly to any viewport width and Retina / 4K display density without quality loss.
  • •CSS Variables: Easily override colors, timing, and speed via standard CSS variables in your design system.

Lottie JSON

Universal • Bodymovin

Industry-standard JSON animations for native mobile applications (iOS, Android, React Native) and web players.

Best for: Mobile app onboarding, micro-interactions, animated stickers, multi-platform apps

  • Bodymovin & Universal profiles
  • Vector path morphing
  • Color stop gradients
  • Text as outlines

More Info & Highlights

  • •Cross-Platform: Compatible with lottie-react, lottie-ios, lottie-android, and Telegram animated stickers.
  • •Sub-Frame Interpolation: Buttery smooth 60/120 FPS playback governed by device refresh rate.
  • •Asset Embedding: Embedded raster textures and fonts can be packaged directly into a single portable JSON file.

WebM (VP9 + Alpha)

Transparent • Audio

Modern video codec supporting genuine alpha transparency channels and high-fidelity Opus soundtrack muxing.

Best for: Transparent video overlays, broadcast graphics, game UI, stream alerts

  • True alpha transparency
  • Opus stereo audio mix
  • Optimized file sizes
  • 60 FPS smoothness

More Info & Highlights

  • •Transparent Channel: Eliminates black or white background rectangles for true floating video overlays.
  • •Modern Web Video: Supported natively across Chrome, Firefox, Edge, and modern Chromium engines.
  • •WebCodecs Render: Multi-threaded hardware acceleration renders long videos in seconds.

MP4 (H.264 + AAC)

Universal Video

The most broadly shareable video format with crystal clear AAC audio track synchronization.

Best for: Social media, marketing reels, Discord, presentation decks, video editors

  • H.264 universal playback
  • AAC high-fidelity audio
  • Custom resolution scaling
  • Frame-accurate rasterization

More Info & Highlights

  • •Universal Compatibility: Plays everywhere on iOS, Android, macOS, Windows, QuickTime, and Premiere.
  • •Resolution Scaling: Export from 480p up to 4K Ultra HD at 24, 30, or 60 FPS.
  • •Audio Sync: Sample-accurate audio muxing guarantees lip-sync and beat alignment.

High-Quality GIF

Zero Setup

Palette-quantized animated GIF with upng/gifski algorithms for crisp edges without color banding.

Best for: GitHub READMEs, Slack, email newsletters, documentation

  • Palette quantization
  • Custom quality control
  • Loop count setting
  • Universal compatibility

More Info & Highlights

  • •NeuQuant / Gifski: Smart color quantization selects the optimal 256-color palette per frame.
  • •Spatial Dithering: Smooths color gradients without harsh banding or noisy grain artifacts.
  • •Lossless Deduplication: Static frame areas are compressed to drastically reduce output file size.

Interactive HTML Sandbox

Playable Widget

A single self-contained .html file packaging the live Box2D physics simulation, 3D WebGL renderer, and interactive physics grab.

Best for: Embeddable interactive widgets, physics sandboxes, mini-games, portfolio demos

  • Embedded Planck Box2D engine
  • Mouse grab & fling
  • Drop straight into <iframe>
  • Runs 100% offline

More Info & Highlights

  • •Single-File Artifact: HTML, CSS, JavaScript, and asset bundles inlined into one standalone .html file.
  • •No Server Needed: Double-click to open in any web browser without hosting, node, or internet access.
  • •Interactive Controls: Exposes physics gravity sliders, pause/play, reset, and layer inspection controls.

Box2D Rigid-Body Physics

Continuous Physics

Simulate real gravity, bounciness, friction, revolute joints, and wind forces. Grab, throw, and fling objects live with mouse or touch gestures.

Best for: Physics rigs, ragdolls, gravity sandboxes, kinetic mechanisms

  • Collision Filtering & Masking
  • Revolute Joints, Springs & Ropes
  • Interactive Mouse Drag & Fling
  • Zero-Jump Sub-stepping

More Info & Highlights

  • •Joint System: Distance springs, ropes, prismatic sliders, revolute pin pivots, and weld joints.
  • •Force Fields: Directional gravity, point attractors, repulsors, and fluid drag resistance.
  • •Simulation Engine: Embedded Planck.js Box2D compiled to pure browser JS with zero WASM load delay.

Audio & Sound FX Sync

Web Audio API

Import audio tracks, scrub visual waveforms on the timeline, and trigger sound effects dynamically on physical collisions and interactive state transitions.

Best for: Sound-reactive animations, explainer videos, game SFX, rhythmic sync

  • Waveform Timeline Scrubbing
  • Collision-Triggered Audio FX
  • Volume & Cue Envelopes
  • Stereo Opus / AAC Muxing

More Info & Highlights

  • •Audio Scrubbing: Real-time audio pitch and sample scrubbing linked directly to timeline playhead.
  • •Dynamic Triggers: Fire audio clips when physics bodies collide above a configurable impulse threshold.
  • •Web Audio DSP: Native browser audio node graph with zero latency and high-precision sample alignment.

3D Models & Spatial Meshes

Three.js Engine

Bring 3D objects, lighting, and camera perspectives into your vector artboards. Animate 3D rotations and depth translations with smooth interpolation.

Best for: 3D product showcases, spatial vector layers, isometric motion, 3D text

  • Hardware-Accelerated WebGL
  • 3D Kinetic Text Extrusions
  • Dynamic Lighting & Shadows
  • GLTF / OBJ 3D Model Import

More Info & Highlights

  • •Shader Pipeline: Custom Three.js materials with metallic, roughness, and normal map support.
  • •Perspective Camera: Animate field-of-view, orbit focal point, and camera dolly paths alongside 2D layers.
  • •Hybrid Rendering: Seamlessly layer 2D vector shapes in front of or behind 3D WebGL meshes.

Video Layers & Alpha VP9

VP9 & WebCodecs

Layer transparent video with lossless alpha channels directly inside your animations. Apply SVG displacement filters and mask video with vector paths.

Best for: Transparent video overlays, broadcast graphics, game UI, green-screen compositing

  • Lossless Alpha Transparency
  • Frame-Accurate Video Scrub
  • Vector Mask Clipping
  • WebCodecs Hardware Decode

More Info & Highlights

  • •Alpha Compositing: Full support for VP9 ProRes alpha, WebM alpha, and canvas blend modes.
  • •Timeline Sync: Video frames bind to timeline keyframes for frame-by-frame forward and reverse playback.
  • •Filter Stacking: Apply chromatic aberration, blur, goo, and color grading directly over video layers.

Interactive State Graph

Visual State Machine

Build micro-interactions, interactive button states, and mini-games visually with click/hover event triggers and transition ease curves.

Best for: Interactive UI prototypes, design systems, clickable components, game mechanics

  • Event Triggers (Click/Hover)
  • Seamless State Transitions
  • Variable Logic & Counters
  • Exportable to HTML Sandbox

More Info & Highlights

  • •Finite State Machine: Visual nodes and transition arrows connecting poses and keyframe loops.
  • •Interactive Preview: Test hover, press, release, and drag gestures directly in the editor canvas.
  • •State Persistence: Component states can react to global signals and physics simulation events.

Liquid Goo & SVG Filters

SVG Filter Stack

Create metaball liquid goo effects, organic morphing shapes, turbulence noise, and Gaussian glows using high-performance SVG filter chains.

Best for: Organic blob UI, fluid drop simulations, neon glow effects, procedural morphs

  • Metaball Liquid Goo
  • Fractal Noise & Turbulence
  • Color Matrix & Gaussian Glow
  • GPU Hardware Accelerated

More Info & Highlights

  • •Metaball Shader: Threshold color matrix applied over blurred vector shapes creates seamless fluid merging.
  • •Perlin Turbulence: SVG feTurbulence creates real-time water ripple and displacement distortion.
  • •Zero Raster Bloat: 100% mathematical vector filters rendered natively by the browser GPU.

Cloth & Soft Body Physics

Verlet & Mass-Spring

Animate realistic cloth drape, waving banners, soft ropes, tearing meshes, and elastic jelly bodies with real-time mouse tearing and wind gusts.

Best for: Waving flags, curtains, rope bridges, dangling cables, soft elastic characters

  • Real-Time Verlet Integration
  • Dynamic Wind Turbulence
  • Interactive Pin & Drag
  • Tearable Elastic Meshes

More Info & Highlights

  • •Verlet Particle Grid: High-speed constraint solver calculates thousands of spring nodes per frame without lag.
  • •Wind & Aerodynamics: Procedural gust vectors react realistically across cloth surface geometry.
  • •Interactive Interaction: Slice ropes and rip cloth live with mouse drag gestures in preview or exports.

Motion & Group Presets

1-Click Animation

Apply production-grade animation curves, group staggers, spring bounces, and kinetic text reveals to any selection in a single click.

Best for: Staggered lists, button pop micro-interactions, entrance reveals, kinetic choreography

  • Group Stagger & Cascade
  • Spring Physics & Overshoot
  • 1-Click In / Out Presets
  • Custom Preset Library

More Info & Highlights

  • •Stagger Generator: Automatically offsets keyframe timings across child layers with linear or ease curve spacing.
  • •Reusable Styles: Save animated compound assemblies into your personal preset library for instant reuse.
  • •Batch Application: Animate hundreds of vector layers simultaneously without manual keyframe placement.

Custom Curves & Line Offsets

Cubic Bezier Graph

Fine-tune every movement with a full visual curve editor. Animate stroke dash offsets, trims, taper widths, and multi-color gradient shifts seamlessly.

Best for: Self-drawing line art, glowing neon borders, gradient sweeps, tailored deceleration curves

  • Interactive Bezier Tangents
  • Stroke Dash Offset & Trim
  • Multi-Stop Gradient Morphs
  • Per-Property Easing Control

More Info & Highlights

  • •Visual Bezier Editor: Adjust incoming/outgoing velocity handles with millisecond precision.
  • •Stroke Line Engine: Animate line start/end trims to create effortless hand-drawn outline write-on effects.
  • •Gradient Motion: Morph linear and radial color stops smoothly across keyframe intervals.

Vector Masks & Alpha Clipping

Shape-Driven Masks

Clip video, 3D canvases, and complex vector illustrations inside dynamic animated shapes with feathered borders and inverted alpha modes.

Best for: Complex UI reveal transitions, video framing, holographic lens effects, cutout typography

  • Animated Path Clipping
  • Inverted & Alpha Masks
  • Multi-Layer Group Clipping
  • Zero Pixel Artifacts

More Info & Highlights

  • •Dynamic Masking: Move, rotate, and morph mask shapes while the underlying content animates independently.
  • •Sub-Pixel Clipping: Crisp mathematical vector boundaries render flawlessly at Retina and 4K resolutions.
  • •Universal Export: Export masked compositions seamlessly to SVG, Lottie JSON, or WebM alpha video.

SVG + CSS Keyframes

Vector • Crisp

Pure vector code with standalone CSS keyframe animations. Tiny footprint, infinite resolution, zero external dependencies.

Best for: Web UI icons, loading spinners, responsive logos, lightweight hero assets

  • Zero blur at any scale
  • Self-contained CSS @keyframes
  • Inline or <img src>
  • Embeds directly in HTML/React

More Info & Highlights

  • •Ultra-Light: Typical files are 2KB - 15KB with zero JavaScript runtime overhead.
  • •Responsive: Scales cleanly to any viewport width and Retina / 4K display density without quality loss.
  • •CSS Variables: Easily override colors, timing, and speed via standard CSS variables in your design system.

Lottie JSON

Universal • Bodymovin

Industry-standard JSON animations for native mobile applications (iOS, Android, React Native) and web players.

Best for: Mobile app onboarding, micro-interactions, animated stickers, multi-platform apps

  • Bodymovin & Universal profiles
  • Vector path morphing
  • Color stop gradients
  • Text as outlines

More Info & Highlights

  • •Cross-Platform: Compatible with lottie-react, lottie-ios, lottie-android, and Telegram animated stickers.
  • •Sub-Frame Interpolation: Buttery smooth 60/120 FPS playback governed by device refresh rate.
  • •Asset Embedding: Embedded raster textures and fonts can be packaged directly into a single portable JSON file.

WebM (VP9 + Alpha)

Transparent • Audio

Modern video codec supporting genuine alpha transparency channels and high-fidelity Opus soundtrack muxing.

Best for: Transparent video overlays, broadcast graphics, game UI, stream alerts

  • True alpha transparency
  • Opus stereo audio mix
  • Optimized file sizes
  • 60 FPS smoothness

More Info & Highlights

  • •Transparent Channel: Eliminates black or white background rectangles for true floating video overlays.
  • •Modern Web Video: Supported natively across Chrome, Firefox, Edge, and modern Chromium engines.
  • •WebCodecs Render: Multi-threaded hardware acceleration renders long videos in seconds.

MP4 (H.264 + AAC)

Universal Video

The most broadly shareable video format with crystal clear AAC audio track synchronization.

Best for: Social media, marketing reels, Discord, presentation decks, video editors

  • H.264 universal playback
  • AAC high-fidelity audio
  • Custom resolution scaling
  • Frame-accurate rasterization

More Info & Highlights

  • •Universal Compatibility: Plays everywhere on iOS, Android, macOS, Windows, QuickTime, and Premiere.
  • •Resolution Scaling: Export from 480p up to 4K Ultra HD at 24, 30, or 60 FPS.
  • •Audio Sync: Sample-accurate audio muxing guarantees lip-sync and beat alignment.

High-Quality GIF

Zero Setup

Palette-quantized animated GIF with upng/gifski algorithms for crisp edges without color banding.

Best for: GitHub READMEs, Slack, email newsletters, documentation

  • Palette quantization
  • Custom quality control
  • Loop count setting
  • Universal compatibility

More Info & Highlights

  • •NeuQuant / Gifski: Smart color quantization selects the optimal 256-color palette per frame.
  • •Spatial Dithering: Smooths color gradients without harsh banding or noisy grain artifacts.
  • •Lossless Deduplication: Static frame areas are compressed to drastically reduce output file size.

Interactive HTML Sandbox

Playable Widget

A single self-contained .html file packaging the live Box2D physics simulation, 3D WebGL renderer, and interactive physics grab.

Best for: Embeddable interactive widgets, physics sandboxes, mini-games, portfolio demos

  • Embedded Planck Box2D engine
  • Mouse grab & fling
  • Drop straight into <iframe>
  • Runs 100% offline

More Info & Highlights

  • •Single-File Artifact: HTML, CSS, JavaScript, and asset bundles inlined into one standalone .html file.
  • •No Server Needed: Double-click to open in any web browser without hosting, node, or internet access.
  • •Interactive Controls: Exposes physics gravity sliders, pause/play, reset, and layer inspection controls.

Box2D Rigid-Body Physics

Continuous Physics

Simulate real gravity, bounciness, friction, revolute joints, and wind forces. Grab, throw, and fling objects live with mouse or touch gestures.

Best for: Physics rigs, ragdolls, gravity sandboxes, kinetic mechanisms

  • Collision Filtering & Masking
  • Revolute Joints, Springs & Ropes
  • Interactive Mouse Drag & Fling
  • Zero-Jump Sub-stepping

More Info & Highlights

  • •Joint System: Distance springs, ropes, prismatic sliders, revolute pin pivots, and weld joints.
  • •Force Fields: Directional gravity, point attractors, repulsors, and fluid drag resistance.
  • •Simulation Engine: Embedded Planck.js Box2D compiled to pure browser JS with zero WASM load delay.

Audio & Sound FX Sync

Web Audio API

Import audio tracks, scrub visual waveforms on the timeline, and trigger sound effects dynamically on physical collisions and interactive state transitions.

Best for: Sound-reactive animations, explainer videos, game SFX, rhythmic sync

  • Waveform Timeline Scrubbing
  • Collision-Triggered Audio FX
  • Volume & Cue Envelopes
  • Stereo Opus / AAC Muxing

More Info & Highlights

  • •Audio Scrubbing: Real-time audio pitch and sample scrubbing linked directly to timeline playhead.
  • •Dynamic Triggers: Fire audio clips when physics bodies collide above a configurable impulse threshold.
  • •Web Audio DSP: Native browser audio node graph with zero latency and high-precision sample alignment.

3D Models & Spatial Meshes

Three.js Engine

Bring 3D objects, lighting, and camera perspectives into your vector artboards. Animate 3D rotations and depth translations with smooth interpolation.

Best for: 3D product showcases, spatial vector layers, isometric motion, 3D text

  • Hardware-Accelerated WebGL
  • 3D Kinetic Text Extrusions
  • Dynamic Lighting & Shadows
  • GLTF / OBJ 3D Model Import

More Info & Highlights

  • •Shader Pipeline: Custom Three.js materials with metallic, roughness, and normal map support.
  • •Perspective Camera: Animate field-of-view, orbit focal point, and camera dolly paths alongside 2D layers.
  • •Hybrid Rendering: Seamlessly layer 2D vector shapes in front of or behind 3D WebGL meshes.

Video Layers & Alpha VP9

VP9 & WebCodecs

Layer transparent video with lossless alpha channels directly inside your animations. Apply SVG displacement filters and mask video with vector paths.

Best for: Transparent video overlays, broadcast graphics, game UI, green-screen compositing

  • Lossless Alpha Transparency
  • Frame-Accurate Video Scrub
  • Vector Mask Clipping
  • WebCodecs Hardware Decode

More Info & Highlights

  • •Alpha Compositing: Full support for VP9 ProRes alpha, WebM alpha, and canvas blend modes.
  • •Timeline Sync: Video frames bind to timeline keyframes for frame-by-frame forward and reverse playback.
  • •Filter Stacking: Apply chromatic aberration, blur, goo, and color grading directly over video layers.

Interactive State Graph

Visual State Machine

Build micro-interactions, interactive button states, and mini-games visually with click/hover event triggers and transition ease curves.

Best for: Interactive UI prototypes, design systems, clickable components, game mechanics

  • Event Triggers (Click/Hover)
  • Seamless State Transitions
  • Variable Logic & Counters
  • Exportable to HTML Sandbox

More Info & Highlights

  • •Finite State Machine: Visual nodes and transition arrows connecting poses and keyframe loops.
  • •Interactive Preview: Test hover, press, release, and drag gestures directly in the editor canvas.
  • •State Persistence: Component states can react to global signals and physics simulation events.

Liquid Goo & SVG Filters

SVG Filter Stack

Create metaball liquid goo effects, organic morphing shapes, turbulence noise, and Gaussian glows using high-performance SVG filter chains.

Best for: Organic blob UI, fluid drop simulations, neon glow effects, procedural morphs

  • Metaball Liquid Goo
  • Fractal Noise & Turbulence
  • Color Matrix & Gaussian Glow
  • GPU Hardware Accelerated

More Info & Highlights

  • •Metaball Shader: Threshold color matrix applied over blurred vector shapes creates seamless fluid merging.
  • •Perlin Turbulence: SVG feTurbulence creates real-time water ripple and displacement distortion.
  • •Zero Raster Bloat: 100% mathematical vector filters rendered natively by the browser GPU.

Cloth & Soft Body Physics

Verlet & Mass-Spring

Animate realistic cloth drape, waving banners, soft ropes, tearing meshes, and elastic jelly bodies with real-time mouse tearing and wind gusts.

Best for: Waving flags, curtains, rope bridges, dangling cables, soft elastic characters

  • Real-Time Verlet Integration
  • Dynamic Wind Turbulence
  • Interactive Pin & Drag
  • Tearable Elastic Meshes

More Info & Highlights

  • •Verlet Particle Grid: High-speed constraint solver calculates thousands of spring nodes per frame without lag.
  • •Wind & Aerodynamics: Procedural gust vectors react realistically across cloth surface geometry.
  • •Interactive Interaction: Slice ropes and rip cloth live with mouse drag gestures in preview or exports.

Motion & Group Presets

1-Click Animation

Apply production-grade animation curves, group staggers, spring bounces, and kinetic text reveals to any selection in a single click.

Best for: Staggered lists, button pop micro-interactions, entrance reveals, kinetic choreography

  • Group Stagger & Cascade
  • Spring Physics & Overshoot
  • 1-Click In / Out Presets
  • Custom Preset Library

More Info & Highlights

  • •Stagger Generator: Automatically offsets keyframe timings across child layers with linear or ease curve spacing.
  • •Reusable Styles: Save animated compound assemblies into your personal preset library for instant reuse.
  • •Batch Application: Animate hundreds of vector layers simultaneously without manual keyframe placement.

Custom Curves & Line Offsets

Cubic Bezier Graph

Fine-tune every movement with a full visual curve editor. Animate stroke dash offsets, trims, taper widths, and multi-color gradient shifts seamlessly.

Best for: Self-drawing line art, glowing neon borders, gradient sweeps, tailored deceleration curves

  • Interactive Bezier Tangents
  • Stroke Dash Offset & Trim
  • Multi-Stop Gradient Morphs
  • Per-Property Easing Control

More Info & Highlights

  • •Visual Bezier Editor: Adjust incoming/outgoing velocity handles with millisecond precision.
  • •Stroke Line Engine: Animate line start/end trims to create effortless hand-drawn outline write-on effects.
  • •Gradient Motion: Morph linear and radial color stops smoothly across keyframe intervals.

Vector Masks & Alpha Clipping

Shape-Driven Masks

Clip video, 3D canvases, and complex vector illustrations inside dynamic animated shapes with feathered borders and inverted alpha modes.

Best for: Complex UI reveal transitions, video framing, holographic lens effects, cutout typography

  • Animated Path Clipping
  • Inverted & Alpha Masks
  • Multi-Layer Group Clipping
  • Zero Pixel Artifacts

More Info & Highlights

  • •Dynamic Masking: Move, rotate, and morph mask shapes while the underlying content animates independently.
  • •Sub-Pixel Clipping: Crisp mathematical vector boundaries render flawlessly at Retina and 4K resolutions.
  • •Universal Export: Export masked compositions seamlessly to SVG, Lottie JSON, or WebM alpha video.

SVG + CSS Keyframes

Vector • Crisp

Pure vector code with standalone CSS keyframe animations. Tiny footprint, infinite resolution, zero external dependencies.

Best for: Web UI icons, loading spinners, responsive logos, lightweight hero assets

  • Zero blur at any scale
  • Self-contained CSS @keyframes
  • Inline or <img src>
  • Embeds directly in HTML/React

More Info & Highlights

  • •Ultra-Light: Typical files are 2KB - 15KB with zero JavaScript runtime overhead.
  • •Responsive: Scales cleanly to any viewport width and Retina / 4K display density without quality loss.
  • •CSS Variables: Easily override colors, timing, and speed via standard CSS variables in your design system.

Lottie JSON

Universal • Bodymovin

Industry-standard JSON animations for native mobile applications (iOS, Android, React Native) and web players.

Best for: Mobile app onboarding, micro-interactions, animated stickers, multi-platform apps

  • Bodymovin & Universal profiles
  • Vector path morphing
  • Color stop gradients
  • Text as outlines

More Info & Highlights

  • •Cross-Platform: Compatible with lottie-react, lottie-ios, lottie-android, and Telegram animated stickers.
  • •Sub-Frame Interpolation: Buttery smooth 60/120 FPS playback governed by device refresh rate.
  • •Asset Embedding: Embedded raster textures and fonts can be packaged directly into a single portable JSON file.

WebM (VP9 + Alpha)

Transparent • Audio

Modern video codec supporting genuine alpha transparency channels and high-fidelity Opus soundtrack muxing.

Best for: Transparent video overlays, broadcast graphics, game UI, stream alerts

  • True alpha transparency
  • Opus stereo audio mix
  • Optimized file sizes
  • 60 FPS smoothness

More Info & Highlights

  • •Transparent Channel: Eliminates black or white background rectangles for true floating video overlays.
  • •Modern Web Video: Supported natively across Chrome, Firefox, Edge, and modern Chromium engines.
  • •WebCodecs Render: Multi-threaded hardware acceleration renders long videos in seconds.

MP4 (H.264 + AAC)

Universal Video

The most broadly shareable video format with crystal clear AAC audio track synchronization.

Best for: Social media, marketing reels, Discord, presentation decks, video editors

  • H.264 universal playback
  • AAC high-fidelity audio
  • Custom resolution scaling
  • Frame-accurate rasterization

More Info & Highlights

  • •Universal Compatibility: Plays everywhere on iOS, Android, macOS, Windows, QuickTime, and Premiere.
  • •Resolution Scaling: Export from 480p up to 4K Ultra HD at 24, 30, or 60 FPS.
  • •Audio Sync: Sample-accurate audio muxing guarantees lip-sync and beat alignment.

High-Quality GIF

Zero Setup

Palette-quantized animated GIF with upng/gifski algorithms for crisp edges without color banding.

Best for: GitHub READMEs, Slack, email newsletters, documentation

  • Palette quantization
  • Custom quality control
  • Loop count setting
  • Universal compatibility

More Info & Highlights

  • •NeuQuant / Gifski: Smart color quantization selects the optimal 256-color palette per frame.
  • •Spatial Dithering: Smooths color gradients without harsh banding or noisy grain artifacts.
  • •Lossless Deduplication: Static frame areas are compressed to drastically reduce output file size.

Interactive HTML Sandbox

Playable Widget

A single self-contained .html file packaging the live Box2D physics simulation, 3D WebGL renderer, and interactive physics grab.

Best for: Embeddable interactive widgets, physics sandboxes, mini-games, portfolio demos

  • Embedded Planck Box2D engine
  • Mouse grab & fling
  • Drop straight into <iframe>
  • Runs 100% offline

More Info & Highlights

  • •Single-File Artifact: HTML, CSS, JavaScript, and asset bundles inlined into one standalone .html file.
  • •No Server Needed: Double-click to open in any web browser without hosting, node, or internet access.
  • •Interactive Controls: Exposes physics gravity sliders, pause/play, reset, and layer inspection controls.

Built-in PNG Palette Quantization Engine

Shrink embedded raster images inside SVGs, Lottie JSON, and standalone HTML bundles by up to 70% with zero perceptible visual quality degradation.

−70% File Size

No accounts. No credit card. Just pure motion sculpting.

Everything saves right in your browser. Launch Spandolab and build your first animation or physics rig in seconds.

•© 2026•Vibe-coded with curiosity,and passion for motion and interaction design byIlya Tsuprun
Gallery