Building a Gnome-Run Conversion Factory for a CodeTV Hackathon

The CodeTV hack challenge:

Build a landing page that makes us all stop and pay attention.

Take a look at how awesome some of the other submissions are in this:

For my submission, I started with the idea that little “conversion gnomes” were building a landing page to get you to do something. At first it felt like a lesson about how websites can intentionally manipulate us. Then I realized the story works better if it stays playful and satirical instead of taking itself too seriously.

Basic landing page sections as you scroll showing what they aim to do and why they’re there.

As you scroll down the page, you’ll notice little gnomes here and there, and the directness of each section. You can convert right there at the end and share it on social media right away. Or you can break the glass in the footer.

At the bottom, the page puts a hammer behind glass and tells you not to touch it. Naturally, you have to smash it open.

Attention becomes coins. Desire gets refined. Social proof is manufactured. And as you break through the facade of the landing page you reveal the underworkings of the conversion gnomes!

The site’s code is pretty much entirely generated by Sol 5.6. I prefrenced SVG and CSS for simplicity and flexibility. I got to learn more about GSAP which I haven’t worked with in ages. I took advantage of their AI skills and had little issues tweaking things from there. The sound effects from Charles linked in the credits were all made with his voice and he got them to me when I solicited help in the CodeTV discord.

In addition to the hammer, you can pick up a blowtorch and laser! The laser follows the held pointer, tests the path against each gnome, and cuts the SVG where the pointer actually crossed it.

You can also leave every gnome alone and take the pacifist ending because violence is not the answer. Still the gnomes will gladly lay their lives on the line for your social shares.

The credits have their own small interaction too. You have to open six collaborator links before the modal lets you leave. The close button dodges you, then shatters on the last click.

Tech Stack Overview

• Astro for the static page, reusable stages, and very little framework runtime
• GSAP with ScrollTrigger, ScrollTo, and Physics2D for the rewind, glass shards, bouncing debris, and factory motion
• Nano Stores for the small state machine tracking five floors, three tools, twenty gnomes, and several endings
• SVG and CSS for the factory, gnomes, tools, and custom cursors
• Web Audio plus recorded sound effects from the great Charles Villard for the hammer, blowtorch, laser, broken glass, and gnome deaths
• Webflow Cloud for deploying the Astro project from GitHub

Try the Gnome-conversion landing page

Welcome your thoughts and social shares. The gnomes will be grateful for your attention.

I’m so grateful for all my friends that submitted their headshots and and helped me with content for the site. It makes it so much more personal to me and special to have my brothers, my mom, and friends be a part of this hackathon project. Love you guys for willing to be silly with me.

And a big thanks to the CodeTV team and sponsors for hosting the hackathon and providing a fun challenge.