babylon.quarks-editor 0.23.0 → 0.24.1

package/CHANGELOG.md

@@ -4,6 +4,37 @@ All notable changes to the `babylon.quarks-editor` package are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and the project follows the `quarks.core` 0.x version line.
 
+## [0.24.1] — 2026-10-20
+
+### Fixed
+
+- With Babylon 9.31 the viewport lost its ground grid (the whole plane drew in flat grey) and the
+  gizmos, viewport selection and drop-to-place stopped responding: 9.31's grid needs `linesOnly`
+  for what opacity below 1 used to do, and `scene.pick` now needs `@babylonjs/core/Culling/ray`
+  imported for its side effect, which the editor now does.
+
+## [0.24.0] — 2026-10-20
+
+### Added
+
+- Main module: "Playback speed", "Fixed seed" (the system's random seed, for an effect that plays
+  out identically every time) and "Off screen" (the system's culling mode: always simulate, pause,
+  pause and catch up). Renderer module: "Rendering group", "Apply fog", "Sort mode" and "Limit
+  screen size" (min / max particle size as fractions of the viewport). Shape module: "Align to
+  direction". Noise module: "Scroll speed" and "Remap" (with its curve). Velocity module: "Orbital
+  offset" and "Radial". Sub Emitters module: "Inherit color / size / rotation / lifetime".
+- The editor now reaches everything the runtime can do. Shape module: Box (with emit from
+  volume / shell / edges) and Edge shapes. Main module: "Blend between two" start colour
+  (`ColorRange`) and "3D (axis + angle)" start rotation (`AxisAngleGenerator`). New modules:
+  "Rotation over Lifetime (3D)" for mesh particles (axis + angle, per axis, random) and
+  "Sequences" (`ApplySequences`: sequences read from an image's opaque pixels, with time window,
+  scale and position). Renderer module: "Layer mask", "Max particles", billboard "Pivot", the
+  trail flags (record in world space, UV from head, color from particle, die with particle, head
+  width scale) and, for meshes, an environment-map atlas picked from the host's textures with its
+  reflection level.
+- "Random between two" fields label their min and max inputs. Export and Save warn when the
+  effect references `blob:` textures, which do not survive a reload.
+
 ## [0.23.0] — 2026-10-18
 
 ### Added

package/dist/core/galleryScene.d.ts

@@ -1,3 +1,4 @@
+import '@babylonjs/core/Culling/ray';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import type { Scene } from '@babylonjs/core/scene';
 import type { BatchedRenderer } from 'babylon.quarks';

package/dist/core/galleryScene.js

@@ -1,3 +1,4 @@
+import '@babylonjs/core/Culling/ray';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import { DEFAULT_GALLERY_SPACING, galleryGridPosition } from './galleryLayout';
 /** Clears live particles and freezes simulation for one scene entry. */

package/dist/core/material.d.ts

@@ -6,6 +6,9 @@ export interface RendererMaterialPatch {
     depthWrite?: boolean;
     alphaTest?: number;
     texture?: unknown;
+    /** A 3×2 cube-face atlas mesh particles reflect, or null for none. */
+    reflectionAtlas?: unknown;
+    reflectionLevel?: number;
 }
 /** Applies renderer material settings and keeps imported QuarksMaterial JSON in sync for export. */
 export declare function applyRendererMaterial(system: ParticleSystem, patch: RendererMaterialPatch): void;

package/dist/core/material.js

