{"id":3615,"date":"2022-12-10T12:22:19","date_gmt":"2022-12-10T16:22:19","guid":{"rendered":"https:\/\/patorjk.com\/blog\/?p=3615"},"modified":"2022-12-10T12:22:19","modified_gmt":"2022-12-10T16:22:19","slug":"just-in-time-for-christmas-its-react-halloween","status":"publish","type":"post","link":"https:\/\/patorjk.com\/blog\/2022\/12\/10\/just-in-time-for-christmas-its-react-halloween\/","title":{"rendered":"Just in time for Christmas, it&#8217;s react-halloween!"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Today I want to talk about a silly new JavaScript library I&#8217;ve released. It&#8217;s called <a href=\"https:\/\/github.com\/patorjk\/react-halloween\">react-halloween<\/a> and it&#8217;s sort of like a Spirit Halloween for your web app. That sounds a little ridiculous, and it kind of is&#8230; and also, since I just started this, it&#8217;s kind of like a Spirit Halloween that&#8217;s been cleaned out after the Halloween rush, so there&#8217;s not really a lot there.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>What?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ok, so back in October I decided to hunt around for &#8220;Halloween Houses&#8221; &#8211; 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&#8217;d amassed a handful of images I liked, I set up a gallery &#8211; but the &#8220;stuffiness&#8221; of a normal photography gallery did seem to fit the feel of the images to me.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;t feel right having them as part of the photo-gallery app, so I pulled them into their own package.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This package is what I&#8217;m now calling react-halloween. It&#8217;s basically just a set of halloween-themed decoration components for React apps.\u00a0Right now the collection is as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Eyes\/Eye &#8211; This component is either a solo eye or a set of eyes that watch your cursor as its moves around the screen.<\/li>\n\n\n\n<li>Haunted &#8211; 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 <a href=\"https:\/\/www.patrickgillespie.com\/\">patrickgillespie.com<\/a>.<\/li>\n\n\n\n<li>MagicalText &#8211; Color faded text with (optional) sparkles (or sparkles with optional faded text). This was inspired by a <a href=\"https:\/\/www.youtube.com\/watch?v=yu0Cm4BqQv0\">Hyperplexed video<\/a> (which was in turn inspired by Linear). This component is a little bit more than what&#8217;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&#8217;s a fun effect.<\/li>\n\n\n\n<li>LightsOut &#8211; 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 <a href=\"https:\/\/www.patrickgillespie.com\/gallery\/halloween-houses\">Halloween Houses Gallery<\/a>. 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 &#8220;intro&#8221; pages were a thing. I dropped the script pretty quickly because repeat visitors quickly got annoyed. However, I don&#8217;t imagine many repeat visitors for a gallery like this. It&#8217;s the sort of novelty that could possibly work well. But then again, I&#8217;m still a little on the fence on this one. Sadly the Internet Archive didn&#8217;t take a snapshot of patorjk.com when I was doing this effect. It was a lot more low-fi back then &#8211; a solid circle as the flashlight with solid black as a background.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">I have a handful of ideas for future components, but I make no promises on where I&#8217;m going with this library. Really it&#8217;s just something I made to support patrickgillespie.com, and I figured I&#8217;d share it with anyone else who was interested. Hopefully someone out there will find it slightly useful and\/or amusing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Will you be doing the same for Christmas houses?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I told myself no, but I&#8217;m already getting tips from friends and family about certain Christmas houses, so maybe. There definitely won&#8217;t be a &#8220;react-christmas&#8221; library though. If I were to make any Christmas themed components I&#8217;d probably just generalize them and stick them in react-halloween. Plus I&#8217;m way more of a Halloween fan. Don&#8217;t get me wrong, I love Christmas, but I just like the atmosphere of Halloween more.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today I want to talk about a silly new JavaScript library I&#8217;ve released. It&#8217;s called react-halloween and it&#8217;s sort of like a Spirit Halloween for your web app. That sounds a little ridiculous, and it kind of is&#8230; and also, since I just started this, it&#8217;s kind of like a Spirit Halloween that&#8217;s been cleaned &hellip; <a href=\"https:\/\/patorjk.com\/blog\/2022\/12\/10\/just-in-time-for-christmas-its-react-halloween\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Just in time for Christmas, it&#8217;s react-halloween!<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,32],"tags":[],"class_list":["post-3615","post","type-post","status-publish","format-standard","hentry","category-javascript","category-web-development"],"_links":{"self":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/3615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/comments?post=3615"}],"version-history":[{"count":4,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/3615\/revisions"}],"predecessor-version":[{"id":3619,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/3615\/revisions\/3619"}],"wp:attachment":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/media?parent=3615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/categories?post=3615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/tags?post=3615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}