Look what we can make with code & AI.

Meet Bit, a marionette built from 3D shapes and lit in real time. A custom shader reduces every frame to two colours. He presents a made-up product, lip-syncs to his own square-wave voice, and reacts when you poke or swing him.

• Three.js
• GLSL
• Web Audio
• GSAP

A tiny pastel short about two cats, one fish and a very fast mouse. Code cuts every paper shape, casts real shadows between the layers and adds halftone dots and print colour offset. It plays at 12 frames per second on purpose, like hand-made animation. Switch it to smooth to see the difference.

• Three.js
• GSAP
• GLSL
• Web Audio

Seventy years of design in eight chapters: from raw concrete in 1952 to the bold borders and hard shadows of today's interfaces. Every building is a 3D maquette generated by code. One shader turns weathered concrete into flat colour block by block, and the whole interface changes style with it.

• Three.js
• GLSL
• GSAP
• CSS @property

Meet xX_liquidchr0me_Xx, a liquid-chrome ball with a 2000s messenger account and an identity crisis. It downloads corners, deletes its volume and installs a sock, turning from chrome into hand-pressed clay. Every shape, reflection and thumbprint comes from one shader. Drag it, nudge it, and poke the clay to leave your own fingerprint.

• GLSL
• Three.js
• GSAP
• Web Audio

A complete landing page for a fictional product, running inside the frame. The hero is a real-time fluid simulation you stir with your cursor. Below it, headlines rise line by line, a statement lights up word by word as you scroll, a gallery pins and slides sideways, and the whole page shifts between ink and cream. Scroll inside it, or press Auto tour.

• WebGL fluid
• GSAP ScrollTrigger
• SplitText
• Three.js

A full motion-graphics sequence with no video file. One GSAP timeline computes every frame live in your browser. Scrub it, pause it, or move your cursor over it.

• GSAP
• React
• CSS