What problem does it solve?
Plain opacity fades and circular clip masks fail to explain the form of a 3D object during an entrance animation. This Skill implements a world-space scan wavefront in Three.js where a temporary wireframe cage draws the topology first, the solid surface follows behind it, and the cage burns away on completion.
Core Features & Use Cases
- Paired representations: Builds a solid mesh and a temporary LineSegments cage from the same source geometry, driven by shared uScanOrigin and uScanRadius uniforms in world space.
- Tuned conductor timing: Ships landed defaults including a 3.4-second duration, power-1.35 easing, 520-unit solid lag, 135-unit rim, 950-unit trail, and irregular sine wobble so the front never reads as a clip-path.
- Lifecycle and accessibility discipline: Covers reduced-motion diagnostic stills, dt clamping, DPR capping, ResizeObserver sizing, offscreen pausing, keyboard-accessible replay, and full disposal of cage geometry and materials.
- Use Case: A landing page hero introduces a procedural 3D model, such as a root or vessel, with a survey-pulse scan that grows the wireframe ahead of the surface, then removes the cage so only the finished form remains.
Quick Start
Use the build-wireframe-scan-reveal skill to reveal my Three.js model with a wire cage that leads the solid surface and disposes itself after the scan completes.
