Particles

Particles

Turn any shape into a particle field, then lay it out and set it moving.

Particles turn a layer into a field of small copies that can hold a shape, move as a group and carry colour, data and trails. This page walks through the particle layer in the order the app builds it: how many particles there are, how they are laid out, how they move, and the extras you can add on top. For shaping the field see Particle shapes and Draw paths and masks; for charts see Animated data and charts.

#Particles

In the appCanvas > Vector (legacy panel)
Work top to bottom. 1. Form is what the particles sit on (a shape, or a field). 2. Motion pushes them. 3. Finish is Hold, Perfect loop and preview, on every layer mode.

Engine turns the particle field on. Off hands control back to keyframe tweens. Nothing is deleted.

In the layer panel, particles are built from cards rather than one long form. Click + Add Layer and choose Particles: you get a Vector layer whose particles sit still on a hex lattice, with nothing moving yet. That is deliberate. You lay the field out first and add movement after, so the shape is right before anything starts to travel.

+ Add Component then offers the cards in three groups:

  • Layout, no motion: Count, Fill canvas, Fan out, Shape (traced from a prompt, a generator, an image, an SVG or data) and Draw (a path or a mask you draw on the canvas).
  • Movement: Motion, Follow / Emit (what a drawing does: the particles follow the path or are thrown off it; offered once there is a Draw), Trail, Connect / Chart, Gradient Morph and Displacement.
  • Timing: Ease, which is always last: the curve of the layer's own move between linked scenes, and the Particle ease of the particles' ramps. Keyframes are automatic and need no card. They have their own page: Keyframes, Hold and Finish.

Count comes first because every other particle card needs it. The chooser only offers them once Count is on the layer, and removing Count removes them too. In the same way, Follow / Emit needs a Draw, and removing Draw removes it. Connect / Chart, Gradient Morph and Displacement only run on particles, so while the particles are switched off they wait, with a note saying why.

To build a whole chain at once instead of card by card, use + Recipe on the Vector card; see Recipes.

Hold and Perfect loop apply to the whole scene rather than one card; see Finish.

#Count

In the appCanvas > Vector > Count
On shows this shape as particles. Off shows the plain shape and keeps every module.

Nothing moves yet. Lay the particles out first (Fill canvas, Fan out, Shape, Draw), then add Motion (Wave, Orbit, Swirl and more). Or build the whole chain at once with + Recipe on the Vector card.

The Count card holds the Particles switch and the Count slider. Switching particles on for an untouched layer sets Count to 60 and leaves them still. Switching them off shows the plain shape again, and every card you added stays on the layer for when you switch back.

Count runs from 1 to 800. On a shape it is how many particles sit on it; lowering it thins the shape evenly instead of cutting part of it off. On linked scenes Count is locked, because the same particles have to exist on both sides of the cut. Set it on the first linked scene.

Beside Count, Fill canvas (0 to 120) spreads the field out: 0 clusters every particle at the centre, 100 fits the frame and higher values overshoot so small particles still reach the edges. Fan out (0 to 100) turns the whole layout about its centre. Any slider value can be clicked and typed past the end of the slider for more extreme looks; Fill canvas goes up to 500 this way.

Start low and raise Count when a traced shape needs more detail: fewer particles are easier to read on a small screen.

Ideas

  • A stat ad where Count matches the number in the headline ("300 new homes"), so the field literally is the figure.
  • A launch countdown across linked scenes where the field stays the same 300 particles and only the layout changes at each cut.

#Motion

The Motion card is what makes the particles move. Adding it applies Wave and switches the particles on straight away. Pick a type to change the movement:

  • Wave: a ripple rolls across the frame.
  • Orbit: each particle circles its home, in a rolling pattern.
  • Swirl: the field turns around the centre.
  • Drift: a side to side breeze with a touch of noise.
  • Float: particles bob gently, one after another.
  • Shimmer: every particle jitters in place.
  • Bounce: a springy settle at the start of the scene. It happens once, so it does not repeat in a Perfect loop.

Two sliders shape any type. Speed runs from 0 (still) to 50, which is normal speed; click the number to type up to 100 for double speed. Amount (0 to 150, 100 by default) scales every force at once.

Under them, Displace adds a second, per-particle move on top of the type, with Order deciding which particles move first. See Displace and Order below.

Fine tune

Each type is a preset over a set of forces, and Fine tune opens them up: Wind, Turbulence, Gravity, Swirl, Orbit, Wave, Float and Spring, plus Randomness, Stagger and Start Offset, a Seed readout, and Randomise and Reset buttons. Change any of them and the card calls it a Custom mix; pick a type again to start over from that preset.

