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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.