Slitscanner

I was working on the redesign of this very website when I was noodling on what, if any, photo of myself to put on the site. Plenty of photos exist of me online, but I'm still a little shy about putting more of them out there, so my mind went to distorting a portrait a bit to be just enough to satisfy the need, but still have some fun with it. I had been using the "slit-scan" effect with my flatbed scanner a bit recently for some fun little side projects, so I thought I could apply that technique to get something usable.

As is often the case when working on a personal project, I was doing this late at night in my office, which shares a wall with my 3-year-old daughter's bedroom, and my big flatbed scanner is pretty loud. Not wanting to chance waking her, I thought, "There must be a web-based tool for simulating this effect." But after searching around, I couldn't really find anything that did exactly what I was looking for.

I did find this tool, wonderfully named "SKAAAN Tool", made by a fellow named Antlii. It is really well done, but I found the controls a little unintuitive, and it didn't have a few features I found myself wanting—like the ability to add multiple layers and add text.

I genuinely found the prospect of creating the tool I was looking for exciting, because there just aren't many things I need or even want to do that don't already have a decent solution. But, this was pretty much the definition of yak shaving. After all, it was just a dang photo of myself that I needed for the website I was supposed to be rebuilding. So I knew I couldn't resist, but I also didn't want to spend too much time on it. 

So, as much as I have been a critic and a skeptic, and as much as it pained (and still pains) me to say it, this seemed like a good candidate for giving 'vibe coding' (god I hate even typing that) a chance. I'm not sure what people even consider 'vibe coding'—like, is it never touching a line of code yourself? Or is it just heavily assisted? Whatever the case, it doesn't matter, but I would put this in the heavily assisted camp.

I knew it was going to be canvas-based, cause cnavas is what you use when you want to generate some raster art and make it savable. But I honestly don't have a ton of experience with canvas. I've used p5.js in the past for some simple effects, but nothing too complicated. And I knew I wanted to build it in Astro, because I just really like building little projects in Astro—I know it well enough to make it a quick and enjoyable process that doesn't get hung up on project configuration.

So I set up an Astro project, and got to prompting. I didn't have the foresight to document my prompting journey in Cursor, but I believe I started pretty basic, in 'plan' mode, probably with something like:

I'm sure the actual prompt differed quite a bit, but that was the gist. And it did a pretty good job of getting that basic functionality down right off the bat. From there there process looked like this:

• Test the output
• Manually modify the markup or JavaScript logic where needed
• Prompt for additional functionality, or tedious tasks (like reordering things, moving the general layout around)
• Test the output
• Repeat 

This was more or less the same process for the majority of the project until I got close to what felt like a version 1 feature-complete tool, and at that point, I went in and overhauled the CSS and heavily adjusted the markup to my liking. I gave it some general styling pointers throughout, but it was pretty bland and unnecessary to nail down during the early stages. I'm still a semi-reluctant user of these tools to begin with, and I just felt like CSS and styling are things I'm both good at, and enjoy doing. 

Even though the whole reason I started this adventure was to create a fun self-portrait, pretty early on in building the thing I realized it would be way more fun to be able to mess around with text. So I added the ability to add text to the canvas, and of course you need to be able to choose a font you want to work with. The fun thing about that part is that the font-family property can be any font you have installed locally on your machine, and because it's just being dispalyed on the page and not saved to a server, you don't have to upload a font file, you just set the name in a text input and you're good to go!

I sent an early in-progress version to a few friends who I thought would have fun with it, and they gave me some really great feedback, and some bug reports. After more iterations, and more features (using your device camera as a layer, adding some easing to the drag, setting layer blending modes), I felt like I got it to a pretty good place. 

I shared it in a few different channels (friends, Reddit, Discord), and to be honest, I thought it would create a lot more spark than it did. I had generally positive reactions to it, but no evidence of sustained use. I even took the opportunity to try out Fathom as a privacy-focused alternative to Google Analytics, and I found it to be an awesome piece of traffic tracking software that only gives you enough non-personal data to get a decent idea of what kind of traffic a site is getting.

This could be in part because I'm just not very comfortable marketing myself, or things that I've made. But I also realized that while I find this tool super fun, and pretty dang good at achieving what I wanted—an easy-to-use, web app to create images using the 'slit-scan' effect, that's just not something most people have a need for very often. Even designers and creative types like me, don't need to do that but once in a while. 

I think I got excited about building something (with lots of assistance) that for once didn't already have a dozen good alternatives, and thought it might gain some traction for that reason alone. But it won't get used if no one knows it exists, and being that it has such a niche use case, with an already pretty niche group, it was never going to be a tool anyone turns to daily—myself included! I spent a lot of time building it over a few weeks or so, and have only used it a handful of times since.

Maybe that's also kind of how 'vibe-coded' projects tend to go. If you find yourself wanting to build something that doesn't already have a decent tool, maybe it's already pretty niche, and maybe scratching your own itch is pretty satisfying at first, but it may be an itch few others have, and you yourself may lose interest in a short period of time.

It's probably just me, though.

If you do find yourself in a situation where you do need to create some slit-scan imagery, I hope you find this, and I hope you find Slitscanner does a good job, and you have fun with it. Please feel free to share anything you make with it—I'd love to see it.