@@ -22,6 +22,12 @@ export function applyRendererMaterial(system, patch) {
     if (patch.texture !== undefined) {
         system.texture = patch.texture;
     }
+    if (patch.reflectionAtlas !== undefined) {
+        settings.reflectionAtlas = patch.reflectionAtlas;
+    }
+    if (patch.reflectionLevel !== undefined) {
+        settings.reflectionLevel = patch.reflectionLevel;
+    }
     const material = system.material;
     if (isEditableMaterialRecord(material)) {
         if (patch.blendMode !== undefined) {
@@ -44,6 +50,12 @@ export function applyRendererMaterial(system, patch) {
             material.texture = patch.texture;
             material.map = patch.texture;
         }
+        if (patch.reflectionAtlas !== undefined) {
+            material.reflectionAtlas = patch.reflectionAtlas;
+        }
+        if (patch.reflectionLevel !== undefined) {
+            material.reflectionLevel = patch.reflectionLevel;
+        }
     }
     system.neededToUpdateRender = true;
 }

package/dist/core/shapes.d.ts

@@ -1,7 +1,7 @@
 import type { Mesh } from '@babylonjs/core/Meshes/mesh';
 import type { EmitterShape } from 'babylon.quarks';
-import { EmitterMode } from 'babylon.quarks';
-export type ShapeType = 'point' | 'sphere' | 'hemisphere' | 'cone' | 'circle' | 'donut' | 'rectangle' | 'grid' | 'mesh_surface';
+import { BoxEmitFrom, EmitterMode } from 'babylon.quarks';
+export type ShapeType = 'point' | 'sphere' | 'hemisphere' | 'cone' | 'circle' | 'donut' | 'rectangle' | 'grid' | 'box' | 'edge' | 'mesh_surface';
 export declare const SHAPE_TYPES: Array<{
     value: ShapeType;
     label: string;
@@ -18,6 +18,12 @@ export interface ShapeParams {
     spread: number;
     column: number;
     row: number;
+    /** Box depth (Z). */
+    depth: number;
+    /** Where a box emits from: its volume, its faces or its edges. */
+    emitFrom: BoxEmitFrom;
+    /** How fast an edge emitter's loop / ping-pong point travels, in lengths per second. */
+    speed: number;
     mesh?: Mesh;
 }
 export declare const DEFAULT_SHAPE_PARAMS: ShapeParams;

package/dist/core/shapes.js

@@ -1,4 +1,4 @@
-import { CircleEmitter, ConeEmitter, DonutEmitter, EmitterMode, GridEmitter, HemisphereEmitter, MeshSurfaceEmitter, PointEmitter, RectangleEmitter, SphereEmitter, } from 'babylon.quarks';
+import { BoxEmitFrom, BoxEmitter, CircleEmitter, ConeEmitter, ConstantValue, DonutEmitter, EdgeEmitter, EmitterMode, GridEmitter, HemisphereEmitter, MeshSurfaceEmitter, PointEmitter, RectangleEmitter, SphereEmitter, } from 'babylon.quarks';
 export const SHAPE_TYPES = [
     { value: 'cone', label: 'Cone' },
     { value: 'sphere', label: 'Sphere' },
@@ -7,6 +7,8 @@ export const SHAPE_TYPES = [
     { value: 'donut', label: 'Donut' },
     { value: 'rectangle', label: 'Rectangle' },
     { value: 'grid', label: 'Grid' },
+    { value: 'box', label: 'Box' },
+    { value: 'edge', label: 'Edge' },
     { value: 'mesh_surface', label: 'Mesh surface' },
     { value: 'point', label: 'Point' },
 ];
@@ -22,6 +24,9 @@ export const DEFAULT_SHAPE_PARAMS = {
     spread: 0,
     column: 10,
     row: 10,
+    depth: 1,
+    emitFrom: BoxEmitFrom.Volume,
+    speed: 1,
     mesh: undefined,
 };
 export function getShapeType(shape) {
@@ -43,6 +48,9 @@ export function readShapeParams(shape) {
         height: num('height', DEFAULT_SHAPE_PARAMS.height),
         column: num('column', DEFAULT_SHAPE_PARAMS.column),
         row: num('row', DEFAULT_SHAPE_PARAMS.row),
+        depth: num('depth', DEFAULT_SHAPE_PARAMS.depth),
+        emitFrom: num('emitFrom', DEFAULT_SHAPE_PARAMS.emitFrom),
+        speed: anyShape.speed instanceof ConstantValue ? anyShape.speed.value : DEFAULT_SHAPE_PARAMS.speed,
         mesh: anyShape.mesh,
     };
 }
@@ -57,6 +65,8 @@ export const SHAPE_PARAM_KEYS = {
     donut: ['radius', 'arc', 'thickness', 'donutRadius'],
     rectangle: ['width', 'height'],
     grid: ['width', 'height', 'column', 'row'],
+    box: ['width', 'height', 'depth'],
+    edge: ['radius', 'speed'],
     mesh_surface: [],
 };
 export function createShape(type, params) {
@@ -119,6 +129,20 @@ export function createShape(type, params) {
                 column: params.column,
                 row: params.row,
             });
+        case 'box':
+            return new BoxEmitter({
+                width: params.width,
+                height: params.height,
+                depth: params.depth,
+                emitFrom: params.emitFrom,
+            });
+        case 'edge':
+            return new EdgeEmitter({
+                radius: params.radius,
+                mode: params.mode,
+                spread: params.spread,
+                speed: new ConstantValue(params.speed),
+            });
         case 'mesh_surface':
             return new MeshSurfaceEmitter(params.mesh);
     }

package/dist/core/viewportPicker.d.ts

@@ -1,3 +1,4 @@
+import '@babylonjs/core/Culling/ray';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import type { Scene } from '@babylonjs/core/scene';
 import type { SceneEntry } from './sceneEntries';

package/dist/core/viewportPicker.js

@@ -1,3 +1,4 @@
+import '@babylonjs/core/Culling/ray';
 import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
 import { EDITOR_SCENE_NODE_METADATA } from './editorScene';
 import { GROUND_RING_RADIUS, GalleryHoverMarker } from './gallerySelectionMarker';

package/dist/react/EffectEditor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useSyncExternalStore } from 'react';
 import { EffectBinding } from '../core/binding';
-import { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, InheritVelocityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, VelocityOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
+import { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, InheritVelocityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, Rotation3DOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SequencesModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, VelocityOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
 import { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
 import { ObjectModule } from './ObjectModule';
 import { SubEmittersModule } from './SubEmittersModule';
@@ -31,5 +31,5 @@ export const EffectEditor = React.memo(function EffectEditor(props) {
     useEffect(() => (binding === props.binding ? undefined : binding.subscribe(() => props.binding.markChanged())), [binding, props.binding]);
     useSyncExternalStore((onStoreChange) => binding.subscribe(onStoreChange), () => binding.getRevision());
     const gizmoTargetIsEmitter = allSystems.some((s) => s.emitter === props.gizmoTargetNode);
-    return (_jsxs("div", { style: { fontFamily: theme.font, color: theme.text }, children: [_jsx(ObjectModule, { node: props.gizmoTargetNode, label: props.gizmoTargetLabel, onBeforeChange: () => props.binding.onBeforeChange?.(), onChanged: () => props.binding.markChanged() }), !gizmoTargetIsEmitter && (_jsxs("div", { style: { fontSize: 11, color: theme.textDim, margin: '0 0 10px', lineHeight: 1.45 }, children: ["Modules below edit ", _jsx("strong", { children: activeSystem.emitter.name || 'particle system' }), ". Select its emitter in the timeline to move it with the gizmo."] })), _jsx(MainModule, { binding: binding }), _jsx(EmissionModule, { binding: binding }), _jsx(ShapeModule, { binding: binding }), _jsx(EmitDirectionModule, { binding: binding }), _jsx(VelocityOverLifeModule, { binding: binding }), _jsx(SpeedOverLifeModule, { binding: binding }), _jsx(LimitSpeedOverLifeModule, { binding: binding }), _jsx(InheritVelocityModule, { binding: binding }), _jsx(ForceOverLifeModule, { binding: binding }), _jsx(GravityModule, { binding: binding }), _jsx(OrbitOverLifeModule, { binding: binding }), _jsx(ColorOverLifeModule, { binding: binding }), _jsx(ColorBySpeedModule, { binding: binding }), _jsx(SizeOverLifeModule, { binding: binding }), _jsx(SizeBySpeedModule, { binding: binding }), _jsx(RotationOverLifeModule, { binding: binding }), _jsx(RotationBySpeedModule, { binding: binding }), _jsx(NoiseModule, { binding: binding }), _jsx(TurbulenceModule, { binding: binding }), _jsx(CollisionModule, { binding: binding }), _jsx(WidthOverTrailModule, { binding: binding }), _jsx(SubEmittersModule, { binding: binding, rootBinding: props.binding }), _jsx(TextureSheetModule, { binding: binding }), _jsx(RendererModule, { binding: binding, textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture, resolveGeometry: props.resolveGeometry })] }));
+    return (_jsxs("div", { style: { fontFamily: theme.font, color: theme.text }, children: [_jsx(ObjectModule, { node: props.gizmoTargetNode, label: props.gizmoTargetLabel, onBeforeChange: () => props.binding.onBeforeChange?.(), onChanged: () => props.binding.markChanged() }), !gizmoTargetIsEmitter && (_jsxs("div", { style: { fontSize: 11, color: theme.textDim, margin: '0 0 10px', lineHeight: 1.45 }, children: ["Modules below edit ", _jsx("strong", { children: activeSystem.emitter.name || 'particle system' }), ". Select its emitter in the timeline to move it with the gizmo."] })), _jsx(MainModule, { binding: binding }), _jsx(EmissionModule, { binding: binding }), _jsx(ShapeModule, { binding: binding }), _jsx(EmitDirectionModule, { binding: binding }), _jsx(VelocityOverLifeModule, { binding: binding }), _jsx(SpeedOverLifeModule, { binding: binding }), _jsx(LimitSpeedOverLifeModule, { binding: binding }), _jsx(InheritVelocityModule, { binding: binding }), _jsx(ForceOverLifeModule, { binding: binding }), _jsx(GravityModule, { binding: binding }), _jsx(OrbitOverLifeModule, { binding: binding }), _jsx(ColorOverLifeModule, { binding: binding }), _jsx(ColorBySpeedModule, { binding: binding }), _jsx(SizeOverLifeModule, { binding: binding }), _jsx(SizeBySpeedModule, { binding: binding }), _jsx(RotationOverLifeModule, { binding: binding }), _jsx(Rotation3DOverLifeModule, { binding: binding }), _jsx(RotationBySpeedModule, { binding: binding }), _jsx(NoiseModule, { binding: binding }), _jsx(TurbulenceModule, { binding: binding }), _jsx(CollisionModule, { binding: binding }), _jsx(WidthOverTrailModule, { binding: binding }), _jsx(SubEmittersModule, { binding: binding, rootBinding: props.binding }), _jsx(TextureSheetModule, { binding: binding }), _jsx(SequencesModule, { binding: binding, textureOptions: props.textureOptions }), _jsx(RendererModule, { binding: binding, textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture, resolveGeometry: props.resolveGeometry })] }));
 });

package/dist/react/EffectEditorHost.d.ts

@@ -1,3 +1,4 @@
+import '@babylonjs/core/Culling/ray';
 import { Scene } from '@babylonjs/core/scene';
 import { BatchedRenderer } from 'babylon.quarks';
 import React from 'react';

package/dist/react/EffectEditorHost.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
+// scene.pick lives in Ray's side effect (Babylon 9.31 no longer pulls it in); gizmos pick through it.
+import '@babylonjs/core/Culling/ray';
 import { Engine } from '@babylonjs/core/Engines/engine';
 import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents';
 import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager';
@@ -48,6 +50,18 @@ import { TimelinePanel } from './TimelinePanel';
 import { TransportBar } from './TransportBar';
 import { iconStyle } from './icons';
 import { buttonStyle, globalEditorStyles, theme } from './theme';
+/**
+ * The effect's JSON, with a warning when it points at object URLs: a texture
+ * dropped in from disk lives at a `blob:` URL that dies with the page, so the
+ * exported effect would load without it.
+ */
+function exportEffectJSON(binding, warn) {
+    const json = binding.exportJSON('EditorEffect');
+    if (json.includes('"blob:')) {
+        warn('This effect references blob: textures, which will not load after a reload. Re-pick them from a hosted URL.');
+    }
+    return json;
+}
 const SCENE_SAVE_INFO_KEY = 'babylon.quarks-editor:scene-save-info-seen';
 function toStoredAsset(asset) {
     return { path: asset.path, name: asset.name, json: asset.json, missingFiles: asset.missingFiles };
@@ -281,6 +295,9 @@ export function EffectEditorHost(props) {
         groundMaterial.mainColor = new Color3(1, 1, 1);
         groundMaterial.lineColor = new Color3(1, 1, 1);
         groundMaterial.opacity = 0.5;
+        // Draw only the lines. Babylon < 9.31 did this by itself for opacity < 1; 9.31 needs the flag,
+        // or the whole plane is filled with the main color.
+        groundMaterial.linesOnly = true;
         const ground = MeshBuilder.CreateGround('ground', { width: 100, height: 100 }, scene);
         ground.material = groundMaterial;
         const gizmoUtilityLayer = new UtilityLayerRenderer(scene);
@@ -1619,7 +1636,7 @@ export function EffectEditorHost(props) {
                                                 }, onCancel: () => setRenamingRoot(false) })), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }, children: [_jsx("button", { className: "qe-hover", style: buttonStyle, disabled: !binding, onClick: () => {
                                                             if (!binding)
                                                                 return;
-                                                            const blob = new Blob([binding.exportJSON('EditorEffect')], {
+                                                            const blob = new Blob([exportEffectJSON(binding, showToast)], {
                                                                 type: 'application/json',
                                                             });
                                                             const link = document.createElement('a');
@@ -1627,7 +1644,7 @@ export function EffectEditorHost(props) {
                                                             link.download = `${binding.root.name || 'effect'}.json`;
                                                             link.click();
                                                             URL.revokeObjectURL(link.href);
-                                                        }, children: "Export" }), props.onSave && (_jsx("button", { className: "qe-hover", style: buttonStyle, disabled: !binding, onClick: () => binding && props.onSave(binding.exportJSON('EditorEffect')), children: "Save" }))] })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '6px 14px 20px' }, children: inspectorBinding && inspectorSystem && inspectorNode ? (_jsx(EffectEditor, { binding: inspectorBinding, selectedSystem: inspectorSystem, gizmoTargetNode: inspectorNode, gizmoTargetLabel: inspectorNode.name || 'Node', textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture ? resolveTextureForEditor : undefined, resolveGeometry: props.resolveGeometry ? resolveGeometryForEditor : undefined })) : (_jsx("div", { style: { fontSize: 13, color: theme.textDim, lineHeight: 1.5 }, children: "No effect selected." })) })] })] }), _jsxs("div", { "aria-hidden": !drawerOpen && !drawerPinned, style: {
+                                                        }, children: "Export" }), props.onSave && (_jsx("button", { className: "qe-hover", style: buttonStyle, disabled: !binding, onClick: () => binding && props.onSave(exportEffectJSON(binding, showToast)), children: "Save" }))] })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '6px 14px 20px' }, children: inspectorBinding && inspectorSystem && inspectorNode ? (_jsx(EffectEditor, { binding: inspectorBinding, selectedSystem: inspectorSystem, gizmoTargetNode: inspectorNode, gizmoTargetLabel: inspectorNode.name || 'Node', textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture ? resolveTextureForEditor : undefined, resolveGeometry: props.resolveGeometry ? resolveGeometryForEditor : undefined })) : (_jsx("div", { style: { fontSize: 13, color: theme.textDim, lineHeight: 1.5 }, children: "No effect selected." })) })] })] }), _jsxs("div", { "aria-hidden": !drawerOpen && !drawerPinned, style: {
                             height: DRAWER_HEIGHT,
                             display: 'flex',
                             flexDirection: 'column',

package/dist/react/SubEmittersModule.js

@@ -35,5 +35,7 @@ export function SubEmittersModule(props) {
                             { value: SubParticleEmitMode.Death, label: 'On death' },
                             { value: SubParticleEmitMode.Birth, label: 'On birth' },
                             { value: SubParticleEmitMode.Frame, label: 'Every frame' },
-                        ], onChange: (mode) => binding.apply(() => (behavior.mode = mode)) }) }), _jsx(Row, { label: "Probability", children: _jsx(NumberField, { value: behavior.emitProbability, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.emitProbability = Math.min(1, v))) }) }), _jsx(Row, { label: "Use velocity", children: _jsx(CheckboxField, { value: behavior.useVelocityAsBasis, onChange: (v) => binding.apply(() => (behavior.useVelocityAsBasis = v)) }) }), _jsxs("p", { style: { margin: '8px 0 2px', color: theme.textDim, fontSize: 11.5 }, children: ["Spawns \u201C", target?.emitter.name ?? 'sub-emitter', "\u201D \u2014 select it in the hierarchy above to edit it."] })] })) }));
+                        ], onChange: (mode) => binding.apply(() => (behavior.mode = mode)) }) }), _jsx(Row, { label: "Probability", children: _jsx(NumberField, { value: behavior.emitProbability, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.emitProbability = Math.min(1, v))) }) }), _jsx(Row, { label: "Use velocity", children: _jsx(CheckboxField, { value: behavior.useVelocityAsBasis, onChange: (v) => binding.apply(() => (behavior.useVelocityAsBasis = v)) }) }), ['color', 'size', 'rotation', 'lifetime'].map((property) => (_jsx(Row, { label: `Inherit ${property}`, children: _jsx(CheckboxField, { value: behavior.inherit.includes(property), onChange: (v) => binding.apply(() => (behavior.inherit = v
+                            ? [...behavior.inherit.filter((p) => p !== property), property]
+                            : behavior.inherit.filter((p) => p !== property))) }) }, property))), _jsxs("p", { style: { margin: '8px 0 2px', color: theme.textDim, fontSize: 11.5 }, children: ["Spawns \u201C", target?.emitter.name ?? 'sub-emitter', "\u201D \u2014 select it in the hierarchy above to edit it."] })] })) }));
 }

