Experiments
Medtech
Medical device interfaces rebuilt with modern web tooling. Vital signs monitor, blood pressure, glucometer, and pulse oximeter, each replicating the physical device experience with clinical clarity.
Gradients
Eight animated gradients side by side, each one a different CSS technique. No images, no canvas.
Magic Button
The featured component from the CloudX website: a spinning gradient border with a glow that breathes. Explained step by step.
Button Composition
The Magic Button taken apart as a blueprint: four layers floating in perspective. Press assemble and watch them snap together.
Component Breakdown
The Magic Button documented like a design system spec: types, states, icons, styling, size and spacing, all live.
D20
A minimalist twenty-sided die in violet wireframe. Click it and let fate decide.
Table Dice
The full D&D set side by side, from d4 to d20. Pick your colors and roll them all.
Back to the Future
A tribute to the 1985 classic. Great Scott!
The Time Machine
Where we're going, we don't need roads.
Camera Framing
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 12 Principles of Animation
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.
Scroll-driven Animations
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.
In the works
CSS Grid Puzzle
Exploring CSS Grid layout with an interactive grid placement system. Playing with explicit track sizing, named areas, and overlapping elements.
Glassmorphism System
Layered blur effects and translucency using backdrop-filter. Exploring depth perception and accessibility trade-offs when using glass-style UI.
Fluid Typography Scale
Responsive type that scales smoothly between viewport sizes using clamp(). No breakpoints, no jumping, just fluid, proportional type.
The Alphabet in CSS
Every letter of the alphabet drawn entirely in CSS, no SVG, no images, no fonts. Pure geometry, box shadows, and transforms.
OKLCH Color System
Building a perceptually uniform color palette using the OKLCH color space. Generating accessible, harmonious scales from a single hue.
Immersive Training
A physical and virtual training center for high-performance athletes and rescue teams. Simulates real terrain, altitude, and weather conditions in an immersive environment. First use case: mountaineers and rescue professionals.