Design Laboratory
Concept Gallery.
40+ prototypes exploring spatial design, lighting, and content paradigms for the Alt Shift Lab website. Each one is interactive — move your cursor to experience the space.
Round 1 — Lighting & Space
Round 2 — Breaking the Rectangle
No Containers
Content grouped by pools of light, not borders. Text floats freely.
02Gravity Clusters
Individual elements float and attract each other. Cursor attracts them.
03Smoke Reveal
Content hidden behind fog. Cursor parts the smoke to reveal it.
04Constellation
Content as a network graph. Nodes and connections, not pages and sections.
Round 3 — Living Systems
Primordial Soup
Particles float in chaos. Cursor catalyzes crystallization around content.
02Living Dust
A field of drifting dust. Cursor parts it; content attracts orbiting halos.
03Magnetic Topography
Content nodes generate force fields. Particles trace field lines. Cursor bends the streams.
04Tide Pools
Bioluminescent particles flow between pools. Cursor controls the tide to reveal content.
Round 4 — Perception & Attention
Round 5 — Time & Memory
Round 6 — Biology & Growth
Round 7 — Signal & Noise
Round 8 — Spatial & Architectural
Round 9 — Site Structure
Split World
Two worlds on one page. Drag the diagonal divider to shift between Lab and Practice. A crack reveals a third zone.
02Split Layers v2
One page, two layers. Drag the veil between Surface and Substrate. Blue ink headings, amber annotations on grey.
03Split Layers v3
Same layered page with an ozone hole that erodes from top-center, revealing AI Cinema behind the surface.
Round 10 — Collage Worlds
Collage: Studio
Dark cinematic base. Cut-out fragments, bold type at angles, teal colour blocks drift with cursor parallax. A director's mood board.
02Collage: Lab
Blueprint sketchbook base. Index cards pinned at angles, amber tape strips, blueprint corners, amber annotations. Organized workshop chaos.
03Collage: Cinema
Deep purple world. Fragments drift, dissolve, and glitch. Canvas particle system beneath. The world behind the wall.
Round 11 — Landing Experience
Round 12 — Education & Reference
Modern CSS
An interactive journey through CSS capabilities most teams are missing. oklch colors, container queries, :has(), scroll-driven animations — demonstrated live.
02CSS — Pushed
Volume 2: Extremes. Animated hue cycling, 8 entry transition types, 3D scroll morphing, :has() state machines, discrete animations, CSS-only modals.
03Creative Toolkit
Volume 3: Text effects, micro-interactions, glassmorphism, blend modes, masks, scroll-snap, SVG draws, CSS filters. All cross-browser and performant.
04Hidden Gems
Volume 4: @property, accent-color, ::selection, clip-path shapes, shape-outside, animate-to-auto, field-sizing, CSS counters, and 10 one-liner wins.
05Algorithmic Life
Volume 5: Beyond CSS. Flow fields, spring physics, flocking, Lissajous curves, wave interference, strange attractors. Mathematics as design.
06Design Mixer
A multiband EQ for design. 8 faders (temperature, weight, spacing, depth, edges, motion, texture, contrast) shape two live UI previews. Presets included.
07Design System
The CSS defaults live. oklch palette, fluid type, hover/focus patterns, easing curves, completion states, enter/exit choreography, CTA shimmer, AI portal. Drag the hue to re-theme.
These prototypes document the design evolution of altshiftlab.com. Each will eventually become a chapter in the design journey — a walk through the creative process.