Motion moves particles around their home positions, so a traced shape keeps reading while it moves. If a drawn path is pulling at full strength, the forces it overrides are greyed out with a note.

Worked example

A 9:16 sale ad where 600 particles form the logo and breathe while the offer lands.

  1. Add a Particles layer, open Shape and trace the logo with SVG at 600 points.
  2. Add Motion and pick Float. Set Speed to 20 and Amount to 60, so the logo stays legible.
  3. Add Trail with 3 Copies for a soft afterglow.
  4. Add Gradient Morph with two brand colours.
  5. Turn on Perfect loop so the ad can repeat in a story placement without a jump.

Ideas

  • A lattice of dots under a tech headline with Wave at low Amount, so the grid ripples like a surface.
  • A skincare ad with Float on a traced bottle, so it looks weightless.
  • A festival ad with Swirl on a ring of particles behind the line-up.
  • A "shake up your routine" ad that starts with Bounce and settles into the product shape.

#Displace and Order

In the appCanvas > Vector > Motion
An extra move for each particle, on top of Motion's type. Closed-form, so it scrubs forwards and back.

Kind: Wave displaces them along a waveform, Drift pushes them through a noise field, Attract pushes them away from a moving magnet (or draws them in, with Direction set to Pull), Pulse swells each particle, Orbit circles each home, Rotate turns each particle, Scatter pushes them outward, and three more follow the same magnet as Attract: Wake parts the field where it passed, Trail makes the particles chase it and Emit fires a stream of particles from it. Strength is how strongly it applies (degrees for Orbit and Rotate); Motion's Speed and Amount do not change it.

Order decides which particles move first - by index, by distance from the centre, or seeded random - and Delay is the gap between them. The curve their ramps follow is the Particle ease on Ease.

Attract, Wake, Trail and Emit add Path (Orbit, Sweep or Recorded) and a Rec button. Press Rec: after a 3-2-1 count-in the scene plays and the magnet follows your pointer over the frame; Esc stops early. The take becomes the Recorded path, one undo step, and Smooth evens it out without recording again. Loop keeps recording pass after pass (each is a take, pick one under Take); holding the mouse button while you record over a take replaces only the part you held. Edit shows the take's points on the frame to drag, delete or add.

Each linked State keeps its own Kind, Strength, Waveform and Order. Values blend between keyframes; None fades it to zero. Different kinds blend their motion.

The Displace and Order rows sit in the Motion card, under Speed and Amount. They used to be a separate card called Motion FX; since v1.990.0 they are part of Motion, and the easing that card had is now the Particle ease on Ease. Projects saved before then open the same way and render exactly as before.

Motion's type pushes the whole field around; Displace moves each particle by a rule. It is calculated from the scene's progress rather than simulated frame by frame, so it scrubs backwards and forwards cleanly. A layer can use Displace with no type picked: the card then reads Displace only.

The controls

  • Kind (under the Displace heading): None, Wave (displace), Drift (noise), Attract (field), Pulse (scale), Orbit (circle home), Rotate (degrees) or Scatter (outward). A displacement a recipe or the AI set shows as itself and keeps all its settings when you change Order, Delay or the Particle ease.
  • Waveform (Wave only): Sine, Square, Saw, Triangle, Bounce, Noise, ExpDecay or Spike.
  • Strength is how strongly it applies: 0 to 100 for Wave, Drift and Attract (starting at 20, or 40 for Attract), 0 to 200 for Pulse, 0 to 500 for Scatter, and -1080 to 1080 degrees for Orbit and Rotate. A saved value outside the range widens the slider to hold it.
  • Path (Attract, Wake, Trail and Emit): where the magnet goes. Orbit circles the centre, Sweep crosses from left to right, and Recorded follows a take of your pointer. Recorded is greyed out until you have recorded one. Tracks from a Points layer are listed too, under Points: the magnet then follows that track, and you record or edit it on the Points layer.
  • Rec (magnet kinds): records a take. A 3-2-1 count-in shows on the frame, then the scene plays once from its start and the magnet follows your pointer, so the particles react while you move. The take ends when the scene does, or when you press Esc; a pointer outside the frame is held at its edge. The take is baked into the layer like every other setting, so the preview, scrubbing and the exported video all play the same path. Recording again replaces it, and Undo takes it back in one step.
  • Loop (beside Rec): Rec keeps playing the scene and every pass becomes a take, until you press Esc or Stop. The last five takes are kept; a pass you cut short counts only if it covers at least half the scene.
  • Take (once there are two or more): picks which take plays. The others stay, so you can switch back.
  • Punch in: while a take is playing, press Rec and hold the mouse button only over the part you want to redo. When the scene ends, just the held part is replaced and the rest of the take is kept, blended in over a few frames so the magnet never jumps. Recording without holding the button makes a whole new take instead.
  • Edit (Recorded only): shows the take's points on the frame where the magnet will be, even on a moved or scaled layer. Drag a point to move it, double-click a point to delete it, double-click the line to add one there. With a point selected, the arrow keys nudge it (Shift for bigger steps) and Delete removes it. Each change is one undo step, and Smooth afterwards keeps your edits.
  • Direction (Attract and Wake): Push (away), what Attract has always done, or Pull (toward), which draws particles in to the magnet and never past it.
  • Lag (Wake and Trail, 0 to 100): how much of the scene the effect looks back over. For Wake it is how long the channel stays open behind the magnet; for Trail, how long the tail is.
  • Spread: for Trail, how far each particle sits off the magnet's path (0 to 50); for Emit, how wide the stream fans out around the magnet's heading, in degrees (0 to 180, where 180 is every direction).
  • Life (Emit, 5 to 100): how much of the scene each particle lives before it fades out and is born again at the magnet.
  • When (Emit): Always, or While held, which only emits where you held the mouse button while recording the take.
  • Smooth (Recorded only, 0 to 100, starting at 40): evens out the take's wobble. It works from the full take you recorded, so you can go back to 0 at any time.
  • Order: Default, By index, By distance (from the centre) or Random (seeded), with Delay (0 to 4) setting the gap between particles. Order also sets the reveal order of a Shape's Reveal (draw-on) and the ripple of a radial Pulse.

