HDMICables — skin, animated
skin b500d60fc79bdaef live in this page

HDMICables, moving

Yes — a Minecraft skin animates fine on the web. The texture below is the real one from NameMC, wrapped on a player model in WebGL and driven by the same joint rotations the game uses, with the Pan Cape hanging off the back. Pick a motion, drag to spin it.

player idle
drag to rotate · ctrl-scroll to zoom · drop a .png to swap skin
drop skin png
back

The texture it reads from

The 64 by 64 skin texture atlas for HDMICables
Size
—
Model
—
Layers
Inner + outer (hat, jacket, sleeves)
Source
embedded copy · namemc b500d60f

The marked 8 × 32 block at (56, 16) is outside every face of the model — no UV coordinate reaches it — yet pixels are painted there anyway.

And the cape

The 64 by 32 cape texture
Cape
Pan Cape · Mojang default

The cape is a second file, 64 × 32. The 22 × 17 block in the top-left corner wraps the cape itself; the 12 × 20 patch further right is the elytra wing the game reaches for instead when you glide. One texture, two pieces of gear — switch between them under back.

What is actually moving

  • Six boxes, one image. Head, body, two arms, two legs — each a cube with UV coordinates cut from the atlas, plus a slightly larger copy for the outer layer.
  • Joints, not frames. Walking is a sine wave on the arm and leg rotations; running adds body tilt and a head bob. Nothing is pre-rendered, so speed is a live multiplier.
  • Any skin works. Drop a PNG on the stage and the model type (slim vs classic) is detected from the transparent columns in the arm block.

Rendering is skinview3d on top of three.js, bundled into this page — no requests leave it.

Putting it in a stream overlay or a site

The canvas is transparent by default, so the same viewer drops straight into OBS as a Browser Source — point it at a local HTML file, set the size, and the model floats over your scene with no background to key out.

<canvas id="skin" width="300" height="400"></canvas>
<script src="skinview3d.bundle.js"></script>
<script>
  const v = new skinview3d.SkinViewer({
    canvas: document.getElementById("skin"),
    width: 300, height: 400,
    skin: "https://s.namemc.com/i/b500d60fc79bdaef.png"
  });
  v.loadCape("pan-cape.png");              // or { backEquipment: "elytra" }
  v.animation = new skinview3d.WalkingAnimation();
  v.animation.speed = 1;
  v.autoRotate = true;
</script>

From there it can react to things instead of just looping: switch to RunningAnimation on a follow, fire a wave on a raid, or crouch on a bit. Every control on this page is one property, so a chat event handler is enough to drive it.

The skin file is fetched live from NameMC's CDN in that snippet; in this page it is embedded as a data URI so nothing loads from outside.