Mini Tools

Creative experiments built with Canvas and WebGL

Overview

Over the past month, I've been experimenting and building a bunch of mini tools using web technologies. Here are some of my favorites

Sony PS Inspired Background

Original Sony PS3 XMB Background

A minimal recreation of the animated wave background inspired by the XMB menu on Sony's PSP and PS3, powered by a custom WebGL engine with GLSL shaders. A live editor panel sits alongside it, giving real-time control over colors, glow, wave layers, amplitude, frequency, and more.

Based on Sony's PS3 and PSP XMB interface
Demo of XMB Inspired animated background

Blob! Blob! Blob!

I made a little interactive blob for my website, this was an improvement on the original blob I made for my portfolio back in 2023. One of my favorite details is the edge glow. It catches the outline of the blob and gives it this soft rim of light, almost like it’s being lit from behind.

I also added controls so I could tweak the shape, surface distortion, colors, glow strength, and movement in real time. Most of the fun came from messing with those values until the blob started to feel like it had its own little personality.

Demo of Blob

You can try out in a playground here.


Effector

Effector (Im bad with naming) is a simple browser-based image effect editor that turns an image layering on a set of glass-and-lens style distortions in real time.

You get an animated warp with chromatic RGB shift that loops on a timer, a fisheye lens, saturation control, and a stack of "frosted glass" looks: a soft frost with adjustable blur and grain, fluted glass with configurable ribs and direction, and refractive water droplets. On top of that you can drop framed regions onto the image and choose whether each effect hits the frames or everything around them

Demo of Effector Editor [work in progress]
Output example with a looping warp and rgb shift effect
Output example with a looping warp and rgb shift effect

Sort Rain

Original tool built with P5.js [Late 2024]

A browser-based creative tool that turns a single photo into a glitchy, scan-line image. Instead of classic pixel sorting, it samples a one-dimensional strip of pixels (a row, column, or radial ring) and tiles that slice across the whole canvas, with the original photo floating on top.

Drag the scan line and the background ripples in real time, powered by WebGL and custom shaders. You can loop the motion with easing curves, add animated stroke overlays, and tweak fit, scale, and aspect ratio, all through a clean floating HUD with separate editor and preview modes. Best of all exports finished stills or animations straight to MP4 or GIF.

Improved UI and features

This project was heavily inspired by The Killing of a Sacred Deer Digital Campaign Poster Graphics by Marvin Schwaibold and Watson DG.

Playground