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:

glsl

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:

glsl

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:

parameter	default	failure prevented
duration	3.4 s	a fast reveal reads as a flash
radius easing	`1 - (1 - t)^1.35`	linear travel stalls visually near the far corner
solid lag	520 world units	zero lag makes wire and fill arrive as one wipe
rim width	135 units	a narrow rim aliases; a wide rim becomes fog
wire trail	950 units	no trail hides topology before it can be read
wire fade	`smoothstep(.72, 1, t)`	persistent cage competes with the finished surface
radius reach	scene diagonal × 1.3 + 900	the far corner remains clipped after completion

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

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.

build-wireframe-scan-reveal

NPX Install

Tags

SKILL.md Content