Background: Higgsfield image + Seedance video

A field guide to web design with Claude

What Claude can build for the web.

Every demo on this site was designed and coded by Claude. Eleven chapters, each on its own page: plain HTML and CSS, pure design elements, SVG motion, real-time 3D with three.js, animation with GSAP, Lottie and Rive, media generated with Higgsfield, sound, scroll storytelling, everyday UI, modern CSS and accessibility.

Claude Design SVG three.js Animation Higgsfield Sound Scroll UI CSS A11y
126live demos
11chapters
4libraries

Chapters

Each chapter is its own page. The menu at the top follows you everywhere.

01

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.

 02

Design elements

Type, color, buttons, cards, patterns, shapes, frames, icons and whole design styles. A specimen book of the visual parts a site is made of.

 03

SVG motion

Line drawing, shape morphing, motion paths, animated icons, a logo intro, living filters and a transit map you can ride. All of it sharp at any size, animated with CSS, SMIL and a little JavaScript. Still no libraries.

 04

Claude + three.js

Custom GLSL shaders, instancing, physically based glass, raymarching and post-processing. Scenes start when you scroll to them and shut down when you leave.

 05

Claude + GSAP, Lottie and Rive

The three animation tools professional sites lean on. GSAP timelines, text splitting, layout flips, drag physics and scroll scrubbing; Lottie animations whose JSON Claude wrote by hand; Rive state machines you can poke at.

 06

Claude + Higgsfield

Claude prompted Higgsfield for images, video loops, a textured 3D model and voices, then built experiences around them. Generation is half the job. Making the assets do something is the other half.

 07

Sound

Synthesizers, drum machines and generative music written by Claude with the Web Audio API. Spatial and audio-reactive 3D with three.js. Voices and sound design generated with Higgsfield. Turn your volume up and click.

 08

Scroll storytelling

A product that turns as you scroll, a gallery that moves sideways, layered depth and a pinned narrative. The scroll position is the timeline.

 09

Everyday UI

Less spectacle, more product. Forms that help, dialogs that trap focus, a command palette, notifications, carousels, pricing and data. Built on native elements wherever the browser has one.

 10

Modern CSS

Container queries, the parent selector, anchor positioning, view transitions and oklch color. Each demo shows whether your browser supports the feature and falls back gracefully when it does not.

 11

Accessibility and quality

Motion you can stop, a page you can use with only a keyboard, colors that pass contrast, and a page that checks itself. This is the part that separates a professional site from a demo.

Every demo