WEB · PixiJS · Interaction

Hue Vine Snakes

Hand-drawn sneks that slither through time and space—echoing and multiplying in the browser.

I built the soft-body motion, cursor echoes, and growth timeline in TypeScript with PixiJS, skinned onto original Illustrator SVG artwork.

Open live piece in a new tab → · Source on GitHub →

WebGL can be heavy on older devices. If the frame stays blank or lags, open the live piece in a new tab using the link above. Drag a snek to enlarge it; move near them for echoes.

Project specifications

Type Interactive web experience
Role Art direction, illustration, interaction & engineering
Stack Vite · TypeScript · PixiJS
Core loop Slither · echo · grow over time

Technologies

PixiJS TypeScript MeshRope / SVG Illustrator

Highlights

  • Follow-the-leader soft bodies skinned with original Illustrator SVG artwork
  • Cursor motion paints fading echo silhouettes; a grabbed snek eases up to 2× size
  • School grows over time—about 100 sneks by one minute, about 200 by five