Chapter 01 / No libraries

Claude, on its own.

Hand-written HTML, CSS, SVG, Canvas and vanilla JavaScript. No frameworks, no images, no dependencies. Just what the browser ships with.

Demos

Kinetic variable type

Every letter reads the cursor distance and maps it to font weight, width and color through a variable font axis.

  • Variable fonts
  • Pointer events
Move your cursor

Text decoder

A glyph-cycling reveal that resolves each character in turn.

  • JS
  • Typography
Decoding

Design is code.

3D tilt and glare

CSS perspective transforms plus a light-tracking glare layer.

  • CSS 3D
  • Custom properties
Member No. 0042Lab PassValid everywhere

Aurora mesh gradient

Four blurred, blended blobs drifting on keyframes. Zero JavaScript.

  • CSS only
  • Blend modes
Pure CSS

Generative SVG art

Seeded Bauhaus-style compositions. Every click is a new, reproducible poster.

  • SVG
  • Seeded random

Flow field

4,000 particles following a curl-noise vector field, drawn with fading trails on a 2D canvas.

  • Canvas 2D
  • Noise
Your cursor bends the field

Gooey metaballs

Blobs drift like a lava lamp, melting together and pulling apart, and a tail follows your cursor. An SVG blur plus an alpha threshold does the melting.

  • SVG filters
  • Spring physics
Move around

Hand-built data viz

An animated area chart with a crosshair tooltip, written from scratch in SVG. No chart library.

  • SVG
  • Data
Weekly visitors0

Spotlight cards and magnetic buttons

A shared light follows the cursor across card borders, and buttons pull toward the pointer.

  • CSS masks
  • Micro-interaction
01FastStatic HTML, instant load.
02AccessibleSemantic and keyboard friendly.
03ResponsiveFluid from phone to cinema.
04DelightfulMotion with intent.

Scroll-driven animation

Native CSS scroll timelines. Each word scales and fades as it crosses the viewport.

  • CSS scroll timeline

Scroll inside this box

Scroll
driven
animations
with
zero
JavaScript.

animation-timeline: view()

Component kit

Switch, segmented control, slider, accordion and rating. Built on native, accessible elements.

  • Design system
  • A11y
What is this made of?

Native elements, styled. Checkbox, details, range and buttons.

CSS 3D cube

Six divs and preserve-3d. No WebGL involved, with inertia when you let go.

  • CSS 3D
  • Pointer drag
HTML
CSS
SVG
JS
A11Y
UX
Drag to spin

FLIP layout animation

First, Last, Invert, Play. Grid items glide to their new positions when the order changes.

  • Web Animations API

Typewriter terminal

A scripted session with variable typing speed, a blinking caret and colored output.

  • JS
  • Storytelling
claude ~ web-lab

      


      

        
Game of Life
Conway's cellular automaton on a wrapping grid. Paint new cells while it runs.
  • Canvas 2D
  • Simulation

        
Draw with the mouse

      


      

        
A playable game
Breakout with particles, screen shake and synthesized sound effects. About 150 lines.
  • Canvas 2D
  • Game loop
  • Web Audio

        
Mouse or arrow keys. Click to launch

      


      

        
Text on a moving path
An SVG textPath on a spiral whose geometry is regenerated every frame.
  • SVG
  • Typography

        
Type can follow any path you can draw. Curves, loops, spirals, signatures. Type can follow any path you can draw.

      


      

        
Infinite marquee
Two counter-scrolling rows with outlined type. It pauses on hover.
  • CSS only

        
Layout✦Motion✦Type✦Color✦Interaction✦Sound✦3D✦
Accessible✦Responsive✦Performant✦Semantic✦Themeable✦