Goal: implement the full ARCANA 20-spell VFX collection

[velrino]

Goal

Implement the ARCANA — 20 Spell VFX Showcase spell collection in this Three.js project as fully integrated, selectable and castable abilities. Deliver the distinctive motion, silhouettes, materials, timing, impact feedback and sound of all 20 reference spells through the project's existing casting workflow and real-time editor.

This is an implementation goal. The linked HTML is the detailed technical and artistic reference; completion requires working effects in the application, with targeting, lifecycle management, quality controls and validation.

Source material

• Original HTML — ARCANA __ 20 Spell VFX Showcase (Copy).html
• Claude artifact
• X reference — @majidmanzarpour

The analysis below is based on the supplied HTML source and the current local project code. The external links are supporting references; visual parity and runtime performance still need to be verified during implementation.

Spell coverage and visual requirements

The HTML contains exactly 20 registered spell builders. Preserve the defining behavior below; recoloring a shared effect is not sufficient. Durations are registry values from the reference, useful as initial tuning targets rather than hardcoded gameplay requirements. Inspect each builder's actual event timeline when porting.

Spell	Category / reference targeting	Defining behavior to implement	Reference duration
Aether Lance	Beam / line	A charged trinary beam with a narrow core, colored sheath and counter-rotating coils that burns, pulses and narrows to a thread.	4.5s
Cryo Cataclysm	Ground / ground	A traveling fracture raises a widening corridor of faceted ice that ends in a crystal crown, cold mist and rising glitter.	5.0s
Voltaic Serpent	Lightning / line	A violet serpent of lightning that re-strikes, breaks and reconnects between caster and target, scarring the floor.	4.5s
Solar Judgement	Area / area	A celestial aperture aligns five compression halos, then drives a solar column into an inscribed ground seal.	4.85s
Void Singularity	Area / area	A true black occluder inside a thin event horizon, fed by an accelerating inward spiral before a restrained rebound.	4.9s
Ember Comet	Projectile / arc	A fractured meteor on a lifted arc trails raymarched fire, then shatters into fragments beside branching molten cracks.	5.25s
Verdant Ascension	Area / area	Six luminous vines braid upward from a living seal, unfolding leaves while spores rise into a crown.	5.4s
Chrono Fracture	Area / area	Clock lattices tick in quantized steps while suspended shards freeze, echo and reverse around the target.	5.0s
Prism Barrage	Area / area	Seven colored feeds converge on a shaded prism, which redirects them into an ordered radial barrage over a crystal field.	5.1s
Gravity Well	Area / area	Stone debris orbits a blue core, spirals inward, holds at maximum compression, then bursts outward in staggered release.	5.4s
Moonfall Crescent	Projectile / arc	A lunar crescent blade accelerates along a lifted arc, leaving a cold afterimage, a sharp slash and a crescent cut.	4.6s
Bloodmoon Rite	Area / area	A crimson seal invokes a red moon; a ritual pillar and dark crystal teeth answer in delayed pulses.	5.45s
Arcane Railgun	Beam / line	A dense hand charge compresses, holds, then snaps into a near-instant rail with parallel echoes and asymmetric recoil.	4.5s
Sandstorm Djinn	Area / area	A tapering dust vortex lifts small rocks into a spectral body, and two cold eyes resolve inside the storm.	5.2s
Tidal Leviathan	Wave / ground	A deforming water sheet carries a curling crest down the cast line and breaks like a shoreline into receding foam.	4.9s
Phoenix Rebirth	Area / area	A firebird emerges from a molten seal, unfurling four-layer wings while feathers trail and embers recirculate.	5.5s
Quantum Bloom	Area / area	Seventy-two geometric petals open in staggered, quantized layers around a rotating lattice, hold, then close.	5.2s
Celestial Covenant	Area / area	A constellation graph descends, links its stars in order, and turns three of them into falling lances.	5.2s
Necrotic Choir	Area / area	Tendrils crawl to the sigil edge and seal its boundary; a conduit rises and eight spectral voices circle it on thin tethers, singing in staggered pulses.	5.3s
Worldbreaker	Cataclysm / area	A descending sky hammer strikes; twenty-six fissures branch outward and ninety-six shaded slabs rise in staggered waves.	5.9s

Relevant systems found in the HTML

1. Authored timelines and cast contracts

• REGISTRY separates metadata, targeting, tunable controls and effect builders. Definitions include identity, accent color, category, description, range, minimum range, footprint, duration and seed.
• CastFrame and computeCast() translate origin, direction and distance into effect placement. Reference shapes are line, ground, arc and area; range and arena boundaries constrain casts.
• Spell provides per-cast state, seeded variation and timeline milestones (release, impact, fadeStart, end). One-shot events coordinate visual beats and sound.
• Preserve anticipation, release, travel or formation, impact, sustain and decay where each spell uses them. Instant beams, traveling projectiles, growing corridors and delayed area rituals need different timing.

2. Reusable procedural VFX primitives

• Pooled particles, ribbons, tubes, path textures, decals, annuli, shells and billboards underpin the collection.
• Procedural rocks, ice crystals, slabs, petals, leaves, shards, prisms and the sky hammer give effects recognizable solid forms.
• Instancing supports repeated geometry such as ice fields, petals and debris. Shader-driven motion and materials provide energy flow, erosion, heat, noise and fades.
• Extract shared building blocks where useful while retaining spell-specific choreography. In particular, preserve the opaque core of Void Singularity, shaded debris, readable ice facets and distinct projectile silhouettes.

3. Rendering and impact feedback

• The reference combines an opaque-depth path, distortion, bloom and a cinematic pass. It offers TRACE, SOFT and OFF glow modes.
• Camera response, FOV changes, hitstop, light pulses and flashes reinforce key moments. These must follow actual spell beats and remain adjustable.
• Bloom must preserve the visible structure of beams, runes, crystals and wings. Verify key forms with bloom disabled as well as enabled.

