How Flohesion works

Overview

Flohesion builds Lottie animations by simulating particles — gravity, wind, drag, turbulence — and baking the result to Lottie shapes, rather than hand-placed keyframes. A motion trail is a path you draw that particles can spawn from and travel along, reshaped by the same deterministic modifiers — waves, noise, spirals — that also drive particle motion directly. It has no visual output of its own: nothing about a motion trail is ever exported, only the particles riding it are.

Particle motion and a motion trail's own shape share one modifier system (see modifiers), both can loop exactly, and the whole scene exports through one pipeline to a single Lottie JSON file — the same file format After Effects' Bodymovin plugin produces, playable anywhere a Lottie player runs.

Two more layer types round out the toolkit for combining your own artwork with the simulation: an Image layer imports an SVG file as its own layer, and can also be used as the source shape for particles. A Lottie import layer drops an existing Lottie animation straight into the comp, played back live and re-embedded correctly on export — so the animation you started with and the particles you add end up in one exported file.

Getting started

Open the studio and you land on an empty canvas. From there:

1. 1. Pick a preset from the dropdown above the canvas, or add an empty particle layer or motion trail from the layer rail on the left.
2. 2. Play it back with Space, and scrub the timeline at the bottom — everything you see is the real simulation running live, not a preview approximation.
3. 3. Tweak it in the inspector on the right — every field there is documented in the sections below, under the same names.
4. 4. Export with the button in the header (or press E) — see Exporting to Lottie.

Undo and redo (Ctrl+Z / Ctrl+Shift+Z) cover every edit, so there's no penalty for experimenting.

A slider's range is a comfortable default, not a hard limit — dragging stops at either end, but the number field next to it doesn't: click it and type a value beyond the slider's range (or drag the number itself, which slows sharply past the useful span rather than stopping dead) to push a value further than the slider alone allows.

Particle layers

A particle layer owns an emitter, an appearance, a life span, and its own stack of physics forces — nothing is shared between layers, so gravity on one layer never leaks into another.

Emitter

Where and how particles are born. Shape sets the emitter's volume: point box circle sphere ring line grid or spline (emit along a motion trail, either evenly spaced or at random).

Rate / Burst

A steady rate in particles per second, or a fixed count released on specific frames instead. The two combine — a rate keeps emitting while a burst also fires on top of it.

One-time explosion

To fire every particle at once and nothing else: set Rate to 0, turn Burst on, and give it a single frame in At frames (0 to fire immediately). With Rate left above 0, Burst adds a spike on top of the continuous stream instead of replacing it.

Active from

The frame range the emitter runs across — negative start frames pre-roll a scene so it opens already populated.

Direction

uniform directional bidirectional disc outwards inwards or tangent (orbital), plus a spread cone.

Velocity

Launch speed, its randomisation, extra speed along the emitter’s own outward normal, and how much of the emitter’s own motion particles inherit.

Appearance

Shape is one of circle square rectangle triangle star polygon line cross ring ringFill or custom, with fill and/or stroke.

Size / Opacity

A base value, random variation, and a curve over the particle’s life — so a spark can grow then fade, for instance.

Colour

A gradient ramp, walked by life (age), random (one colour per particle), speed, or depth.

Rotation / Spin

Initial angle and degrees-per-second, both randomisable, plus an option to orient the particle along its own velocity — confetti flakes, arrows, dashes.

Custom shape

Traces particles from an Image layer's own SVG geometry instead of a built-in shape — pick the source layer, then choose SVG colour mode to keep each part of the artwork's own original colours, or Ramp to colour the whole silhouette like every other shape. Depth of field isn't available on a custom shape — there's no single outline to feather across arbitrary artwork.

Depth of field

A fake defocus: particles away from a chosen focus depth grow and dim together, which reads as softness and — being only size and opacity — exports exactly, since Lottie has no reliable blur.

Physics forces

Stack any of these on a layer. Each is independent and can be enabled or disabled on its own.

Gravity

A constant pull in one direction.

Wind

A steady push, plus an optional sinusoidal gust on top of it.

Drag

Air resistance that settles particles toward a terminal velocity — linear or quadratic.

