DEV Community: Lawn Walker

And now, for the love of all things origami-like!

Lawn Walker — Mon, 04 Aug 2025 18:17:19 +0000

For my website’s new look, I wanted something that reflected both my digital and physical creative worlds—specifically, a low-poly, paper-origami, cut-out style. It felt like the perfect extension of my crafting hobby and visual style. Naturally, I needed a rabbit. I mean, I’m Lawn Walker, after all.

I also wanted the rabbit to be interactive—something AI tools still struggle with. Fortunately, there’s Blender. I modeled and rigged a rabbit based on Grant Abbitt’s “How to Create, Rig & Animate a Low Poly Rabbit” YouTube tutorial. Once it was ready, I exported it as a .glb file so I could plug it right into my site using @react-three/drei and React Three Fiber.

Right now, the rabbit just responds to basic mouse interaction—but hey, it’s a start! I’m still learning, and this is just the beginning of what I want to build out.

Building a Satirical E‑Commerce Site in Under an Hour Using Cursor + Claude

Lawn Walker — Sun, 03 Aug 2025 17:40:56 +0000

As the artist behind Pixel Farmer, I’ve been playing with low-poly voxel characters, farming metaphors, and internet microbrand parody for a while. So I figured—why not actually make the site? A real-looking fake shop, for imaginary cube-based commerce.

The idea was simple: take my whimsical Cubie People NFT project and turn it into a full-blown ecommerce experience. Not for real sales (yet?), but as a tongue-in-cheek portfolio piece that also shows I know my way around design, animation, and code.

I fired up Cursor (the AI-powered code editor) and pasted in an old starter project I’d made in VS Code—a very basic portfolio site with some Pixel Farmer art already baked in. Then I told Claude: “Turn this into a fake ecommerce site about Cubie Farmers selling cubes.”

And boy did it.

In less than an hour, I had a working prototype: hero section, product grid, cart UI (fake), and even some filler marketing copy that sounded suspiciously earnest. I swapped in some intentionally ridiculous placeholder content, wrote up fake stories for the Cubie Workers, and leaned into the weird. Suddenly I had the bones of a satire site that looked almost too legit.

From there, I cleaned things up—replaced the boilerplate text, added real animations and voxel renders from my collection, styled it out with Tailwind, and deployed to Vercel.

The result is pixelfarmer.vercel.app: part fake store, part portfolio piece, part comedy, though now I’m looking into turning it into something more real.

Anyway, it’s a reminder that AI tools can accelerate the boring bits, leaving you more time to play, explore, and build something unexpected. It doesn’t always have to be serious. Sometimes it's enough to make a beautiful, confusing farm-based cube cult.

Why Your Music Won’t Autoplay in Chrome (And How to Fix It Without Crying)

Lawn Walker — Tue, 29 Jul 2025 15:40:22 +0000

Autoplay Is Dead – Here’s How I Got Sound Working Again
So, there I was. Feeling proud of myself for wiring up a slick landing page with moody colors, a squishy 3D bubble, and some ambient music to tie it all together. I hit save, deployed to Vercel, cracked my knuckles… and nada. No music. Not even a whisper of a wind chime.
For a hot second, I thought I’d broken the audio file, or maybe it just didn’t like my .mp3. Spoiler: it wasn’t the file. It was Chrome.
See, modern browsers (especially Chrome) have declared war on autoplaying audio and video. Why? Because apparently, nobody wants to hear Skrillex blasting from a forgotten browser tab in 2025. Okay, fair. But what about when you’re trying to build an immersive experience? What if sound is part of the story?
Nope. Doesn’t matter. Chrome will straight-up ignore your audio.play() unless the user has interacted with the page first. Scroll? Click? Tap? Wiggle a pinky finger on a trackpad? Sure. But load the page and expect the audio to just start vibing? Not happening.

So What Can You Do?
You gotta get a user gesture in there somewhere. Most devs tuck a silent interaction into a loading screen, a "Enter" button, or—if you’re really fancy—tie it to a scroll-triggered animation. Basically, the user has to do something to earn their soundscape.

I ended up using the Immersive Garden’s approach—just a subtle “Click to enable sound” instruction that follows the cursor around until the user gives in. Totally unnecessary from a layout standpoint—but vital if I wanted my ambient music to, well, ambiate.