4. Resource budgets and lifecycle

• The reference limits normal active spells to four, pools instances by spell, and gives retired casts a short fade of approximately 0.35 seconds.
• Particle ownership and retirement prevent an old cast's particles or sounds from leaking into a reused instance. Lights and audio have explicit release paths.
• ULTRA, HIGH and PERF presets vary pixel ratio, particle density, raymarch steps, ribbon/tube resolution, water detail, shadows and MSAA.
• Initialization builds spell instances and prewarms shader/render variants before dismissing the loader. Diagnostics expose active casts, pool size, draw calls, triangles and GPU resource counts.

5. Sound, controls and accessibility

• Procedural Web Audio scores are authored per spell and synchronized with release, impact and fade events. Audio unlocks on a user gesture and supports mute and owner-based cleanup.
• The showcase includes a spell selector, selected-spell description, casting, autoplay, pause, clear, glow and quality controls, keyboard shortcuts and pointer/touch input.
• Pointer handling distinguishes taps from camera drags and multi-touch gestures. Responsive layouts and reduced-motion adjustments are present.
• window.ARCANA exposes selection, casting, camera placement, fixed-step simulation and statistics, making repeatable comparisons possible.

Integration with this repository

Build on the existing architecture

The project already registers ten abilities in src/abilities/AbilityManager.js, uses pooled instances with a four-cast limit, and includes shared particles, lights, decals, camera shake, screen flash and post-processing. Both the HTML import map and the project's declared Three.js dependency target version 0.185.1.

• Integrate the collection through src/abilities/Ability.js, src/abilities/AbilityManager.js and src/config/settings.js, with modular geometry and materials under the existing asset/material directories.
• Preserve the existing ten abilities and their behavior. Related themes in Arbor Bloom, Cyber Serpent, Astral Void, Monolith Rift or Sumi Tide are opportunities to inspect reusable code, not proof that the ARCANA counterpart is already implemented.
• Extend the current travel/impact/fade lifecycle where necessary to support charge holds, delayed strikes, sustained effects and multiple impacts. Keep the existing ability contract compatible.
• Reuse or extend src/particles, src/effects and src/postprocessing after comparing their capabilities against the reference. Avoid introducing a second renderer, independent animation loop or duplicate global effect systems.
• Use normal project imports and modules. The exported HTML contains an outer wrapper and nested document markup; extract its implementation into the app rather than shipping that wrapper as the feature.

Targeting and combat integration

• Map reference line/ground/arc/area behaviors onto the project's targeting metadata and indicators. Add trajectory or footprint support where the current model cannot express a spell accurately.
• Make the preview, visible effect and actual hit region agree at minimum and maximum range and at different headings.
• Integrate with src/combat/DummyField.js. Its existing line capsule and target-zone hit logic needs explicit consideration for arcing projectiles, delayed area effects and repeated strikes.
• Trigger hits on the corresponding visual impact, not automatically during anticipation. Use the existing handlesOwnHits extension point where a spell must control its own hit timing or targets.
• Connect cast animation and origin to the current character. Avoid replacing the application's character or arena solely to match the standalone showcase.

Editor and interaction integration

• Expose appropriate per-spell controls: dimensions, intensity, speed, spread, sustain and timing where relevant. Honor the project's live-settings convention, including tuning while paused.
• Add all 20 spells to a scalable selector with readable names, categories and descriptions. Keep current abilities accessible.
• Resolve shortcut conflicts intentionally: the reference's number/letter keys overlap existing project bindings. Use a consistent mapping and display the actual bindings in the UI.
• Provide a repeatable demo cycle, pause/clear controls, quality and glow settings, sound mute, touch-safe casting and reduced-motion behavior through the existing UI.

Suggested delivery sequence

• Establish a spell coverage checklist and capture the reference at charge, release, impact and fade for each spell.
• Extend shared timeline, targeting, primitive and retirement support; integrate one line spell and one area spell end to end to validate the architecture.
• Implement the complete 20-spell collection, reviewing each against the defining behaviors in the table.
• Integrate sound, character response, training-dummy hit timing and editor controls.
• Finish selector/demo controls, quality scaling, touch behavior and reduced-motion support.
• Complete visual comparisons, resource-lifecycle checks and performance measurements; attach evidence to this issue or its implementation PRs.

Acceptance criteria

• All 20 listed spells are selectable and castable in the main application, with their defining shapes and choreography preserved.
• Existing abilities, casting controls, character behavior and editor functionality continue to work.
• Each spell has a complete, coherent lifecycle; repeated casts reset its events, geometry, particles, lights and audio correctly.
• Target previews, cast endpoints and dummy-hit timing match the visible effect for each targeting type.
• Casting beyond the concurrency limit retires effects cleanly. Clear, pause/resume and quality changes leave no stuck visuals or audio.
• Quality presets reduce work while preserving spell identity. Record device/browser, resolution, preset, frame time and draw calls for representative heavy spells and four overlapping casts; set explicit performance budgets from those measurements.
• Repeated full-collection cycles reach a bounded resource plateau after warmup, with no unbounded growth in pooled objects, geometries, textures, programs, lights or audio nodes.
• First-use behavior is checked after loading/prewarm; there are no uncaught rendering errors or missing shader/material variants.
• Desktop keyboard/mouse and touch interactions work, camera gestures do not cause accidental casts, and sound/reduced-motion settings are respected.
• Provide side-by-side screenshots or recordings at comparable camera positions and timeline moments, including representative bloom-off checks.
• Run the existing test suite and production build, plus focused tests for added timeline, targeting and cleanup behavior. Document remaining visual or performance gaps before marking this goal complete.