The latest articles on DEV Community by TinkerFX (@tinkerfx). https://dev.to/tinkerfx https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4047999%2F53a84516-7f6b-4b4a-95db-dbfb43cd2d80.jpg https://dev.to/tinkerfx en TinkerFX Sun, 26 Jul 2026 17:20:08 +0000 https://dev.to/tinkerfx/web-effects-with-an-x-ray-mode-toggle-a-layer-see-which-lines-of-code-it-owns-2cag https://dev.to/tinkerfx/web-effects-with-an-x-ray-mode-toggle-a-layer-see-which-lines-of-code-it-owns-2cag <p>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.</p> <p>TinkerFX is 79 web effects built the other way round: every one of them comes apart.</p> <h2> Toggle a layer off, and its code gets struck through </h2> <p>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.</p> <p>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.</p> <p>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.</p> <h2> Drag a slider, and the line it drives lights up </h2> <p>The code is rewritten live as you tune. The line you just changed is highlighted, so you never hunt for the constant you moved.</p> <h2> Build it up </h2> <p>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.</p> <h2> Two code views </h2> <p>Simple is the readable version. Full is the literal source, so you can check that what you're reading is what's actually running.</p> <h2> Tune it, then copy your version </h2> <p>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.</p> <h2> How it's built </h2> <p>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.</p> <h2> A few to try </h2> <ul> <li><a href="https://tinkerfx.com/effects/split-reveal.html" rel="noopener noreferrer">Split Reveal</a></li> <li><a href="https://tinkerfx.com/effects/falling-letters.html" rel="noopener noreferrer">Falling Letters</a></li> <li><a href="https://tinkerfx.com/effects/dock-magnify.html" rel="noopener noreferrer">Dock Magnify</a></li> <li><a href="https://tinkerfx.com/effects/name-constellation.html" rel="noopener noreferrer">Name Constellation</a></li> </ul> <p>All 79 are at <a href="https://tinkerfx.com" rel="noopener noreferrer">tinkerfx.com</a></p> <h2> The part I'm unsure about </h2> <p>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?</p> <p>If you open one and it doesn't help, I'd rather hear that than not.</p> webdev css javascript showdev