Displace keeps its own clock: setting Motion's Speed to 0 does not stop it, and Motion's Amount does not scale it (Strength does). On linked scenes each scene keeps its own Displace, Strength, Waveform and Order, and the values blend at the cut. Setting a scene's Displace to None fades it out. Closing the Motion card removes its Displace and Order too; the Particle ease stays on Ease.

Worked example

A 1:1 music promo where a lattice pulses to a square wave.

  1. Start from a Particles layer on its hex lattice and add Motion.
  2. Under Displace, pick Wave (displace) and the Square waveform, with Strength at 30.
  3. Set Order to By distance and Delay to 1.5, so the pulse spreads out from the centre.
  4. Add Ease and choose an Emphasized curve under Particle ease for a punchier ramp.

Ideas

  • An Attract set to Pull that draws a scattered field towards the product shot.
  • A Wake that you record by sweeping across a lattice, so the field parts like water behind a boat.
  • A Trail on a small count that follows a recorded signature, for a hand-drawn logo reveal.
  • Emit set to While held, so sparks only fly where you pressed during the take.
  • A Recorded magnet traced along a product's outline, so the field parts around the pack as it is revealed.
  • A heat-haze look on a summer sale ad with Drift at a low Strength.
  • A linked pair of scenes where Wave on scene one fades to None on scene two, so the field calms as the price appears.

#Trail

Trail gives every particle a fading tail of copies. It has three sliders:

  • Copies (0 to 12) is how many trailing copies each particle has.
  • Time Offset (0 to 300) is how far back in time the copies reach. A longer reach gives a longer tail.
  • Alpha Tail (0 to 100) fades the tail along its length. At 0 there is no fade; at the top the furthest copy is fully transparent.

With particles on, the tail follows each particle's own motion. With particles off, it trails the layer along its keyframe path instead, which is a quick way to give a single moving object a motion streak. Trails multiply what is drawn, so on a large field start with 2 or 3 copies.

Ideas

  • A comet on a drawn path with 8 copies and a strong Alpha Tail.
  • A product that slides in on its keyframes with particles off and a 4-copy trail for a speed streak.

#Recipes

In the appCanvas > Vector (legacy flat panel)
Build this layer's whole particle chain from a recipe, in one step. Pick a recipe to see what it builds here before anything changes, then Apply recipe.

A recipe builds a layer's whole particle chain in one step: the Count, the shape, the motion and the extras, already tuned. Press + Recipe on the Vector card, beside + Add data. The Recipes picker opens over the editor with a Search recipes field, a category filter (All, Formation, Data, Modifier and Story) and 32 cards. Each card is a still preview drawn in your design system's colours, and it plays when you hover over it or focus it (not when your device asks for reduced motion). On an iPad there is no hover: tap a card to open it.

