Build Wireframe Scan Reveal

Build a Wireframe Scan Reveal

Make one world-space wavefront conduct both representations: draw topology at the front, hold the solid behind it, then remove the temporary cage. Reach for technical-wireframe-info-layout when wireframe is the page's permanent visual language; reach for animation-on-scroll when the conductor is DOM scroll rather than a 3D wave.

Extracted from inner-green-3d.html, where a survey pulse had to grow a procedural moss root through cards and type without reading as a circular mask.

Pair two representations

Create the solid mesh and a temporary LineSegments cage from the same source geometry. Share uScanOrigin, uScanRadius, and time between their materials. Keep both in world space; local-space distance changes when a group is scaled or nested and tears the two fronts apart.

Discard the solid beyond the front, with a lag that leaves the cage visible first:

glslCopy code
uniform vec3 uScanOrigin;
uniform float uScanRadius;
uniform float uScanEnabled;

bool unscanned(vec3 worldPosition, float lag) {
  if (uScanEnabled < 0.5) return false;
  float wobble =
      sin(worldPosition.y * 0.011 + worldPosition.x * 0.007) * 36.0
    + sin(worldPosition.z * 0.021 + worldPosition.y * 0.013) * 17.0;
  return distance(worldPosition, uScanOrigin)
       > uScanRadius - lag + wobble;
}

// In the solid fragment shader:
if (unscanned(vWorldPosition, 520.0)) discard;

Use one origin outside the silhouette, usually low and left. A centered origin reads as a loading ring. Keep the two long sine terms; a perfectly circular front reads as a clip-path, while high-frequency noise makes the edge sparkle.

Make the cage ride the front

Measure each line fragment against the same radius:

glslCopy code
float distanceFromOrigin = distance(vWorldPosition, uScanOrigin);
float rim = exp(-pow((distanceFromOrigin - uScanRadius) / 135.0, 2.0));
float trail = smoothstep(uScanRadius, uScanRadius - 950.0, distanceFromOrigin);
float alpha = (rim * 1.60 + trail * 0.34) * uWireOpacity;

Use additive blending, transparent: true, depthWrite: false, and a pale version of the scene accent. Keep depth testing on unless the cage must read through the object. Turning depth test off exposes the back half of dense topology and produces a bright unreadable ball.

Animate one conductor

Use the landed timing as a starting point:

Snap the cage on over the first 6% of the timeline, then fade it during the final 28%:

jsCopy code
const e = Math.min(1, elapsed / 3.4);
scanRadius.value = easeOutPow(e) * maxRadius;
wireOpacity.value = Math.min(1, e / 0.06) * (1 - smoothstep(0.72, 1, e));

At completion, disable the discard branch, remove the cage, and dispose its geometry and material. Hiding it with opacity leaves duplicate geometry and shader work alive for the rest of the page.

Stage and size the scan

Resolve maxRadius after layout and after parent matrices update. Use a ResizeObserver, guard zero-sized roots, update the camera projection, then recompute the origin and farthest reach. A one-time measurement before fonts or layout settle leaves the last corner unrevealed.

Keep the demo's scene recognisable: grey-green field, bottom light pool, white editorial type, pale cards, and the root-shaped form. The staging belongs in the demo; the reusable skill is only the paired representations and shared conductor.

Respect motion and lifecycle

• Under prefers-reduced-motion: reduce, render a designed diagnostic still at about 62% radius with both cage and solid visible. Let the replay control recompose that still and announce the state; do not hide the scene.
• Clamp dt to 1/30 s. Reset the time base after a hidden tab or offscreen section resumes.
• Pause on document.hidden and when an IntersectionObserver says the section is offscreen.
• Cap device pixel ratio at 2.
• Expose replay as a real button with visible focus and an aria-live status. Keep the canvas aria-hidden when it is decorative.
• On teardown, cancel the frame, disconnect observers, remove listeners, and dispose geometry, materials, textures, and the renderer.

State the cost honestly

The temporary second representation and its line coverage are the real cost. Topology density and overdraw matter more than the radius math. Build the wire cage only for the entrance, use the coarsest edge graph that preserves the silhouette, and dispose it as soon as the scan finishes. Do not claim a performance gain without profiling GPU frame time before and during the cage pass.

Verify

• Compare the opening, midpoint, and completed states with the source at 1440×900.
• Confirm the cage leads the solid everywhere, including scaled child groups.
• Fast-forward across completion and verify no clipped islands remain.
• Replay twice and confirm only one frame loop and one cage survive.
• Resize during the scan at 390×844 and 1440×900.
• Tab to replay and confirm visible focus and a live status update.
• Test ?reduced=1 or system reduced motion: composed still, no advancing radius.
• Hide/show the tab and leave/re-enter the viewport; confirm no time jump.
• Confirm a clean console and disposed cage resources after completion.

Use demo/index.html as the working proof and demo/PROMPT.md to recreate or remix it.