Build Wireframe Scan Reveal

Meng ToCommunityCreated by Meng To

Skill
Tool integration
Software development
MIT
Low risk
Has scripts

From the author

Reveal Three.js geometry with an expanding world-space scan whose wire cage leads the solid surface, then burns away. Use for wireframe scanning, radial mesh reveals, survey pulses, holographic assembly, topology intros, and 3D model entrances where a plain opacity wipe does not explain the form.

— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a technique for revealing 3D geometry in Three.js using a world-space wavefront scan. By synchronizing a temporary wireframe cage with a solid mesh, the effect creates a sophisticated entrance animation where the topology is previewed before the solid surface is rendered. The approach involves shared uniforms for scan origin and radius, custom fragment shaders for discarding pixels, and careful lifecycle management to ensure performance and accessibility.

What it does

Synchronizes a wireframe cage and solid mesh using shared world-space scan uniforms.
Uses custom GLSL fragment shaders to discard solid geometry behind the scan front.
Applies additive blending and depth-testing logic to render the leading wireframe cage.
Provides timing and easing parameters for smooth, non-linear scan progression.
Includes lifecycle management to dispose of temporary wireframe resources after the reveal.
Implements accessibility features like reduced-motion support and proper ARIA labeling.

When to use it

When you need to introduce 3D models with a high-tech or holographic aesthetic.
When a simple opacity wipe fails to clearly communicate the form or topology of a 3D object.
When building survey pulses, topology intros, or complex 3D model entrances.
When you want to guide the user's eye across a 3D scene using a procedural scan effect.

Advantages

Provides a clear visual explanation of 3D form through topology previewing.
Avoids the visual monotony of standard opacity-based reveals.
Optimized for performance by disposing of temporary wireframe geometry post-animation.
Includes robust handling for responsive resizing and viewport visibility changes.

Usage examples

“How do I implement a wireframe scan reveal for my Three.js model?”: The agent provides the GLSL shader logic for the discard branch and the JavaScript setup for synchronizing the wireframe and solid mesh materials using shared uniforms.
“How should I handle the wireframe cage lifecycle in Three.js?”: The agent explains how to dispose of the temporary LineSegments geometry and material once the scan radius reaches the maximum extent to prevent memory leaks.

Install

1 of its files are not mirrored here, so install it from its source:
https://github.com/MengTo/Skills/tree/5ea1661a0e05d82b054553daaa6baf6d0233c33c/agent-skills/web-design/build-wireframe-scan-reveal

Documentation by Meng To

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:

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:

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.

Files

ATTRIBUTION.mdAdded by AutoGineer876 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md6.2 KiB
agents/openai.yaml235 B
demo/PROMPT.md1.7 KiB
demo/assets/card-ethos.jpg309.3 KiB
demo/assets/lexend-latin.woff2(opens on GitHub)Not mirrored: opens on GitHub38.8 KiB
demo/assets/three.min.jsScript593.8 KiB
demo/index.html13.3 KiB
demo/preview.jpg154.4 KiB

