Playground
A gallery of experimental prototypes and demos showcasing various visual effects and some general nonsense. Built with various web technologies, including WebGL, Canvas, CSS, SVG, WebGPU, and occasionally some ML magic. All demos are "works-in-progress", but you can experience them freely in their current state.
Dappled Light demo
Gobo-style dappled light composited over DOM content. Shadow patterns via CSS animations and mix-blend-modes and some good old fashioned trickery.
Dappled light effect that simulates sunlight filtering through foliage, creating organic, softly-blurred shadow shapes that drift slowly across a surface. The effect is achieved purely using CS mixing blend-modes, gobos and selective use of pseudo-selectors to create shadow patterns that dynamically interact with the underlying content, giving a natural and immersive feel to the scene.
Turntable tamagotchi demo
A pixel-art mascot that watches your every move — 75 Illustrator turntable frames with mouse tracking, and a little personality.
Penny is a pixel-art character rendered from 75 Adobe Illustrator Turntable frames. She tracks the mouse cursor by selecting the appropriate video frame/image or sprite based on the angle from her center to your cursor.
Magnetic Patterns demo
Using brand logos as interactive patterns can be both fun and functional! It can also be a bit demanding on the hardware.
Why settles for just having your logo? Turn your branding into a playful pattern with interactive elements. Showcase of the possibilities and challenges of using logo graphics as interactive patterns and provides a base for further optimization and experimentation.
Text on a Path lab
When you need to be creative, add some text on a path.
Text-on-a-path is stable of modern web, but getting it right can be tricky. But why stop there? Our friend the marquee animation is back now with physics, collision, and accurate dynamic text scaling.
Dithering about... lab
Exploration of dithering techniques implemented as a post-processing effect in Three.js.
Exploration of various dithering techniques, including ordered dithering, error diffusion, white and blue noise dithering, implemented as a post-processing effect in Three.js. This article delves into the implementation details of each technique, showcasing their visual differences and performance characteristics.
Topographic Lines demo
Domain-warped fBM contour lines rendered in a GLSL fragment shader.
An exploration of domain-warped fractional Brownian motion (fBM) contour lines rendered in a GLSL fragment shader, creating dynamic and visually captivating topographic line patterns. The results range from traditional map-like patterns to something out of a scifi movie.
Three Senses demo
A multi-sensory beach ad experience — sight, sound and touch.
Experience a multi-sensory beach ad experience that engages sight, sound, and touch. Combining Video, Three.js, synthetic audio and tactile feedback through pointer events to create a rich and engaging user experience. The sand misses you.
Depth Map Parallax lab
3D parallax effects using ML-generated depth maps.
Depth maps applied to ordinary images to create a 3D parallax effect. The demo ships with pre-processed examples, but you can also drop in any image and generate a depth map for it on the spot, entirely in the browser.
3D Text Shadows lab
Exploring various approaches for rendering faux 3D headings
There are many ways to extrude text: our exploration and findings of faux-3d effects for headings, utilizing multiple different CSS and SVG techniques to create dynamic text shadows that enhance the visual depth and impact of typography.
Fisheye Distortion demo
SVG-based smooth fisheye displacement filter
Real-time interactive fisheye distortion effect that works with any DOM element. Implemented as an SVG filter, allowing for smooth and customizable displacement of underlying content using fisheye or barrel distortion.
Gradient Pills demo
Combining normal-based gradient rendering and 3D capsule geometries for smooth shapes.
3D capsule geometries where GLSL shaders enable non-linear gradients and animations that would be impossible in CSS by using surface normals rather than fixed directions.
Displacement & Masking wip
Exploring pixel-offset and stencil masking techniques using CSS and SVG filters.
An interactive laboratory examining visual distortion. Section 1 covers 'Fluted Glass Refraction' using dynamically generated 1D gradients and SVG displacement mapping. Section 2 covers the 'Masked Offset Glitch' using HTML5 canvas stencils and CSS layering.
Type Patterns wip
Generate tileable typographic pattern visuals from any text — pick the font, layout, and colour palette, then export as SVG or PNG.
A browser-based tool that quickly tiles any short text — a name, acronym, or number — across a configurable canvas using different layout modes, a curated Google Fonts selection, and a reactive colour system. Useful when you just need a quick visuals before having much branding in place. The generated pattern can be exported as SVG or PNG for use in other projects.