Component theme

Playful Geometric Notation

8 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• Magic Square7x5 grid of color blocks in terracotta, teal, mustard, slate, and plum that slowly breathe — scaling and shifting saturation — evoking a Bauhaus…
• A Line Goes WalkingA single ink line wanders the warm paper canvas step by step, tracing a random path from a teal start-dot to a terracotta head; fades and resets on a loop.
• Arrow FieldA grid of colored arrows rotates and pulses in a slow flow-field current, each pointing direction driven by sine waves and radial angle from center.
• Glyph GardenChildlike pictographs — fish, moon, arrow, face, tree, star, boat — drawn stroke-by-stroke on warm paper, held, then erased and reseeded in a cycling grid.
• Polyphony GridA 16x6 color grid swept by a column playhead; active cells flash with scale and glow on each pass, voices re-seeded each lap for evolving compositions.
• Twittering ContraptionFour Bauhaus-style wire birds bob on a horizontal wire and chirp musical notes while a hand-crank below spins. Inspired by Bauhaus's 1922 painting.
• Colour Staircase9 color-graduated bars ascend like a staircase, each breathing in height and marching hue in staggered CSS keyframe loops. Warm parchment background.
• Geometric FaceAbstract Bauhaus-style face built from interlocking color planes that slowly cross-fade hues; eyes blink and mouth curves shift expression in a gentle loop.