001 tile / opening

PPADDL·com

An exploded-view diagram of a beautiful machine. Scroll to disassemble.

// 002

Confetti as code.

// 003 — pattern.swatch

Checkerboard at 40×40px. Coral over Cream. Hard edges, no gradients.

// 004

River as squiggle.

// 005 — fern.frond

Nature, but geometric.

A leaf reduced to a triangle with a single vein line. A river rendered as a sine wave. The taxonomy of forms, drawn with a 2px stroke.

// 006

Sun = circle + radial dashes.

// 007 — dotted.field

4px dots at 32px intervals. The substrate beneath the carnival.

// 008

Mountain as stepped pyramid.

README — How to read this site
You are looking at PPADDL: an exploded-view diagram of a portfolio that refuses to be tidy.
The grid you just scrolled through is the portfolio-grid: tiles of varying sizes (1×1, 1×2, 2×2, 2×3) arranged in deliberately off-kilter rhythm.
The dashed gutters between tiles are not bugs. They are the --scaffold made decorative — grid lines as first-class design elements.
Move your cursor. The 20px circle that follows it morphs to match what it touches: a fill over a tile, a text bar over prose, a triangle over the ticker.
This document teaches you about PPADDL by showing you PPADDL, piece by piece.
Continue scrolling for chapter.02 — duotone.imagery.

// 010 — duotone.cool

Mint Circuit + Anthracite

Photographs stripped of their natural color and remapped to two-tone palette pairs. Cool subjects get the Mint pairing.

// 011

Hard edge.

// 012

Pattern field.

// 013 — duotone.highlight

Lemon Signal + Lavender Byte

For highlight subjects. Reserved usage — the loudest pair in the deck.

// 014 — cosmic.indigo

The deep field. Where the tutorial voice lives.

// 015

Warm subject.

// 016

Substrate.

// 017 — annotation

Captions explain what you're seeing. Numbered steps guide the scroll. The site labels its own beauty.

02 — Cursor as conversation
The signature interaction is not parallax. It is not stagger-fade. It is the cursor-follow.
A 20px circle replaces your pointer, trailing 60ms behind, drawn with a 2px Coral Shock stroke.
Hover a tile: the cursor expands to 48px and fills with the tile's accent at 30% opacity.
Hover a paragraph: the cursor morphs into a vertical text bar in #00C9A7.
Hover the ticker: the cursor becomes a triangle pointing in the direction of scroll.
Continuous conversation. No jump cuts. No sales pitch. Just a quiet machine that responds.

// 020

Lemon Signal.

// 021 — pattern.swatch

Lemon × Lavender

Chosen for highlight tiles only. Use sparingly.

// 022 — circuit

Mint Circuit fills selected tiles where the duotone would feel redundant. A flat wash of confidence.

// 023

Cool subject.

// 024

Coral Shock.

// 025 — duotone.warm

Coral Shock + Cosmic Indigo. The pairing for warm subjects, anchored in the deep field.

// 026

Lavender Byte.

// 027 — colophon

PPADDL.com is set in Space Grotesk + DM Sans + JetBrains Mono. Built without gradients, hero sections, or parallax — by design.

PPADDL·com

Nature, but geometric.

README — How to read this site

Mint Circuit + Anthracite

Lemon Signal + Lavender Byte

02 — Cursor as conversation

Lemon × Lavender