demo/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sylva — Survey Pulse</title>
  <meta name="description" content="A world-space wireframe scan reveals a living root before its solid surface.">
  <style>
    @font-face{font-family:Lexend;src:url("assets/lexend-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
    :root{color-scheme:dark;--field:#4a4d44;--ink:#fff;--soft:rgba(255,255,255,.62);--line:rgba(255,255,255,.08);--card:#f2f3ef;--card-ink:#23261f;--accent:#dbe9ab}
    *{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#3d4039}body{font-family:Lexend,system-ui,sans-serif;color:var(--ink);font-weight:300}
    button{font:inherit}
    .hero{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;background:radial-gradient(72% 44% at 50% 117%,rgba(238,243,231,.48),rgba(238,243,231,.08) 65%,transparent 88%),radial-gradient(52% 46% at 28% 82%,rgba(224,236,207,.11),transparent 72%),var(--field)}
    .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent calc(25% - .5px),var(--line) 25%,transparent calc(25% + .5px),transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px),transparent calc(75% - .5px),var(--line) 75%,transparent calc(75% + .5px))}
    canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
    .brand{position:absolute;z-index:5;top:38px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(31,37,28,.78);box-shadow:0 8px 24px rgba(10,14,8,.26);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
    .brand i{width:17px;height:17px;border-radius:50% 50% 45% 45%;display:grid;place-items:center;background:#eff2e9;color:#2e3329;font-style:normal}
    .copy{position:absolute;z-index:4;left:3.1vw;top:25.5%;max-width:440px}
    h1{margin:0;font-size:clamp(46px,4.45vw,72px);font-weight:300;line-height:.95;letter-spacing:-.045em}
    .lede{position:absolute;z-index:4;left:32.5%;top:26%;width:210px;margin:0;color:var(--soft);font-size:15px;line-height:1.48}
    .card{position:absolute;z-index:3;right:23.7%;top:26%;width:300px;height:275px;padding:18px 20px;border-radius:38px;background:var(--card);color:var(--card-ink);box-shadow:0 28px 80px rgba(24,27,20,.18)}
    .card img{width:100%;height:121px;object-fit:cover;border-radius:28px;display:block}
    .eyebrow{margin:15px 0 4px;color:#85897f;font-size:12px}.card h2{max-width:160px;margin:0;font-size:25px;line-height:1.02;font-weight:500;letter-spacing:-.04em}
    .ghost{position:absolute;z-index:1;left:2%;bottom:-48px;color:rgba(255,255,255,.055);font-size:clamp(120px,19vw,300px);line-height:.8;letter-spacing:.08em;white-space:nowrap}
    .instrument{position:absolute;z-index:6;right:28px;bottom:26px;width:min(340px,calc(100% - 36px));padding:14px 14px 13px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(33,38,30,.83);box-shadow:0 16px 40px rgba(12,15,10,.24);backdrop-filter:blur(10px)}
    .instrument-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.kicker{margin:0 0 4px;color:var(--accent);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.instrument strong{font-size:14px;font-weight:500}
    .meta{display:flex;gap:14px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);color:var(--soft);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
    .replay{min-height:42px;padding:0 16px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:#eef1e8;color:#252a21;font-weight:600;font-size:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
    .replay:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.18)}.replay:focus-visible{outline:3px solid #efffa8;outline-offset:3px}
    .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    @media(max-width:700px){
      .hero{min-height:844px}.brand{top:22px}.copy{left:24px;right:24px;top:112px}.copy h1{font-size:52px;max-width:345px}.lede{left:24px;top:235px;width:310px;font-size:14px}
      .card{right:22px;top:335px;width:236px;height:218px;padding:13px;border-radius:30px}.card img{height:96px;border-radius:22px}.card .eyebrow{margin-top:10px}.card h2{font-size:20px}
      .instrument{right:18px;bottom:18px}.ghost{bottom:140px;left:-10px;font-size:112px}.meta{gap:9px;font-size:9px}
    }
  </style>
</head>
<body>
  <main class="hero" id="hero">
    <canvas id="scene" aria-hidden="true"></canvas>
    <div class="brand"><i aria-hidden="true">↟</i> Sylva field lab</div>
    <div class="copy"><h1>Step into<br>the living world</h1></div>
    <p class="lede">We restore wild places through patient design, native planting, and a deeper kind of stewardship.</p>
    <article class="card">
      <img src="assets/card-ethos.jpg" alt="Moss and lichen growing over rounded stones">
      <p class="eyebrow">Our Ethos</p>
      <h2>Let the wild lead.</h2>
    </article>
    <div class="ghost" aria-hidden="true">SYLVA</div>
    <section class="instrument" aria-labelledby="instrument-title">
      <div class="instrument-row">
        <div><p class="kicker">Survey pulse 01</p><strong id="instrument-title">Wire first. Surface follows.</strong></div>
        <button class="replay" id="replay" type="button">Replay scan</button>
      </div>
      <div class="meta"><span>3.4 s sweep</span><span>520u lag</span><span id="phase">Scanning</span></div>
    </section>
    <p class="sr" id="status" aria-live="polite"></p>
  </main>
  <script src="assets/three.min.js"></script>
  <script>
  (() => {
    "use strict";
    const hero = document.querySelector("#hero");
    const canvas = document.querySelector("#scene");
    const replay = document.querySelector("#replay");
    const status = document.querySelector("#status");
    const phase = document.querySelector("#phase");
    const forcedReduced = new URLSearchParams(location.search).get("reduced") === "1";
    const reduced = forcedReduced || matchMedia("(prefers-reduced-motion: reduce)").matches;
    const renderer = new THREE.WebGLRenderer({canvas,alpha:true,antialias:true});
    renderer.setClearColor(0x000000,0);
    renderer.setPixelRatio(Math.min(devicePixelRatio || 1,2));
    if ("outputEncoding" in renderer) renderer.outputEncoding = THREE.sRGBEncoding;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(40,1,10,5000);
    const DIST = 1400;
    camera.position.set(0,0,DIST);

    const uOrigin = {value:new THREE.Vector3()};
    const uRadius = {value:0};
    const uScanOn = {value:1};
    const uWire = {value:1};
    const solids = [];
    const cages = [];
    let width = 1, height = 1, maxRadius = 2400;
    let elapsed = 0, scanning = !reduced, visible = true, raf = 0, last = 0, destroyed = false;

    const solidVertex = [
      "varying vec3 vWorld; varying vec3 vNormalW;",
      "void main(){",
      " vec4 world=modelMatrix*vec4(position,1.0); vWorld=world.xyz;",
      " vNormalW=normalize(mat3(modelMatrix)*normal);",
      " gl_Position=projectionMatrix*viewMatrix*world;",
      "}"
    ].join("\n");
    const solidFragment = [
      "precision highp float;",
      "uniform vec3 uOrigin; uniform float uRadius; uniform float uScanOn;",
      "varying vec3 vWorld; varying vec3 vNormalW;",
      "void main(){",
      " float wob=sin(vWorld.y*.011+vWorld.x*.007)*36.0+sin(vWorld.z*.021+vWorld.y*.013)*17.0;",
      " if(uScanOn>.5 && distance(vWorld,uOrigin)>uRadius-520.0+wob) discard;",
      " vec3 n=normalize(vNormalW); float light=.2+.8*max(dot(n,normalize(vec3(-.35,.9,.5))),0.0);",
      " float moss=smoothstep(-.2,.75,n.y);",
      " vec3 bark=mix(vec3(.025,.022,.018),vec3(.19,.17,.125),light);",
      " vec3 green=mix(vec3(.025,.042,.008),vec3(.19,.29,.055),light);",
      " vec3 col=mix(bark,green,moss*.86);",
      " gl_FragColor=vec4(col,1.0);",
      "}"
    ].join("\n");
    const wireVertex = [
      "varying vec3 vWorld;",
      "void main(){vec4 world=modelMatrix*vec4(position,1.0);vWorld=world.xyz;gl_Position=projectionMatrix*viewMatrix*world;}"
    ].join("\n");
    const wireFragment = [
      "precision highp float;",
      "uniform vec3 uOrigin; uniform float uRadius; uniform float uWire;",
      "varying vec3 vWorld;",
      "void main(){",
      " float d=distance(vWorld,uOrigin);",
      " float rim=exp(-pow((d-uRadius)/135.0,2.0));",
      " float trail=smoothstep(uRadius,uRadius-950.0,d);",
      " float a=(rim*1.6+trail*.34)*uWire;",
      " if(a<.012) discard;",
      " gl_FragColor=vec4(vec3(.86,.95,.69),min(a,.82));",
      "}"
    ].join("\n");

    const root = new THREE.Group();
    scene.add(root);
    function addLimb(points,radius,segments=72){
      const curve = new THREE.CatmullRomCurve3(points.map(p=>new THREE.Vector3(...p)),false,"centripetal",.5);
      const geometry = new THREE.TubeGeometry(curve,segments,radius,9,false);
      const material = new THREE.ShaderMaterial({
        uniforms:{uOrigin,uRadius,uScanOn},vertexShader:solidVertex,fragmentShader:solidFragment
      });
      const mesh = new THREE.Mesh(geometry,material);
      root.add(mesh); solids.push(mesh);
    }
    addLimb([[-880,-250,0],[-630,-55,30],[-360,-75,-8],[-90,-235,22],[170,-250,10],[390,-38,56],[565,205,24],[760,-65,12]],84,100);
    addLimb([[250,-160,0],[360,18,24],[490,112,10],[655,140,-18]],40,54);
    addLimb([[-560,-70,5],[-490,78,18],[-385,154,-20]],34,42);
    addLimb([[-80,-222,8],[40,-98,18],[95,42,-12]],25,38);
    root.rotation.z = -.03;

    function buildCages(){
      disposeCages();
      solids.forEach(solid=>{
        const geometry = new THREE.WireframeGeometry(solid.geometry);
        const material = new THREE.ShaderMaterial({
          uniforms:{uOrigin,uRadius,uWire},vertexShader:wireVertex,fragmentShader:wireFragment,
          transparent:true,depthWrite:false,depthTest:true,blending:THREE.AdditiveBlending
        });
        const cage = new THREE.LineSegments(geometry,material);
        root.add(cage); cages.push(cage);
      });
    }
    function disposeCages(){
      while(cages.length){
        const cage=cages.pop();
        root.remove(cage); cage.geometry.dispose(); cage.material.dispose();
      }
    }
    function smoothstep(a,b,x){x=Math.max(0,Math.min(1,(x-a)/(b-a)));return x*x*(3-2*x)}
    function render(){
      renderer.render(scene,camera);
    }
    function composeReduced(){
      elapsed=3.4*.62; uScanOn.value=1; uRadius.value=(1-Math.pow(1-.62,1.35))*maxRadius;uWire.value=.82;
      buildCages(); phase.textContent="Designed still"; render();
    }
    function beginScan(announce=true){
      elapsed=0;uScanOn.value=1;uRadius.value=0;uWire.value=0;buildCages();
      if(reduced){composeReduced();if(announce)status.textContent="Reduced motion: diagnostic scan still reset.";return}
      scanning=true;phase.textContent="Scanning";if(announce)status.textContent="Survey scan replayed.";start();
    }
    function tick(now){
      raf=0;if(!visible||document.hidden||destroyed)return;
      const dt=last?Math.min(1/30,(now-last)/1000):1/60;last=now;
      if(scanning){
        elapsed+=dt;
        const t=Math.min(1,elapsed/3.4);
        uRadius.value=(1-Math.pow(1-t,1.35))*maxRadius;
        uWire.value=Math.min(1,t/.06)*(1-smoothstep(.72,1,t));
        if(t>=1){
          scanning=false;uScanOn.value=0;uWire.value=0;disposeCages();phase.textContent="Surface complete";
        }
      }
      render();
      if(scanning)start();
    }
    function start(){if(!raf&&!destroyed){last=0;raf=requestAnimationFrame(tick)}}
    function stop(){cancelAnimationFrame(raf);raf=0;last=0}
    function resize(){
      width=hero.clientWidth;height=hero.clientHeight;if(!width||!height)return;
      renderer.setPixelRatio(Math.min(devicePixelRatio||1,2));renderer.setSize(width,height,false);
      camera.fov=2*Math.atan((height/2)/DIST)*180/Math.PI;camera.aspect=width/height;camera.updateProjectionMatrix();
      const mobile=width<700;root.scale.setScalar(mobile ? .52 : Math.min(1,width/1440));
      root.position.set(mobile?-70:0,mobile?-235:-205,0);
      uOrigin.value.set(-width/2-110,-height/2+70,120);
      maxRadius=Math.hypot(width,height)*1.3+900;
      if(reduced)composeReduced();else render();
    }
    const ro=new ResizeObserver(resize);ro.observe(hero);
    const io=new IntersectionObserver(([entry])=>{visible=entry.isIntersecting;if(visible){if(scanning)start();else render()}else stop()},{threshold:.02});io.observe(hero);
    function visibility(){document.hidden?stop():(scanning?start():render())}
    document.addEventListener("visibilitychange",visibility);
    replay.addEventListener("click",()=>beginScan(true));
    function destroy(){
      if(destroyed)return;destroyed=true;stop();ro.disconnect();io.disconnect();document.removeEventListener("visibilitychange",visibility);
      disposeCages();solids.forEach(mesh=>{mesh.geometry.dispose();mesh.material.dispose()});renderer.dispose();
    }
    addEventListener("pagehide",destroy,{once:true});
    window.__skillDemo={name:"build-wireframe-scan-reveal",reduced,getState:()=>({scanning,cages:cages.length,radius:uRadius.value,phase:phase.textContent})};
    resize();beginScan(false);
  })();
  </script>
</body>
</html>

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

What our scanner noticed· Low risk

Scripts that your agent may run

This skill includes scripts that your agent may run. Read them before you use it.

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by

Meng To

Publisher

Meng To (Community)

Source

MengTo/Skills · agent-skills/web-design/build-wireframe-scan-reveal · commit 5ea1661

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Get it from the source

1 of this skill’s files are not mirrored here, so there is no ZIP. Get the complete skill from its source: MengTo/Skills