Vibe-Coding Experiments

The best product builders know how to execute technically. This is a collection of 0-to-1 experiments where I use vibe-coding and rapid prototyping to learn new technologies on the fly. By leveraging these tools, I can drastically increase my output and prototyping speed - turning raw ideas into functional, interactive products faster.

TOOLS

Claude Code, VS Code, Figma, AntiGravity

TIMELINE

Feb '26 - Present

TIMELINE

Feb '26 - Present

BrowserWave

— Feb '26

An analog synth in your browser

Live Demo

GitHub

A browser-based analog synthesizer that lets anyone explore how electronic music is made. Twist knobs, play iconic riffs from Kavinsky to Kanye, and hear how waveforms, filters, and effects shape sound - no experience needed.


  • Built a real-time audio engine with a full signal chain (oscillator → filter → … → limiter) using Tone.js, with strict separation between audio logic and React UI via a custom useAudioEngine hook

  • Implemented 7 looping note sequences with independent tempo control via Tone.Part and Tone.Transport synced to a live Canvas-based oscilloscope running at 60fps

React

Vite

Tone.js

Web Audio API

Canvas API

Tailwind CSS

GitHub Pages

How safe is AI?

— Jan '26

DataViz that tracks vulnerabilities affecting AI as live bacterial colonies

GitHub

A daily-updated interactive visualization that maps real-world vulnerabilities affecting AI systems as living biological colonies growing inside petri dishes — each category of vulnerability rendered as a distinct organism morphology, driven entirely by live NVD and GitHub Advisory data. The more critical the vulnerability, the more the petri dish colony grows.


  • Canvas rendering pipeline for each petri dish, using feTurbulence for organic agar textures, feDisplacementMap for colony edge distortion, and custom metaball algorithms for organism growth driven by real CVE severity and patch data.

  • Daily Python data pipeline via GitHub Actions that fetches, categorizes and scores AI vulnerabilities across 9 threat categories using NVD API and GitHub Advisory DB

React

Vite

HTML5 Canvas

SVG filters

SVG Filters

GitHub Actions

GitHub Pages

Python

NVD API

Text scorch

— Mar '26

Feature demo for PreText - a new cutting edge text rendering framework for web

GitHub

A magnifying glass that burns text off the screen. Hold it over a paragraph, watch sunlight scorch the paper, and see characters float away as glowing embers, while the remaining text reflows around the burn marks in real-time.


  • Built a real-time text-layout engine using Pretext.js with layoutNextLine() computing variable line widths per frame around dynamic scorch exclusion zones without DOM

  • Implemented a character-level particle system where burned glyphs detach seamlessly from the Pretext layout, spawn as ember particles with drift and tumble physics as they disappear to ash

  • Magnifying glass renders a frosted lens effect via Canvas filter compositing with focal point caustic animation driving the burn interaction

Pretext.js

Canvas 2D

TypeScript

Vite

Back to top

Work

About