Reference

Presets

Seven presets, one per example of the original magicpro.html page, one file each in src/config/presets/. Hover a card to see it move, click to enlarge it, or run one live.

Portal preset — Portal`portal`A rune ring with a spinning vortex that pulls violet and cyan dye into its eye.

Genie lamp preset — Genie lamp`genieLamp`Glowing blue smoke from a spout, wound into a column, puffing a ring every 3.6 s.

Ink preset — Ink`ink`Dense drops sinking and billowing in a sealed, backlit water tank.

Spell orbs preset — Spell orbs`spellOrbs`Three orbs on tilted orbits trailing glow, each carrying a point light.

Vortex rings preset — Vortex rings`vortexRings`A cannon firing tight, rolling smoke rings across the courtyard.

Dragon breath preset — Dragon breath`dragonBreath`Pulsing jets of green, palette-ramped fire with embers and heat haze.

Force field preset — Force field`forceField`Three coloured vents whose plumes part around a wandering energy sphere.

#Loading presets

const handles = magic.loadPreset('vortexRings');   // params + effects, fields cleared
magic.loadPreset('ink', { effects: false });       // params only: keep your own effects
magic.loadPreset('portal', { clear: false });      // keep the dye already in the air
magic.presetName;                                  // 'vortexRings', or 'custom' for an object

loadPreset() replaces params with DEFAULT_PARAMS merged with the preset, so nothing from the previous preset leaks through. With effects (the default) it removes every effect and adds the preset's, and it returns the new handles. With clear (the default) it clears the fluid. It also accepts a params object, such as the output of getParams().

MagicSystem.create({ preset }) loads one on creation: 'portal' by default, or null for no effects and the default params.

#Presets are plain data

A preset is a partial MagicParams plus an effects list of { type, options, intensity? }:

src/config/presets/vortexRings.js

/** Vortex Rings — a cannon firing tight, long-lived smoke rings across a moonlit courtyard. @type {import('../defaults.js').MagicParams} */
export default {
  controls: { swirl: 1, density: 1, buoyancy: 0, dissipation: 0.6, glow: 1, speed: 1 },
  physics: { weight: 0, damping: 0.02, cooling: 1, vorticity: 2.4, dissipation: 0.95, glowDissipation: 0.9, turbulence: 0.25 },
  render: { detail: 0.35, densityPower: 1.5 },
  lighting: { keyDirection: [0.25, 0.55, -0.8], keyColor: [1.9, 1.3, 0.8], ambient: [0.03, 0.04, 0.075], phaseG: 0.6 },
  effects: [
    {
      type: 'vortexRing',
      options: { position: [-0.672, 0.948, -0.495], direction: [0.781, 0.28, 0.558], interval: 1.05 },
    },
  ],
};

Effect options merge onto the effect's defaults, so the list stays short.

import { PRESETS, getPresetParams } from 'naturegl-magic';

Object.keys(PRESETS);            // ['portal', 'genieLamp', 'ink', 'spellOrbs', 'vortexRings', 'dragonBreath', 'forceField']
getPresetParams('ink');          // complete, deep-cloned params, including its effects array

getPresetParams() throws MagicSystem: unknown preset "…" for a name it doesn't know.

#Try one live

Starts on `dragonBreath`. Press 1–7 in the demo to switch presets.

#Reference

Name	Effects	What the physics changes
`portal`	`portal`	Buoyancy control 0.2, so the dye stays in the vortex. Otherwise the defaults
`genieLamp`	`genieLamp`	Low damping (0.05), cooling (0.14) and dissipation (0.08), so the smoke survives the climb; `sharpness` 0.6
`ink`	`ink`	Weight 1.15, no buoyancy, dissipation 0.02, `colorAbsorption` 1, a bright white key light, bloom 0.08
`spellOrbs`	`spellOrb` (3)	Buoyancy control 0.3, dissipation 0.35, glow dissipation 0.5
`vortexRings`	`vortexRing`	No buoyancy, damping 0.02, turbulence 0.25, a warm key light, `densityPower` 1.5
`dragonBreath`	`dragonBreath`	`burnRate` 5, weight 1.1, cooling 1.15, dissipation 0.1, the green flame palette, heat haze 1
`forceField`	3 × `emitter`, `forceField`	Damping 0.05, cooling 0.45, dissipation 0.14, glow dissipation 0.4