Pocket Synth: Building a Playable Synthesizer With the Web Audio API
A synth with a step sequencer and arpeggiator that runs in a browser tab with no audio library. How the sound, the timing and the knobs work.
New post · Nov 10
Raffi Keklikian, notes from a web developer in Los Angeles
Engineering, AI and creative code.
Deep dives into software engineering, AI-assisted development, and creative coding. Practical guides, interactive demos, and honest takes on the tools shaping modern development.
- 14Pocket Synth: Building a Playable Synthesizer With the Web Audio APIweb-audio
- 13Super X-Ped Teardown: Pull Start a Two-Stroke in Your Browserwebgl
- 12The JavaScript You Can Delete: CSS and HTML in Late 2026css
- 11The Phase Shift, Revisited: Scoring My January Predictionsai
- 10WebMCP, Six Months Later: The API Moved Under My Toolkitwebmcp
- 09The Phase Shift: Notes from a Few Weeks of Agent-First Codingai
- 08Gapper: The Game That Will Destroy Your Productivitygame-dev
- 07Best A/B Testing Tools in 2026: Why I Switched to Stellarab-testing
- 06Best Email Validation Services in 2026: Stop Burning Money on Bad Listsemail-marketing
- 05Best Managed WordPress Hosting in 2026: I Manage 50+ Sites, Here is What I Usewordpress
Oct 2025Posts per monthNov 2026
All 14 posts →- Published14posts, the newest on Nov 10
- Topics43most on ai
- In the lab7interactive demos, all in the browser
- Writing since2025first post Oct 27, 2025
Raffi Keklikian · Los Angeles
ScrollRecent writing on engineering, AI and the web
Practical guides, deep dives and honest takes on the tools shaping how we build, newest first.
Super X-Ped Teardown: Pull Start a Two-Stroke in Your Browser
A working 3D teardown of a Go-Ped Super X-Ped. Prime it, choke it, pull the cord, then slow the two-stroke cycle to 1/1000 speed, cut the engine open and watch the tuned pipe push escaping charge back into the cylinder.
The JavaScript You Can Delete: CSS and HTML in Late 2026
Firefox 159 just brought scroll-driven animations to every engine. A field guide to the JS patterns CSS and HTML now replace, which need a fallback, and which are still Chromium-only.
The Phase Shift, Revisited: Scoring My January Predictions
I pulled ten claims from my January post on agent-first coding and scored each against public evidence: what held up, what was just extrapolation, and the review bottleneck I missed.
WebMCP, Six Months Later: The API Moved Under My Toolkit
In May I shipped a WebMCP code generator on this blog. By November key parts of its output were wrong. What changed in the spec, what the API looks like now, and what I fixed here.
The Phase Shift: Notes from a Few Weeks of Agent-First Coding
In December 2025, LLM coding agents crossed a threshold. My workflow flipped from 80% manual to 80% agent-driven in weeks. Notes on what works, what breaks, and where this is heading.
Experiments that grew out of the posts
Everything runs in your browser. Open a demo to play with it, or read how it was built.
Chaos Is an Art Form: Roller Grill Sessions
three.js · WebGL 2 · GLSL
A full-screen VJ backdrop for a DJ set, no controls. Hot dogs spin on the roller grill, DJs spin records: a Chicago dog, a ballpark dog and a New York dog come apart into exploded views on the downbeat inside five strange attractors, over a neon Hot Dog City, the set’s name alternating with the night’s other names on a giant record’s label. 124 bpm by default: type your own tempo and party name below.
Chaos Is an Art Form
three.js · WebGL 2 · GLSL
Full screen, no controls. A V8, a Strandbeest and a Cessna landing gear from teardown run, come apart and reassemble inside five strange attractors drawn by 200,000 points.
Pocket Synth
Web Audio · Canvas 2D · React
A synthesizer shaped like a piece of hardware, sized to fit one screen on a phone or a desktop: sixteen knobs, pads that light up and bend under a moving finger, a sixteen-step sequencer, an arpeggiator and a screen that draws whatever you are changing. Two oscillators, a filter with its own envelope and LFO, echo and reverb, built on the Web Audio API with no audio library.
Alien Spacecraft Command Center
Canvas 2D · GSAP · React
A browser spacecraft simulator with a warp-speed starfield, velocity and G-force gauges, anti-gravity physics and a stealth dashboard, drawn on Canvas and animated with GSAP.
The Timekeepers
SVG · Framer Motion · React
Twelve working clocks that tell the real time, each styled after an era of timekeeping, from an Egyptian sundial to a speculative holographic display.
Gapper
Canvas 2D · JavaScript · React
A one-button Canvas game: press space or tap to jump through the gaps, and see how long you last before you hit the rocks.
WebMCP Toolkit
WebMCP · React · TypeScript
Generate declarative HTML or imperative JavaScript tool definitions for WebMCP, then check your own snippet against a list of spec-based rules.
Get new posts by email.
Leave your address and the next post lands in your inbox when it's out.