Cinematic spells

Cinematic spells

Spells that act on real bodies: they pin, tear and slice ragdolls instead of playing a canned death. Chains, lightning, roots, crystals and falling planets, five 6 to 12 second set pieces for three.js on Patch's mannequin.

It's Chiro Visuals' October Elemental Sandbox (MIT) with its code unedited, its five spells whose models can be shipped, and Patch's mannequin (CC0) as the caster and the targets. There's no physics engine: the ragdoll is the sandbox's own position-based solver, about 1,200 lines. In the live demo, choose a spell, move the pointer over a body and click. Right click or Esc puts the spell away until the next click, the wheel zooms and the right button orbits.

Use it in a game

Copy app.js, mannequin.js, sandbox/, public/hdri and public/models into your game, with the @spells alias from vite.config and lil-gui.

app.js builds the scene and is the reference for wiring it, about 400 lines with the sandbox's own core/App.js as its model:

1. Make the shared pieces once: the ParticleEngine, a LightPool, CameraShake, ScreenFlash, DecalSystem and BurstSystem (sandbox/effects, sandbox/particles).
2. Make the AbilityManager with them and with your bodies (dummies), load the spells' models into its models, and cast with abilities.cast(origin, direction, distance, id).
3. Call abilities.update(dt), then your bodies' update(dt) and applyHits(abilities.active), then abilities.lateUpdate(dt) every frame: a chain wound round a limb has to draw off the pose the solver just produced.
4. Tune each spell in sandbox/config/settings.js.

Your own bodies. A body is any humanoid skinned mesh with the usual bone names (Hips, Spine, Spine1, Spine2, Neck, Head, HeadTop_End, LeftShoulder, LeftArm, LeftForeArm, LeftHand, LeftUpLeg, LeftLeg, LeftFoot, LeftToeBase, LeftToe_End, and the same on the right). mannequin.js shows the smallest way in: MannequinField hands DummyField a glTF instead of its FBX, and MannequinController replaces only CharacterController#load. The tear splits a body by its skin weights, so a rigid figure comes apart at its joints and a soft one along its skin.

Warm it up before the first cast. Each spell builds its meshes and materials the first time it's cast, and three compiles a shader program the first time it draws one. SpellsApp#warmUp in app.js does all of it while the demo loads, out of sight: it fills every spell's pool, compiles every material in the background keyed for the post stack's render target (where the scene is drawn), draws one frame with everything forced visible, then casts every spell on real bodies and plays it out. The sandbox's own warm-up waits on each shader link in turn, about 11 s; this takes about 3 s for the same spells.

Controls

The block page talks to the demo over the patch-block message channel (lib/patch-block.js). Casting happens in the frame.

For people (the block page shows these):

Trigger: Clear (clear): Takes away every cast and what it left behind, and stands the bodies back up.

For agents (in recipe.json with its default): shake (toggle, default on): whether big impacts shake the camera.

Each option's picture is thumbs/spells/<id>.webp, a 112 x 112 still of that spell, captured from the built demo.

Build it

npm install
npm run build        # writes recipe.json, then dist/ (~8 MB), with thumbs/ copied in

dist/ is the live demo exactly as released, with index.html at the top and nothing loaded from other hosts. The build halves the HDRI to 1024 x 512 (hdr-half.mjs), since it only lights the scene.

What isn't here

The sandbox has nine spells; these are the five whose every part can be shipped. Left out on purpose, with their code still in sandbox/ but never loaded:

• Dragonfire Circle: its dragon is CC-BY-NC on Sketchfab, non-commercial.
• Abyssal Maw and Astral Fang: their shark and wolf come from Sketchfab with no author or licence stated.
• Starbreaker Lance: it works, but it's about the same as the Nova Beam in patch/abilities.
• The sandbox's character and practice dummy (Mixamo exports), its hall, its stone scans (no source stated), its webcam casting and the author's contact photo.

Credits and licences

• Elemental Sandbox by Chiro Visuals (mohamedachrefelouafi), MIT, © 2026 mohamedachrefelouafi (repo, sandbox/LICENSE): the spells, the ragdoll, the effects and the GLSL. Credit line: "Elemental Sandbox by Chiro Visuals (MIT)".
• The tome, the reliquary and the amethyst points (public/models/arcane_tome.glb, wildroot_reliquary.glb, amethyst_stones.glb): built in Blender by Chiro Visuals, as that repo ships them, MIT.
• The gyroscope (public/models/magical_gyroscope.glb): "Magical gyroscope" by reddification, CC-BY 4.0: credit it if you ship it.
• The mannequin (public/models/mannequin.glb, mannequin-target.glb, mannequin/): Patch's scale figure, rigged by Patch, CC0.
• Its clips: retargeted from Quaternius' Universal Animation Library 1 and 2, CC0.
• HDRI (public/hdri/spruit_sunrise.hdr): Spruit Sunrise, Poly Haven, CC0.
• Red Hat Mono: The Red Hat Project Authors, SIL Open Font License 1.1 (fonts/OFL-red-hat-mono.txt).
• three.js and lil-gui: MIT.
• The demo page, app.js and mannequin.js: Patch, MIT. The pictures in thumbs/: stills of this demo, Patch, CC0.

Code: MIT (LICENSE). Art: CC-BY 4.0 as a whole, because the gyroscope is; everything else in public/ is CC0 or MIT, as above.