Today I want to talk about a silly new JavaScript library I’ve released. It’s called react-halloween and it’s sort of like a Spirit Halloween for your web app. That sounds a little ridiculous, and it kind of is… and also, since I just started this, it’s kind of like a Spirit Halloween that’s been cleaned out after the Halloween rush, so there’s not really a lot there.

What?

Ok, so back in October I decided to hunt around for “Halloween Houses” – basically houses that were completely decked out for Halloween. I thought it might be cool to create a gallery of them for my photography website. After I’d amassed a handful of images I liked, I set up a gallery – but the “stuffiness” of a normal photography gallery did seem to fit the feel of the images to me. 

I mulled over what I could do, and decided to add some fun touches such as ghosts flying out of the gallery link when you moused over it and a pair of eyes that would watch your mouse cursor. I ended up liking these additions, but it didn’t feel right having them as part of the photo-gallery app, so I pulled them into their own package.

This package is what I’m now calling react-halloween. It’s basically just a set of halloween-themed decoration components for React apps. Right now the collection is as follows:

• Eyes/Eye – This component is either a solo eye or a set of eyes that watch your cursor as its moves around the screen.
• Haunted – A container that will glow when moused over. Additionally, ghosts can fly out when you mouse over. You can see this in-action at the bottom of patrickgillespie.com.
• MagicalText – Color faded text with (optional) sparkles (or sparkles with optional faded text). This was inspired by a Hyperplexed video (which was in turn inspired by Linear). This component is a little bit more than what’s described in that video, as the sparkles will fade along with the text (surprising non-trivial but you can jump into the code if you really care about that detail) and other adornments are possible. I think it can be easy to over-do this on a website, and I may have overdone it on my photography site, but it’s a fun effect.
• LightsOut – On non-mobile devices this will black-out the screen and turn the cursor into a flashlight. You can see it in-action on my Halloween Houses Gallery. When you click your mouse the lights will come on. I used a variation of this effect over 20 years ago on this very site (back in 1999). It was back when “intro” pages were a thing. I dropped the script pretty quickly because repeat visitors quickly got annoyed. However, I don’t imagine many repeat visitors for a gallery like this. It’s the sort of novelty that could possibly work well. But then again, I’m still a little on the fence on this one. Sadly the Internet Archive didn’t take a snapshot of patorjk.com when I was doing this effect. It was a lot more low-fi back then – a solid circle as the flashlight with solid black as a background.

I have a handful of ideas for future components, but I make no promises on where I’m going with this library. Really it’s just something I made to support patrickgillespie.com, and I figured I’d share it with anyone else who was interested. Hopefully someone out there will find it slightly useful and/or amusing.

Will you be doing the same for Christmas houses?

I told myself no, but I’m already getting tips from friends and family about certain Christmas houses, so maybe. There definitely won’t be a “react-christmas” library though. If I were to make any Christmas themed components I’d probably just generalize them and stick them in react-halloween. Plus I’m way more of a Halloween fan. Don’t get me wrong, I love Christmas, but I just like the atmosphere of Halloween more.