text overlay effect with css masking

A long while ago I made a Java-based tool called k/stencil, though (unusually for me) I somehow removed it from its place on my website, and can't find the old code.

In short I could use it to make stuff like this:

Basically I was trying to automate making stuff like this, that I made in the ancient version of Paint Shop Pro that was my go to for too many years:

Anyway. These days, CSS can totally do the same effect. To whit:

.overlay {
    font-family:impact;
    font-size:80px;
    background-image: url(http://kirk.is/features/wallpaper/full/umbrella.jpg);
    background-size: 400px 300px;
    background-position:-20px -20px;
    line-height:60px;
    letter-spacing:-4px;
    padding:10px;
    -webkit-background-clip: text;  
    background-clip: text;  
    color: rgba(0,0,0,0);  
}

plus

<div class="overlay">KIRK.is<br>k/stencil</div>

can make something like

So, to honor, or replace, my old tool, I thought I'd build a tool. But then I realized that was kind of overkill... I mean the tool I was envisioning would be a highly configurable expert-ish tool,  basically saying "ok, here's the basic CSS, you edit it and I'll show you the changes updating on a sample!". Which is exactly what jsFiddle is. Duh.

So I made one of those!

UPDATE: I changed my mind, because why the jsFiddle is ok, it doesn't let you quickly play with sliding the image or changing it's zoom, so I reinstated http://kirk.is/features/kstencil/. I used basic jQuery mouse events for sliding the background and used noUiSlider as a lightweight library for the zoom widget.  Anyway, check it out, it's rough but effective.