Pick a card and nothing changes yet. The picker shows what the recipe will build on this layer, module by module under Builds N modules, with a short hint for each one (Motion's start and end keyframes included). If the layer already has particle modules, it asks how to combine them:

  • Replace chain (the default) starts fresh with the recipe, so it lands exactly as it would on a new layer. The picker lists the modules it removes. Your seed and Perfect loop are kept.
  • Add on top keeps your modules and lets the recipe write over the settings it shares. A drawn Follow path or Emit on the layer survives. Replace keeps the drawing itself (a recipe never draws), and lists Follow / Emit among what it removes.

Press Apply recipe. The whole change is one undo step. The recipe's settings land in the ordinary cards (Count, Shape, Motion, Ease and the rest), so you tune a recipe exactly as you would tune your own work. The Vector card then shows a Made with note naming the recipe; its x dismisses the note only, and the modules keep their settings. All recipes takes you back to the list without applying anything.

Recipe used to be a card in the Movement group. It is now this one button, because a recipe is a whole chain rather than one step in it. Projects saved with the old card open unchanged and render the same.

The recipes are grouped by what they do:

  • Formation settles particles into a shape: Phyllotaxis bloom, Hex grid ripple, Organism swarm, Lissajous knot, Sphere wireframe, Growth spiral, Orbit system and Double helix.
  • Data covers chart and draw-on reveals: Data line + counter, Spiral draw-on, Tapered ribbon, Waveform, Ring gauge, Step chart, Funnel ribbon, Scatter trend, Stream flow, Circuit sweep, Constellation and Ticker count. See Chart line for how these are built.
  • Modifier covers field and force effects: Attractor grid, Radar ping, Heat shimmer, Aurora field, Heartbeat ring and Magnetic mesh.
  • Story holds multi-scene arcs, where linked layers melt into each other: Comet arc, Settle bloom, Crosswind dunes, Supernova, Ink drop and River run.

Ideas

  • Start a finance ad from Ring gauge and change the counter to your own figure.
  • Use Supernova across two linked scenes for a product reveal that bursts outward at the cut.
  • Take Heartbeat ring for a health or insurance ad and swap in the brand colours.

#Gradient Morph

In the appCanvas > Vector > Gradient Morph
Your brand colours morph across the vectors (by position) and over the scene (by progress). A pure function of progress, so it scrubs cleanly and is identical in preview and in the cloud render.

Pick the brand colours the vectors morph through across the scene. Morphs the glyph vectors. Rides the Animate Physics particle loop.

Gradient Morph runs your brand colours through the particles. Colour changes across the field by position and over the scene by progress, so a field can sweep from one brand colour to the next as the ad plays.

  • Stop 1 to Stop 4 pick the colours from your design system's brand palette, plus White and Black. Stops 3 and 4 can be None. It starts on your first two brand colours.
  • Spread (0 to 100, 0 by default) is how much the colour varies across the field at any one moment. At 0 every particle has the same colour and the whole field changes together; higher values sweep a gradient from left to right.
  • Cycles (1 to 8) is how many times the colours run through the whole ramp over the scene.

Editing any of these switches the particles on. Because the colour is worked out from progress alone, the preview and the rendered video always match. Set up your palette first in Design systems so the stops offer the right colours.

Ideas

  • A two-colour brand sweep with Spread 60, so the colour rolls across the logo from left to right.
  • A four-stop sunset palette with Cycles 1 for a slow, single change across a 15-second story.

#Displacement

In the appCanvas > Vector > Displacement
A media map pushes the particles outward - bright pixels displace, dark pixels keep still. The map bakes into the physics at author time, so it is identical in preview and in the cloud render. Rides the Animate Physics particle loop.

Sourced from the layer media slot. Load or generate an image in the media slot (great for AI masks) and it feeds the map; dropping one here fills that same slot. Strength sets the amount; Invert flips the mapping.

Displacement uses an image as a map: bright pixels push particles outward, dark pixels leave them where they are. The map is read when you set it up, not on every frame, so the preview and the render match.

  1. Drop an image into the slot, or click Use layer image if the layer already has media. The map and the layer's media slot are the same image.
  2. Set Strength (0 to 200, 100 by default). 0 is off and 200 is double strength. The slider stays disabled until a map is loaded.
  3. Turn on Invert to swap the rule, so dark pixels push and bright pixels stay still.

A soft, blurred greyscale image gives smooth bulges; a hard black and white mask gives sharp steps. An AI-generated mask works well as a map.

Ideas

  • A radial gradient map that bulges the centre of a lattice, like a lens, behind a single product.
  • A map of the brand's wordmark, so the lattice lifts where the letters are.

Try it in Wildfield

Build an animated, on-brand ad in every format from one project.

Wildfield is coming soon and opening to new teams in waves.

Start freeJoin the waitlist