Phaser home
Log inCreate a game

← Expansion packsLook

Phaser AE

3D Trail Ribbons

Pro packv3.0.0-43DLook

Ribbons behind moving things in a 3D world, and deliberately not a strip of fading quads. A trail follows an object and reads as fire, plasma, a comet or a light-cycle wall, because its shader does the things a real trail does.

This is a Pro pack. Upgrade to Phaser Pro to use it in your games.See Phaser Pro →

Released October 14, 2026 · updated October 19, 2026

3D Trail Ribbons: a screenshot of its demo
A note about these graphics

Expansion packs don't come with graphics. This screenshot is one way of drawing what the pack does, made for its demo: none of the sprites, tiles or backgrounds in it are in the pack.

That's by design. A pack is a game's logic, mechanics and effects, and it works with whatever art you give it. Some packs draw effects, backdrops or 3D scenes of their own, but none carries a game's sprites.

So the look is yours. Make the art on phaser.io, bring your own, or let your agent draw it in code: the same pack can look like anything.

What it does

You start a trail that follows an object, or feed it points by hand, and the pack records where the object went. The recorded points are resampled evenly by distance and smoothed into a curve, so the ribbon is stable at any speed, and the ribbon is drawn by its own shader with the dials that make it read as more than a smear.

Every noise pattern in the ribbon is keyed on the distance the object has travelled, not on the position along the ribbon. A point on the path keeps its pattern as the ribbon slides forward, so the pattern stays pinned to the world and the trail slides through it: the afterimage a real trail leaves, rather than a painted appendage glued to the object. The ribbon also swells out of its emitter, starting narrow at the head, so a trail never outsizes the thing making it.

Trails join the 3D renderer's depth and camera, so the world hides them correctly. A trail can shed sparks along its path, spaced by distance rather than by frame, so a slow pass does not spray more than a fast one, and a teleport moves the head without drawing a streak across the world.

Features

  • Turbulence — noise flutters the tail sideways while the head stays anchored.
  • Erosion — noise holes toward the tail, so it shreds into wisps instead of dimming as a solid strip.
  • Hot core — a white-hot line down the centre, best with additive blending.
  • Fibre — streaks along the length, from a clean ribbon of light to fully streaked fire or smoke.
  • Hardness — from a soft gaussian falloff, like gas, to a crisp flat-topped band, like neon.
  • Crackle — electric glints crawling inside the ribbon, for lightning and plasma.
  • Two facings — view faces the camera; up stands a wall on the path, the light-cycle trail.
  • Sparks by distance — streaks or glints shed per world unit travelled, with their own speed, life, size, colours, gravity, drag and twinkle.
  • Colour stops and taper — head-to-tail colour stops, a taper to nothing at the tail, width, life and alpha.
  • Live dials and presets — every style field is live on the handle, and game.trails.preset starts a registered look with overrides.

Good for

  • Space and flying games — comet tails, rocket exhaust and wingtip vortices behind fast craft.
  • Light-cycle and arena games — vertical neon walls laid behind each vehicle, in the style of Tron.
  • Action and fighting games — sword swipes and blade arcs that shred as they fade.
  • Magic and fantasy — spells and wisps with crackle and sparks.
  • 3D shooters — trails behind ships and rockets, and smoke off a damaged engine.

Make it yours

A trail is a TrailSpec: what it follows and at what offset, its width, life, colour stops, blend, taper and alpha, how closely points are kept and how many, the six dials, the facing and the sparks. Every style field is live, so a trail can burn hotter as a ship boosts or crackle when it is charged. Ready-made looks come from vfx3d-trails, and a pack or a game can register its own with registerTrail3d.

Two very different uses: a clean neon wall, facing: 'up', with fiber: 0 and hard: 1, laid behind a vehicle on an arena floor; and a flaming comet facing the camera, fully streaked, eroding into wisps at the tail, with a white-hot core and sparks falling away under gravity.

A quick look

A trail behind a ship, tuned live as it boosts:

const trail = game.trails.add({ follow: ship, offset: { z: -1 }, width: 0.8, life: 0.5,
    colors: ['#ffffff', '#7ddcff', '#2a3cff'], core: 0.6, erode: 0.55, turbulence: 0.35,
    sparks: { per: 0.25, gravity: 4 } });
trail.core = 1;     // hotter while boosting
trail.stop();       // the tail runs out and the trail removes itself

Works with

  • render-3d — required; trails share its depth and camera.
  • particle-textures — required; the spark pictures.
  • vfx3d-trails — twelve ready-made looks, from flame and neon to sword slash and toxic.
  • particles-3d — sheds a trail's sparks, so a trail with sparks needs it composed; on its own, it makes a trail of separate particles rather than a continuous ribbon.
  • wisps-3d — for a standing column of steam or smoke rather than a trail behind a moving thing.

Good to know

  • One ribbon per trail: no branching, forks or lightning trees.
  • The centre line is rebuilt and uploaded each frame, so a very long trail at a very small spacing costs bandwidth; points caps it.
  • Trails test depth but do not write it and are not sorted against each other, so two crossing additive ribbons composite in draw order.
  • A wall with facing: 'up' ignores the camera by design, so seen from directly above it becomes a line.

More Look packs

Show all →