Turbulence

A noise-driven force field (fractal Brownian motion). Curl noise gives fluid-like swirling instead of jitter; scale, evolution speed, octave count and per-axis weighting are all tunable.

Vortex

Spins particles around a centre, with an inward pull and a falloff radius.

Attractor

Pulls particles toward a point — or repels them, with a negative strength. Defaults to a gentle 100; the slider tops out at 400 but the number field takes it much further (see Getting started).

Spherical

A solid sphere particles are pushed out of, with a feathered edge.

Bounce

Floor / ceiling / wall collision, with restitution, friction, surface roughness and spin lost on impact.

A layer also has a force scale (0 makes it purely deterministic — displacers only, no physics at all) and a time factor to speed up or slow down its physics without touching the comp's frame rate. Max particles caps the pool; leave auto on and it's derived from rate × life, so raising the rate reads as adding particles rather than recycling old ones early.

Motion trail layers

A motion trail is a path — anchors with in/out tangent handles, optionally closed — reshaped by the same modifier stack particle layers use for deterministic motion. It has no style of its own: no stroke, no fill, nothing drawn as artwork. Its only job is to give a particle emitter's spline shape somewhere to ride (see Emitter). In the editor it shows as a thin dashed guide so it stays visible and editable; on export it contributes nothing at all — not even a hidden shape.

Resolution

How many points are sampled along the path before modifiers are applied — the density both the editor guide and the emitter itself work from.

Closed

Whether the path forms a loop back to its first anchor.

Modifiers

Available on both a motion trail and a particle layer's own Motion tab. Every modifier shares one idea: a domain (what its phase is measured against — arcLength age distance index or time) and an apply mode (offset pushes the point sideways, steer bends the direction of travel so the effect compounds into a genuine curl, speed modulates magnitude only). That is what lets the same stack drive a motion trail by arc length and a particle by its own age.

Wave

A sine wave.

Zigzag

Sharp ridges — ridge count and how rounded the corners are.

Spiral

Radius grows every cycle, with an optional tilt out of the flat plane.

Coil

Coils around the path itself — radius, turns, and an optional real-3D render.

Twist

Rotates around a centre over the domain; a repeated copy can randomise its own direction and amount so a run doesn’t read as one rigid fan.

Roughen

Noise-based jitter — detail level and how jagged versus smooth it looks.

Wander

A heading that drifts over time, with a cohesion pull back toward the original direction.

Taper

Scales the start and end of the path independently.

Pulse

An on/off duty cycle, with adjustable softness at the transition.

Image layers (SVG import)

+ Image in the layer rail imports an SVG file as a new layer, drawn at native scale — the file's own viewBox maps one SVG unit to one comp pixel. Paths, rectangles, circles, ellipses, polygons and polylines all import, including nested group transforms and colours set either as inline attributes or through a <style> block with CSS classes (the default export format for Illustrator and Figma). Anything the parser doesn't support — gradients, embedded raster images, text, clip paths — is skipped with a warning rather than breaking the rest of the file.

Like every other layer, an image layer has its own Transform section in the inspector — Position, Scale, Rotation, Opacity — and the same move/scale/rotate handles on canvas that particle and spline layers use: a crosshair at the artwork's own centre to drag it into place, a diamond corner handle to scale, and a circle above it to rotate. Rotation and scale always pivot about the artwork's own visual centre, not the SVG's raw origin point, so spinning a logo swings it in place rather than off into the corner.

An image layer's own artwork isn't only decoration on the comp — pick it as the source for a particle layer's custom shape (see Appearance) to have particles trace its geometry instead of a built-in circle or star.

Lottie import

+ Lottie imports an existing Lottie JSON file as its own layer, played back live in the studio — not a static thumbnail — so it scrubs and loops in sync with everything else in the comp. Its Transform section and canvas handles work exactly like an image layer's.

Start

The frame in this comp the imported clip begins playing on. Nothing is drawn before it.

Speed

A playback-rate multiplier on top of whatever correction is already needed for a different frame rate — see below.

Loop

On repeats the clip for as long as the comp runs; off holds its last frame instead of disappearing.