Why It Matters
Look, I get it. Autoplay audio is often abused. Nobody asked for MySpace 2.0 with unsolicited noise. But there’s a growing corner of the web—especially among the Awwwards / CodePen / indie-portfolio crowd—where creative devs are crafting actual experiences. And sound is part of that.
When you strip it out, you’re not just muting a track—you’re cutting the vibe in half.

Bonus Gotcha
Even after the user interacts, Chrome might still block autoplay if:
• The audio is too loud (Chrome auto-rejects if it spikes on load)
• You didn’t call .play() within the same function as the interaction
• You’re trying to autoplay multiple tracks or layers without waiting
And if you’re testing locally with hot reload? Expect inconsistent behavior. Sometimes it works. Sometimes it gaslights you.

TL;DR
If your beautiful WebGL dreamscape feels weirdly silent, it’s probably not you—it’s Chrome. Add a button. Or a scroll event. Trick the browser into thinking the user’s on board, and then let the soundtrack flow.
Until browsers give us an tag with special privileges (not holding my breath), we work with what we’ve got.

Immersive Web Design – This Isn’t Wix, Baby!

Lawn Walker — Mon, 28 Jul 2025 12:21:30 +0000

Immersive Web Design – This Isn’t Wix, Baby!

So, how did I end up on this journey?

After several years out of the web design/dev game, running my own online reselling biz, I decided to jump back in. At first, I wasn’t sure there was even a point. I mean... Wix! But then I wandered over to awwwards.com to see if anything exciting was happening on the web, and that’s when I discovered Rogier de Boevé—a Belgium-based creative developer—with a site that knocked the dust off my pixel-farming brain. I had a pretty good idea what kind of code was humming under the hood.

Some years back—honestly, it’s all a blur—I started Bruno Simon’s online course on JavaScript’s Three.js library. I made it up to lesson 16 and, for some reason, stopped. Who knows why? Thankfully, there’s no expiration date on the course, so I was able to hop back in. I started from lesson one again because I needed the refresher—and Bruno had added a lot of great new material.

As for the 3D part—just for shits and giggles—I learned Blender during the COVID lockdown. Turns out, I was really going to need that. You can export models as .glb files and plug them right into a website using React.

So... what is Three.js?
Three.js is a powerful JavaScript library that lets you create 3D graphics directly in the browser using WebGL. It provides a higher-level, more intuitive way to build interactive 3D scenes—complete with animated objects, lighting, shadows, and even full environments—without needing to write raw WebGL code. In a word? Immersive.

A bit about me: I’ve actually been at this a while. I graduated from art school with a focus on print graphic design, then went on to study computer science at the University of Delaware for a couple years. A fellow student introduced me to websites, and I was hooked. My first site was built on UNIX using the Vi editor and PERL. Shudders to think.

Eventually, I found myself working at agencies and corporate firms like PricewaterhouseCoopers (both the Philly and London offices—yay!), designing and building web and interactive products. At one point, I got the big idea to drive from Philly to LA. (Pro tip: Don’t take Route 50 the whole way—you’ll lose your mind.) That move led me to meet one of my motion design heroes, Chris Do of Blind, and to land freelance gigs with companies like Fox Searchlight Pictures.

Fast forward to now:
I’ve come to realize there are websites… and there are WEBSITES. The latter are emotional, storytelling-driven, immersive experiences—and that is what I want to create. That’s where I’m throwing all my pixels now.

⚠️ Note: The current layout of my site clearly borrows from Rogier de Boevé’s brilliant design. It’s just a temporary scaffold while I build my own immersive experience from scratch. Big respect to Rogier for the inspiration—his work lit the fuse.

And so it begins...

Lawn Walker — Mon, 28 Jul 2025 03:35:14 +0000

I’ve set out to build my dream portfolio site—not just a place to showcase work, but a fully immersive experience. Something that feels like stepping into a handcrafted world—where story, motion, sound, and design unfold in quiet harmony.

To bring it to life, I’m diving deep into React Three Fiber, shaders, scroll-based interaction, and the strange magic of WebGL. This won’t be a sterile build—it will be layered, textured, and full of small, intentional moments.

I’ll be documenting everything I learn along the way—moodboards, style studies, technical triumphs, and inevitable roadblocks.

This first post is where it all begins: the moodboard.

The tone, the visual world, and the inspiration guiding the shape of what’s to come.

Follow the white rabbit...