package/dist/react/ValueField.d.ts

@@ -1,8 +1,5 @@
+import React from 'react';
 import { ScalarGenerator } from '../core/values';
-/**
- * Unity-like value field: Constant | Random Between Two Constants | Curve,
- * bound to a quarks value generator.
- */
 export declare function ValueField(props: {
     label: string;
     hint?: string;
@@ -11,4 +8,4 @@ export declare function ValueField(props: {
     onChange: (generator: ScalarGenerator) => void;
     min?: number;
     curveMax?: number;
-}): import("react").JSX.Element;
+}): React.JSX.Element;

package/dist/react/ValueField.js

@@ -6,6 +6,7 @@ import { NumberField, Row, SelectField } from './fields';
  * Unity-like value field: Constant | Random Between Two Constants | Curve,
  * bound to a quarks value generator.
  */
+const captionStyle = { fontSize: 10.5, opacity: 0.6, flex: 'none' };
 export function ValueField(props) {
     const state = readScalar(props.generator);
     const commit = (patch) => {
@@ -15,5 +16,5 @@ export function ValueField(props) {
                         { value: 'constant', label: 'Constant' },
                         { value: 'random', label: 'Random between two' },
                         { value: 'curve', label: 'Curve' },
-                    ], onChange: (mode) => commit({ mode }) }) }), state.mode === 'constant' && (_jsx(Row, { label: "", children: _jsx(NumberField, { value: state.value, min: props.min, onChange: (value) => commit({ value }) }) })), state.mode === 'random' && (_jsx(Row, { label: "", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: state.min, min: props.min, onChange: (min) => commit({ min }) }), _jsx(NumberField, { value: state.max, min: props.min, onChange: (max) => commit({ max }) })] }) })), state.mode === 'curve' && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(props.generator), maxValue: props.curveMax, onChange: (pieces) => props.onChange(buildCurve(pieces)) }) }))] }));
+                    ], onChange: (mode) => commit({ mode }) }) }), state.mode === 'constant' && (_jsx(Row, { label: "", children: _jsx(NumberField, { value: state.value, min: props.min, onChange: (value) => commit({ value }) }) })), state.mode === 'random' && (_jsx(Row, { label: "", children: _jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [_jsx("span", { style: captionStyle, children: "min" }), _jsx(NumberField, { value: state.min, min: props.min, onChange: (min) => commit({ min }) }), _jsx("span", { style: captionStyle, children: "max" }), _jsx(NumberField, { value: state.max, min: props.min, onChange: (max) => commit({ max }) })] }) })), state.mode === 'curve' && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(props.generator), maxValue: props.curveMax, onChange: (pieces) => props.onChange(buildCurve(pieces)) }) }))] }));
 }

