Design Trends — Interactive
Interactive canvas demonstrations of visual design movements: generative art, kinetic typography, Neo-Brutalism, Swiss grid, and color theory.
Design experiments — part of 🧪 Lab · ← Design
Seven interactive demos — one per design movement. Drag, click, and adjust parameters to understand the mechanics behind each aesthetic.
Generative / Flow Field Creative Coding · Tyler Hobbs lineage · p5.js
2 000 particles follow a noise-derived angle field — each step laid as a semi-transparent stroke. Trails accumulate then fade, producing emergent fiber texture. The algorithm behind most "algorithm art" on Art Blocks. Adjust trail opacity and speed; click Regenerize to reseed the field.
Kinetic Typography Motion Design · 2010s– · GSAP / CSS
Move the cursor over the text — each letter magnetically repels from the cursor position. Toggle to Wave mode for a continuous sine-wave animation. Click Next to cycle through design aphorisms. The repulsion mechanic is the core interaction in most creative-agency portfolio hover effects.
Neo-Brutalism ↔ Glassmorphism 2020s Web · direct reaction pair
Drag the card around. Click Accent to rotate through colors. Toggle switches the same card between Neo-Brutalism (hard border, flat shadow, zero blur) and Glassmorphism (backdrop-filter blur, gradient tint) — the two aesthetic poles that defined early-2020s web design.
Swiss / International Style — Modular Grid 1950s– · Müller-Brockmann · Helvetica
Adjust columns and gutter width — see the invisible scaffold that structures Swiss design. Click anywhere on the canvas to place a text block that snaps to the grid column and baseline. The baseline grid (orange lines) keeps all text on a consistent vertical rhythm.
Bauhaus Color Theory 1919–1933 · Itten · Albers
Click the wheel to select a base hue. The dots and swatches show the computed harmony — the same relationships Johannes Itten taught at the Bauhaus color workshop. Switch between Complementary (opposite on wheel), Triadic (120° apart), Analogous (neighbors), and Split-Complementary.
Cyberpunk / Digital Rain 1984– · Gibson · Ghost in the Shell · The Matrix
William Gibson's Neuromancer (1984) crystallized the cyberpunk visual language — neon on black, cascading data, urban decay meets high technology. The "Matrix rain" aesthetic (Ghost in the Shell, 1995; The Matrix, 1999) became the era's defining motif: Japanese katakana and Latin glyphs cascading as digital snow. Contemporary lo-fi, vaporwave, and retro-terminal aesthetics descend directly from this moment.
8-bit / Pixel Art Era 1977– · Atari · NES · Demoscene · Lo-fi Revival
Hardware constraints became a design language. The Atari 2600, NES, and Game Boy imposed grid-based aesthetics that artists turned into richness — each pixel placed deliberately. The demoscene (1980s–90s) pushed these constraints as competitive art. Contemporary pixel art persists as a deliberate choice: Celeste, Undertale, lo-fi music visuals, and retro branding all employ the 8-bit vocabulary. Paint on the canvas — 16-colour NES-inspired palette.
