The Lab · Digital Exploration
A playground for digital design pieces where art, design, and motion meet. Some move, some stand still. Each piece is an isolated study, built to explore an idea before it finds its way into a real interface.
A tribute to the 1985 classic. Great Scott!
Where we're going, we don't need roads.
A minimalist twenty-sided die in violet wireframe. Click it and let fate decide.
The full D&D set side by side, from d4 to d20. Pick your colors and roll them all.
Eight animated gradients side by side, each one a different CSS technique. No images, no canvas.
The featured component from the CloudX website: a spinning gradient border with a glow that breathes. Explained step by step.
The Magic Button taken apart as a blueprint: four layers floating in perspective. Press assemble and watch them snap together.
The Magic Button documented like a design system spec: types, states, icons, styling, size and spacing, all live.
Camera framing fundamentals from my Image and Sound Design degree. The lens I keep returning to whenever I want to focus a piece or shift its perspective. Pick any shot and the camera reframes a crash-test dummy inside a live 9:16 viewport, with on-canvas angle indicators and degree readouts.
The Disney principles distilled by Ollie Johnston and Frank Thomas in The Illusion of Life, each illustrated with a self-contained CSS animation. The classic bouncing ball used as the lens to feel squash, anticipation, easing, follow through, exaggeration and the rest in motion.
Same result, two approaches: a dot moves horizontally as you scroll, once with GSAP ScrollTrigger, once with the native CSS animation-timeline API. Each in its own self-contained scroll container.
Exploring CSS Grid layout with an interactive grid placement system. Playing with explicit track sizing, named areas, and overlapping elements.
Layered blur effects and translucency using backdrop-filter. Exploring depth perception and accessibility trade-offs when using glass-style UI.
Responsive type that scales smoothly between viewport sizes using clamp(). No breakpoints, no jumping, just fluid, proportional type.
Every letter of the alphabet drawn entirely in CSS, no SVG, no images, no fonts. Pure geometry, box shadows, and transforms.
Building a perceptually uniform color palette using the OKLCH color space. Generating accessible, harmonious scales from a single hue.