[FDB] frontend design basics

A design guide: the tools I use, the principles I’ve learnt, and what I build.

This site is the live guide. The GitHub repo is the same guide in Markdown, plus a toolkit.json your AI agent can read.

WATCH THE SHOWREEL ↓ · 10 ACTS · WIN95 → 3D → COLOUR

[░░░░░░░░░░░░] 0/21

warming up live pieces

Tools.exe

FileEditViewHelp

Name	Items	Type
Motion & scroll	9	File Folder
3D & WebGL	9	File Folder
Shaders & gradients	5	File Folder
Component libraries	8	File Folder
Reference & research	7	File Folder
Claude skills (taste & rules)	7	File Folder
Agent infrastructure	3	File Folder
Voice & messaging	2	File Folder
AI image & video	1	File Folder

51 object(s)9 folders

Welcome

Welcome to Front End Design Basics.
Scroll to continue.

[00 BOOT] [MEM 65536K]

built with: gsap · css

StartTools.exe12:00

FDB/95

front end design basics

FDB BIOS v2.00  (C) 2026 Front End Design BasicsCPU: Pixel 8x16 @ 60 fpsMemory Test: 65536K OKDetecting tools ...... 37 foundDetecting sites ...... 293 foundStarting FDB/95 ..._

Scroll to boot ▼

[01 BLAST] [TILES 3,600]

built with: canvas2d · gsap

[02 CUBE] [B1/7 PIXEL TO HD]

[STYLE 1/6] 1-BIT DITHER

PX 48

Pixel to HD: a pass steps from 48px to 1px while 296 blocks close into one smooth cube.

built with: threejs · r3f · postprocessing · glsl · canvas2d · gsap

[03 TOOLS] /tools

Here are the tools.

Tool Blocks

[open /lab/tool-blocks]

built with: r3f · drei · postprocessing · glsl · gsap · canvas2d · svg

┌─ tools.txt ── 51 tools ─┐

Tool categories with counts
motion....	09	gsap lenis motion scroll-world scrollcraft view-transitions animejs dotlottie taxi
3d........	09	threejs img2threejs threlte threeui spline playcanvas vectary postprocessing poly-haven
shaders...	05	ogl shadergradient getlayers unicorn-studio paper-shaders
components	08	react-bits magic-ui cult-ui 21st bklit shadcn motion-primitives lucide
research..	07	refero jitter paper tweakpane oklch fontshare easings
skills....	07	frontend-design impeccable taste-skill ui-ux-pro-max web-design-guidelines anthropic-example-skills frontend-design-basics
infra.....	03	context7 playwright chrome-devtools
media.....	02	voicestudio openwa
ai........	01	higgsfield

[open /tools]

[04 MAKE] /make

What you can make with them.

[see all 30 -> /make]

┌─ flip-bento ── 04.1 ─┐

[██████░░░░░░] flip-bento…

┌─ ascii-3d.exe ── 04.2 ─┐

Shape-Aware ASCII

[open /lab/ascii-3d]

built with: threejs · r3f · drei · postprocessing · glsl · canvas2d · gsap

Text splits from HD: the same shape, rendered twice.

┌─ pipes.scr ── 04.3 ─┐

3D Pipes

[open /lab/pipes-screensaver]

built with: threejs · r3f · drei · postprocessing · glsl · gsap

Grows from flat grey to chrome, and holds there.

┌─ type-blocks ── 04.4 ─┐

Type Blocks

[open /lab/voxel-type-assembly]

built with: threejs · r3f · drei · glsl · gsap · canvas2d

Voxels that know which letter they belong to.

[05.0] palettethe palette

c-1c-2c-3c-4c-5c-6

Motion design.

[█░░░░░░░]

[06 INSPIRATION] /inspiration

Principles, not sites.

[/inspiration]

[rule 01] /docs/rules

Steal a palette, not a layout.

Take the colours from something real and let them set the rules. Here they are lifted straight out of a screenshot.

080808

[rule 02] /docs/rules

Colour is a material.

Light bends through it. The glass refracts the six bars and the logotype; the colours stay true, only the shape moves.

Liquid Lens

[open /lab/glass-lens]

[rule 03] /docs/rules

One thing first.

A poster has one loudest element. Six scenes, cut hard, each with a single thing you read first.

Kinetic Poster

[open /lab/kinetic-poster]

[rule 04] /docs/rules

Two families, one scale.

A serif for voice, a grotesk for reading, pixel faces for labels. Sizes step on a fixed scale.

Newsreader

Schibsted Grotesk

VGA 8x16

MS Sans Serif

16 · 17 · 24 · 32 · 48 · 64 · 96 · 128

[rule 05] /docs/rules

Pull the eye to one point.

Everything bends toward the centre. Depth and contrast decide where you look before you decide to.

Event Horizon

[open /lab/event-horizon]

[07 SITES] /sites

293 real sites.

Unwoven Gallery

[open /lab/velocity-gallery]

built with: threejs · r3f · glsl · gsap · lenis · next-image · canvas2d

Halftone Develop

[open /lab/halftone-develop]

built with: ogl · glsl · gsap · next-image

[/sites with search]

[08 LEARN] /docs

Now learn how.

[██████░░░░░░] ascii-cursor-field…

┌─ /docs/how-to ─ 20

How-tos

Short numbered task guides, in seven groups.

┌─ /docs/rules ─ 9

The rules

TL;DR first, then the detail.

┌─ /docs/cases ─ 10

Cases

Great sites, broken down from their own write-ups.

[08.1] pinned-chapters

A scroll story is its own page. Here it is as a still; open it to scroll it.

Pinned Chapters

[open /lab/pinned-chapters]

[09 COLOUR] [09.0] flood

Gradient Lab

[open /lab/liquid-gradient]

built with: threejs · r3f · glsl · gsap

[09 COLOUR] [09.1] street level

[09 COLOUR] [09.2] riot

[09 COLOUR] Colour arrives last, on purpose.

Now make something.