Web effects with an X-ray mode: toggle a layer, see which lines of code it owns
TinkerFXCopy-paste an effect from anywhere and you get a finished snippet. It works, or half-works, and the...
Copy-paste an effect from anywhere and you get a finished snippet. It works, or half-works, and the moment you want to change one thing you're reading forty lines trying to find which one does it.
TinkerFX is 79 web effects built the other way round: every one of them comes apart.
Toggle a layer off, and its code gets struck through
Each effect is split into named layers. Turn one off and the lines that layer owns get struck through, while the effect keeps running without them.
On the X-ray Spotlight demo, for example, unchecking "Skeleton" strikes out the one line that builds the wireframe — and the wireframe vanishes from the demo at the same moment. Check it again and both come back.
That mapping — this part of the behaviour belongs to these lines — is the thing you normally have to reconstruct in your head. Here you switch it off and look.
Drag a slider, and the line it drives lights up
The code is rewritten live as you tune. The line you just changed is highlighted, so you never hunt for the constant you moved.
Build it up
Instead of dropping the finished effect on you, "Build it up" assembles it one layer at a time, each step with a plain-language caption. You watch it go from nothing to done, in order.
Two code views
Simple is the readable version. Full is the literal source, so you can check that what you're reading is what's actually running.
Tune it, then copy your version
Sliders, Randomize and Reset on every effect. Copy gives you the version you tuned, as a self-contained snippet — not the example with its default numbers.
How it's built
No framework, no build step, no dependencies. There are no external scripts or stylesheets on any page — every effect is plain HTML, CSS and JavaScript, served as static files. No account, no signup, free. It works on a phone.
A few to try
All 79 are at tinkerfx.com
The part I'm unsure about
Does taking an effect apart like this actually help you understand it faster — or is it just decoration on top of a demo you'd have read anyway?
If you open one and it doesn't help, I'd rather hear that than not.