Trim

Play only a fraction (0–1) of the source file’s own timeline, start and end.

Frame rate is corrected automatically: an imported file authored at 24fps still plays at its own real-world speed once embedded in, say, a 30fps comp, in both the studio preview and the exported file — both read the exact same frame-mapping function, so they can't disagree. On export the clip is embedded as a native Lottie precomp (with every one of its own keyframes and any nested assets rescaled and namespaced so it can't collide with anything else in the file) and driven by a time-remap track, rather than being baked frame-by-frame — this is what makes it possible to export the imported animation and the particles you've added around it as one single Lottie file.

Seamless looping

Turn on Seamless in the comp panel and the frame immediately after the last frame is provably identical to frame zero — position, rotation, size, everything — not just close enough to not catch the eye. Every time-varying input (turbulence evolution, displacer phase, wind gusts) is driven by a periodic function whose period divides the loop length, rather than drifting forever.

Pre-roll simulates frames before frame zero so the population is already in a steady state when the file starts — without it, a scene that emits from off-screen opens on a blank frame. This applies whether or not looping itself is on.

Seamless looping costs a heavier one-time warm-up at build time, so it's worth leaving off while you're still iterating on a scene and turning on for the final export.

Exporting to Lottie

Export bakes the simulation to keyframes and fits a curve to each track, dropping keyframes that fall within a tolerance rather than keeping one per frame. The preview in the export dialog is not another canvas drawing — it's the literal exported JSON, played in a real Lottie player, so anything the fitter got wrong or any shape the format can't express shows up before the file leaves the studio.

Position / Rotation / Opacity / Size

Independent fitting tolerances — the maximum a track is allowed to deviate before a keyframe is kept. Grouped under Advanced fidelity, since Optimisation below is worth trying first.

Precision

Decimal places kept in the JSON.

Colour keys

Whether colour is allowed to animate as keyframes, or is baked to a static value.

Depth sort

Sort layers by z each frame rather than by spawn order.

Cull offscreen

Drop particles never actually visible inside the comp frame.

Background / Minify

Include a background rectangle; strip names and editor-only metadata no player reads.

File size is reported both raw and gzipped, because that's the number that actually matters for a real deployment — every CDN and dev server gzips JSON in transit, and the raw figure alone makes a perfectly deployable file look heavier than it will ever be over the wire. The raw figure still matters on its own, separately: it's roughly what the browser has to parse into objects and hold in memory to actually run the animation, which compression doesn't reduce.

Export produces two formats from the same dialog: a plain Lottie .json, and .lottie — the identical animation zipped, for a smaller download when handing the file to something dotLottie-aware. A browser doesn't read .lottie directly; every player, including this app's own preview, ultimately needs parsed JSON, so a .lottie file gets unzipped once before anything renders. Reach for it when shipping several animations together or when the download itself is the bottleneck; reach for plain JSON otherwise — it works everywhere with no extra step.

What actually drives file size

Lottie has no native particle system, so every particle becomes its own independently-animated shape layer — particle count is what dominates a particle layer's export size, far more than any single tolerance slider. A Bounce force's swap multiplies this directly: each swap spawns count new droplets on top of the particle that triggered it, so a swap count of 11 turns roughly 1,600 raindrops into upward of 12,000 tracked particles and a 12MB file — verified on a real project, not a hypothetical. Cull offscreen is the safest lever (it only removes particles that were never visible anyway); after that, particle count, life length and swap count matter more than fidelity tolerance. The studio warns in the export dialog once a file passes roughly 1,000 particle layers — most players start dropping frames somewhere past that.

A motion trail costs nothing at all: it has no style, is never drawn as artwork, and the exporter never visits it when building the file's layer list — not even as a hidden or invisible shape. Only the particles riding it, via an emitter set to spline shape, ever reach the exported JSON, and they cost exactly what any other particle stream does (see above).

Built-in presets

Presets are just starting documents — open one and every field above is still yours to change.

Project files

Save project writes the whole editable document — every layer, force and modifier — to a .floh file. This is not a Lottie file; opening it in a player shows nothing. Open project reads it back.

Keyboard shortcuts