package/dist/react/behaviorModules.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { EffectBinding } from '../core/binding';
+import type { TextureOption } from './modules';
 interface ModuleProps {
     binding: EffectBinding;
 }
@@ -10,6 +11,16 @@ export declare function VelocityOverLifeModule({ binding }: ModuleProps): React.
 export declare function InheritVelocityModule({ binding }: ModuleProps): React.JSX.Element;
 export declare function GravityModule({ binding }: ModuleProps): React.JSX.Element;
 export declare function RotationOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+/** Turns mesh particles by a 3D angular velocity; billboards turn through Rotation over Lifetime. */
+export declare function Rotation3DOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+/**
+ * Moves particles, one after another, onto the opaque pixels of an image (a
+ * logo or a word drawn from sparks). Each sequence is read from an image once;
+ * its points, scale, position and time window are what gets saved.
+ */
+export declare function SequencesModule({ binding, textureOptions }: ModuleProps & {
+    textureOptions?: TextureOption[];
+}): React.JSX.Element;
 export declare function NoiseModule({ binding }: ModuleProps): React.JSX.Element;
 export declare function TurbulenceModule({ binding }: ModuleProps): React.JSX.Element;
 export declare function EmitDirectionModule({ binding }: ModuleProps): React.JSX.Element;

package/dist/react/behaviorModules.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ApplyCollision, ApplyForce, ChangeEmitDirection, ColorBySpeed, ConstantValue, ForceOverLife, FrameOverLife, getPhysicsResolver, Gradient, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TurbulenceField, Vector3, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
+import { PlusIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { ApplyCollision, ApplyForce, ApplySequences, AxisAngleGenerator, Bezier, ChangeEmitDirection, ColorBySpeed, ConstantValue, EulerGenerator, ForceOverLife, FrameOverLife, getPhysicsResolver, Gradient, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, PiecewiseBezier, RandomQuatGenerator, Rotation3DOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TextureSequencer, TurbulenceField, Vector3, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
+import React from 'react';
 import { buildGradient, DEFAULT_GRADIENT_STOPS, findBehavior, readGradientStops } from '../core/colors';
 import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values';
 import { CurveEditor } from './CurveEditor';
 import { CheckboxField, NumberField, Row, SelectField } from './fields';
 import { GradientEditor } from './GradientEditor';
+import { iconStyle } from './icons';
 import { ModuleSection } from './ModuleSection';
+import { theme } from './theme';
 import { ValueField } from './ValueField';
 function removeBehaviorOfType(behaviors, type) {
     for (let i = behaviors.length - 1; i >= 0; i--) {
@@ -37,7 +41,7 @@ export function VelocityOverLifeModule({ binding }) {
     return (_jsx(BehaviorModule, { binding: binding, title: "Velocity over Lifetime", type: "VelocityOverLife", create: () => new VelocityOverLife(new ConstantValue(0), new ConstantValue(1), new ConstantValue(0)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Space", children: _jsx(SelectField, { value: behavior.space, options: [
                             { value: 'local', label: 'Local' },
                             { value: 'world', label: 'World' },
-                        ], onChange: (v) => binding.apply(() => (behavior.space = v)) }) }), _jsx(ValueField, { label: "Linear X", generator: behavior.linearX, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearX = g)) }), _jsx(ValueField, { label: "Linear Y", generator: behavior.linearY, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearY = g)) }), _jsx(ValueField, { label: "Linear Z", generator: behavior.linearZ, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearZ = g)) }), _jsx(ValueField, { label: "Orbital X", generator: behavior.orbitalX, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalX = g)) }), _jsx(ValueField, { label: "Orbital Y", generator: behavior.orbitalY, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalY = g)) }), _jsx(ValueField, { label: "Orbital Z", generator: behavior.orbitalZ, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalZ = g)) })] })) }));
+                        ], onChange: (v) => binding.apply(() => (behavior.space = v)) }) }), _jsx(ValueField, { label: "Linear X", generator: behavior.linearX, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearX = g)) }), _jsx(ValueField, { label: "Linear Y", generator: behavior.linearY, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearY = g)) }), _jsx(ValueField, { label: "Linear Z", generator: behavior.linearZ, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearZ = g)) }), _jsx(ValueField, { label: "Orbital X", generator: behavior.orbitalX, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalX = g)) }), _jsx(ValueField, { label: "Orbital Y", generator: behavior.orbitalY, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalY = g)) }), _jsx(ValueField, { label: "Orbital Z", generator: behavior.orbitalZ, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalZ = g)) }), _jsx(Vector3Row, { label: "Orbital offset", value: behavior.orbitalOffset, onChange: (v) => binding.apply(() => (behavior.orbitalOffset = v)) }), _jsx(ValueField, { label: "Radial", generator: behavior.radial, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.radial = g)) })] })) }));
 }
 export function InheritVelocityModule({ binding }) {
     return (_jsx(BehaviorModule, { binding: binding, title: "Inherit Velocity", type: "InheritVelocity", create: () => new InheritVelocity(new ConstantValue(1), 'initial'), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Mode", hintKey: "inheritVelocity.mode", children: _jsx(SelectField, { value: behavior.mode, options: [
@@ -51,8 +55,82 @@ export function GravityModule({ binding }) {
 export function RotationOverLifeModule({ binding }) {
     return (_jsx(BehaviorModule, { binding: binding, title: "Rotation over Lifetime", type: "RotationOverLife", create: () => new RotationOverLife(new ConstantValue(Math.PI)), children: (behavior) => (_jsx(ValueField, { hintKey: "rotationOverLife.velocity", label: "Velocity (rad/s)", generator: behavior.angularVelocity, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.angularVelocity = g)) })) }));
 }
+/** Turns mesh particles by a 3D angular velocity; billboards turn through Rotation over Lifetime. */
+export function Rotation3DOverLifeModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Rotation over Lifetime (3D)", type: "Rotation3DOverLife", create: () => new Rotation3DOverLife(new AxisAngleGenerator(new Vector3(0, 1, 0), new ConstantValue(Math.PI))), children: (behavior) => {
+            const generator = behavior.angularVelocity;
+            const mode = generator instanceof AxisAngleGenerator
+                ? 'axisAngle'
+                : generator instanceof EulerGenerator
+                    ? 'euler'
+                    : 'random';
+            const axisAngle = generator instanceof AxisAngleGenerator ? generator : undefined;
+            const euler = generator instanceof EulerGenerator ? generator : undefined;
+            return (_jsxs(_Fragment, { children: [_jsx("p", { style: { margin: '2px 0 6px', color: theme.textDim, fontSize: 11.5 }, children: "Mesh particles only; billboards spin with Rotation over Lifetime." }), _jsx(Row, { label: "Mode", children: _jsx(SelectField, { value: mode, options: [
+                                { value: 'axisAngle', label: 'Axis + angle' },
+                                { value: 'euler', label: 'Per axis' },
+                                { value: 'random', label: 'Random' },
+                            ], onChange: (next) => binding.apply(() => {
+                                behavior.angularVelocity =
+                                    next === 'axisAngle'
+                                        ? new AxisAngleGenerator(new Vector3(0, 1, 0), new ConstantValue(Math.PI))
+                                        : next === 'euler'
+                                            ? new EulerGenerator(new ConstantValue(0), new ConstantValue(Math.PI), new ConstantValue(0))
+                                            : new RandomQuatGenerator();
+                            }) }) }), axisAngle && (_jsxs(_Fragment, { children: [_jsx(Vector3Row, { label: "Axis", value: axisAngle.axis, step: 0.1, onChange: (v) => binding.apply(() => (behavior.angularVelocity = new AxisAngleGenerator(v, axisAngle.angle))) }), _jsx(ValueField, { label: "Angle (rad/s)", generator: axisAngle.angle, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.angularVelocity = new AxisAngleGenerator(axisAngle.axis.clone(), g))) })] })), euler &&
+                        ['angleX', 'angleY', 'angleZ'].map((key) => (_jsx(ValueField, { label: `${key.slice(-1)} (rad/s)`, generator: euler[key], curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.angularVelocity = new EulerGenerator(key === 'angleX' ? g : euler.angleX, key === 'angleY' ? g : euler.angleY, key === 'angleZ' ? g : euler.angleZ))) }, key)))] }));
+        } }));
+}
+/**
+ * Moves particles, one after another, onto the opaque pixels of an image (a
+ * logo or a word drawn from sparks). Each sequence is read from an image once;
+ * its points, scale, position and time window are what gets saved.
+ */
+export function SequencesModule({ binding, textureOptions }) {
+    const [imageUrl, setImageUrl] = React.useState(textureOptions?.[0]?.url ?? '');
+    const [threshold, setThreshold] = React.useState(0.5);
+    const [status, setStatus] = React.useState(null);
+    const addFromImage = async (behavior) => {
+        if (!imageUrl) {
+            setStatus('Pick an image first.');
+            return;
+        }
+        try {
+            const image = new Image();
+            image.crossOrigin = 'anonymous';
+            image.src = imageUrl;
+            await image.decode();
+            const sequencer = new TextureSequencer(0.05, 0.05, new Vector3());
+            sequencer.fromImage(image, threshold);
+            const last = behavior.sequencers[behavior.sequencers.length - 1];
+            const start = last ? last[0].b : 0;
+            binding.apply(() => behavior.appendSequencer(new IntervalValue(start, start + 2), sequencer));
+            setStatus(`${sequencer.locations.length} points read.`);
+        }
+        catch (error) {
+            setStatus(`Could not read the image: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    };
+    const pair = (a, b, onA, onB, step) => (_jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: a, step: step, onChange: onA }), _jsx(NumberField, { value: b, step: step, onChange: onB })] }));
+    return (_jsx(BehaviorModule, { binding: binding, title: "Sequences", type: "ApplySequences", create: () => new ApplySequences(0.001), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("p", { style: { margin: '2px 0 6px', color: theme.textDim, fontSize: 11.5 }, children: "Particles fly, one after another, onto the opaque pixels of an image during each sequence's time window." }), _jsx(Row, { label: "Delay per particle", children: _jsx(NumberField, { value: behavior.delay, min: 0, step: 0.001, onChange: (v) => binding.apply(() => (behavior.delay = Math.max(0, v))) }) }), behavior.sequencers.map(([range, sequencer], index) => {
+                    const texture = sequencer;
+                    return (_jsxs("div", { style: {
+                            border: `1px solid ${theme.border}`,
+                            borderRadius: 6,
+                            padding: '4px 6px',
+                            marginTop: 6,
+                        }, children: [_jsxs(Row, { label: `Sequence ${index + 1}`, children: [_jsxs("span", { style: { fontSize: 11.5, color: theme.textDim }, children: [texture.locations?.length ?? 0, " points"] }), _jsx("button", { className: "qe-hover", style: {
+                                            marginLeft: 'auto',
+                                            background: 'none',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                        }, title: "Remove sequence", onClick: () => binding.apply(() => behavior.sequencers.splice(index, 1)), children: _jsx(XMarkIcon, { style: iconStyle(13) }) })] }), _jsx(Row, { label: "Time from / to (s)", children: pair(range.a, range.b, (v) => binding.apply(() => (range.a = v)), (v) => binding.apply(() => (range.b = v)), 0.1) }), texture.locations !== undefined && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Scale X / Y", children: pair(texture.scaleX, texture.scaleY, (v) => binding.apply(() => (texture.scaleX = v)), (v) => binding.apply(() => (texture.scaleY = v)), 0.01) }), _jsx(Vector3Row, { label: "Position", value: texture.position, step: 0.1, onChange: (v) => binding.apply(() => texture.position.copy(v)) })] }))] }, index));
+                }), _jsx(Row, { label: "Image", children: textureOptions && textureOptions.length > 0 ? (_jsx(SelectField, { value: imageUrl, options: textureOptions.map((option) => ({ value: option.url, label: option.label })), onChange: (url) => setImageUrl(url) })) : (_jsx("input", { className: "qe-hover", style: { flex: 1, minWidth: 0, fontSize: 12 }, placeholder: "Image URL", value: imageUrl, onChange: (event) => setImageUrl(event.target.value) })) }), _jsx(Row, { label: "Alpha threshold", children: _jsx(NumberField, { value: threshold, min: 0, step: 0.05, onChange: (v) => setThreshold(Math.min(1, v)) }) }), _jsxs("button", { className: "qe-hover", style: { display: 'flex', alignItems: 'center', gap: 4, marginTop: 6, fontSize: 12 }, onClick: () => void addFromImage(behavior), children: [_jsx(PlusIcon, { style: iconStyle(13) }), "Add sequence from image"] }), status && _jsx("p", { style: { margin: '4px 0 0', color: theme.textDim, fontSize: 11.5 }, children: status })] })) }));
+}
 export function NoiseModule({ binding }) {
-    return (_jsx(BehaviorModule, { binding: binding, title: "Noise", type: "Noise", create: () => new Noise(new ConstantValue(1), new ConstantValue(1), new ConstantValue(1), new ConstantValue(0)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(ValueField, { hintKey: "noise.frequency", label: "Frequency", generator: behavior.frequency, min: 0, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.frequency = g)) }), _jsx(ValueField, { hintKey: "noise.strength", label: "Strength", generator: behavior.power, min: 0, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.power = g)) }), _jsx(ValueField, { label: "Position amount", generator: behavior.positionAmount, min: 0, curveMax: 2, onChange: (g) => binding.apply(() => (behavior.positionAmount = g)) }), _jsx(ValueField, { label: "Rotation amount", generator: behavior.rotationAmount, min: 0, curveMax: Math.PI, onChange: (g) => binding.apply(() => (behavior.rotationAmount = g)) })] })) }));
+    return (_jsx(BehaviorModule, { binding: binding, title: "Noise", type: "Noise", create: () => new Noise(new ConstantValue(1), new ConstantValue(1), new ConstantValue(1), new ConstantValue(0)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(ValueField, { hintKey: "noise.frequency", label: "Frequency", generator: behavior.frequency, min: 0, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.frequency = g)) }), _jsx(ValueField, { hintKey: "noise.strength", label: "Strength", generator: behavior.power, min: 0, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.power = g)) }), _jsx(ValueField, { label: "Position amount", generator: behavior.positionAmount, min: 0, curveMax: 2, onChange: (g) => binding.apply(() => (behavior.positionAmount = g)) }), _jsx(ValueField, { label: "Rotation amount", generator: behavior.rotationAmount, min: 0, curveMax: Math.PI, onChange: (g) => binding.apply(() => (behavior.rotationAmount = g)) }), _jsx(ValueField, { label: "Scroll speed", generator: behavior.scrollSpeed, curveMax: 5, onChange: (g) => binding.apply(() => (behavior.scrollSpeed = g)) }), _jsx(Row, { label: "Remap", children: _jsx(CheckboxField, { value: behavior.remap !== undefined, onChange: (v) => binding.apply(() => (behavior.remap = v
+                            ? new PiecewiseBezier([[new Bezier(-1, -1 / 3, 1 / 3, 1), 0]])
+                            : undefined)) }) }), behavior.remap !== undefined && (_jsx(ValueField, { label: "Remap curve", generator: behavior.remap, curveMax: 1, onChange: (g) => binding.apply(() => (behavior.remap = g)) }))] })) }));
 }
 /** Three numeric inputs for a Vector3 field, replacing the whole vector on any edit. */
 function Vector3Row(props) {