Vibe coding & micro-tools
The part that doesn't fit in a screenshot.
I'm Jean. I build small web tools with an AI agent doing most of the typing, and write about the parts that still needed a human — the spring that felt wrong, the glass panel that looked cheap, the bug that only appeared on a real phone.
Tools
Free · no login · runs in your tabSpring Playground
Tune stiffness, damping, and mass against a live preview, then copy the exact Framer Motion or CSS easing that reproduces the feel.
Open toolGlass & Grain
A backdrop-filter generator with the two things most glass panels skip: a tint with contrast, and static grain to hide banding.
Open toolLatest writing
All postsSpring physics for interfaces: what stiffness, damping and mass actually do
A practical guide to spring parameters in UI work: how stiffness, damping and mass combine, how to read the damping ratio, and when a CSS easing curve is the better tool.
Glassmorphism that doesn't look cheap: blur, tint, grain and the contrast trap
Most frosted-glass UI fails for two reasons: nothing worth blurring behind it, and no surface on top of it. Here is the four-layer recipe, the SVG grain trick, and the contrast test that catches the rest.
The vibe coding review loop: shipping AI-written code without trusting it
Vibe coding moved the bottleneck from typing to verifying. A concrete loop for keeping agent output reviewable: contracts, small diffs, running the thing, and the specific mistakes to look for in a diff.
Why this exists
Updated as I learnMost tutorials show the finished thing. This is the other half: the numbers behind a motion curve, the three CSS lines that make a panel look expensive, the review habit that catches an AI agent's confident mistakes. Written for people shipping alone, at night, with a build already running.