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