A space for all of my current AI experiments.
+ HTML/CSS — layout, screens, animations, transitions
+ Canvas API — all 4 visualizations drawn in raw JavaScript
+ CSS animations — fade-ins, the loading dots
+ Vanilla JS — screen switching, card rendering, viz cycling
Whenever I finish a show on a streaming service the experience can be a little jarring. I might've just finished an emotional episode and before I can really take it in, the experience takes me to another episode, or even worse, another show. What if there was a visualization that created a calming atmosphere, and gave you time to ponder what you just watched?
Experimented with a full page of cards interaction. The idea of a grid of cards gently coming off the page and then surrounding a specific object. When a user scolls back up the cards can realign just as they came off the page.
+ Claude Code — generated all the HTML, CSS, and JavaScript
+ Vanilla JS — scroll-driven animation, RAF loop, lerp physics
+ CSS transforms — card positioning and transitions
I wanted to see if I could recreate a digital version of my Rama Works M60 keyboard. The most impressive part for me was Claude code was able to take audio I recorded with my iphone, remove extra background noise with js, and trim the audio so only the keystrokes could be heard. Give it a shot, its fun to play around with.
+ Figma — designed keyboard chassis and individual key SVGs
+ Vanilla HTML/CSS/JS — zero dependencies, no frameworks
+ Web Audio API — real-time audio processing pipeline (trimming, high-pass filter, noise gate, gain)
+ OfflineAudioContext — offline buffer processing for pre-filtering recordings
+ CSS animations — staggered diagonal fade-in (top-left to bottom-right)
+ SVG assets — per-key up/down states swapped on press for visual feedback
+ Rolling WPM algorithm — sliding 5-second window, standard 5-char word definition
+ Claude Code — generated all the HTML, CSS, and JavaScript
Lately I've been inspired by the AI illustration tools I've seen people building on X. I wanted to make something similar: upload an image, apply a dither effect, and fine-tune it with precise sliders. From there is an animation feature where you can play with hover interactions, with more sliders giving you granular control. It's amazing to me how fast you can create these tools with Claude.
+ Canvas 2D API — pixel-level image processing, luminance sampling, and real-time dot rendering via ImageData / getImageData
+ 8 dither algorithms — error diffusion (Floyd-Steinberg, Atkinson, Jarvis, Stucki, Sierra, Burkes) + ordered Bayer matrices + Blue Noise, all with serpentine scan support
+ Image preprocessing pipeline — brightness, contrast, gamma, sharpen, blur, and noise applied via Canvas compositing before dithering
+ Spring physics + force field engine — per-dot mass/stiffness/damping simulation, radial repel/attract/vortex cursor interaction, and click-triggered ripple waves at 60fps via requestAnimationFrame
+ Client-side file I/O — FileReader for image import, Blob + URL.createObjectURL for PNG/SVG/JSON export with no server require
+ Claude Code — generated all the HTML, CSS, and JavaScript
+ HTML/CSS — layout, screens, transitions, pill buttons, responsive spacing
+ Canvas API — word wall drawn and animated in raw JavaScript each frame
+ Vanilla JS — screen switching, typewriter, ring pulse engine, history, state management
I remember shaking my friend's Magic 8-Ball and getting the same few answers no matter what I asked. I wanted to build a modern digital version where you can ask anything and get a many mysterious responses.
All Works ©2K26 Ryan Blackman
