Making the Web Fun Again: Building a Digital Zen Garden

Remember when websites were fun? When you’d stumble upon a page that made you smile, not because it was trying to sell you something, but because someone just wanted to share something delightful? I’ve been thinking about this a lot lately. The web has gotten pretty same-y.

The joy of building something different

In an effort to recapture some of that early web magic, I decided to build a digital Zen garden - an interactive canvas where you can rake sand, place rocks, add plants, and create your own peaceful space. It’s not trying to optimize for conversions or maximize engagement metrics. It’s just meant to be a calm, enjoyable experience.

The inspiration came from both traditional Japanese Zen gardens (karesansui) and the playful web experiments of the early 2000s. I wanted to create something that combined mindfulness with the kind of creative interactivity that made me fall in love with web development in the first place.

Modern web inspiration

One of my biggest inspirations for this project has been Neal.fun. Neal Agarwal creates interactive experiences that are both educational and entertaining, from “Draw the Perfect Circle” to “Earth Reviews”. His work shows that there’s still room for creativity and whimsy on the modern web.

Technical implementation

The experience is meant to be simple and calming, but the implementation has a few interesting pieces. It uses HTML5 Canvas for real-time drawing, a custom rake cursor that changes based on the selected tool, and a particle system for the sand texture with thousands of tiny particles. Water ripples are animated, object previews are dynamic, and the garden elements and rake strokes are tracked and persisted in state.

Here’s a glimpse at how the water ripple animation works:

// Water animation
useEffect(() => {
  const animateWater = () => {
    setWaterRippleOffset(prev => (prev + 0.1) % (Math.PI * 2));
    waterAnimFrameRef.current = requestAnimationFrame(animateWater);
  };

  waterAnimFrameRef.current = requestAnimationFrame(animateWater);

  return () => {
    if (waterAnimFrameRef.current) {
      cancelAnimationFrame(waterAnimFrameRef.current);
    }
  };
}, []);

The garden has five tools: a rake for drawing patterns in the sand (adjustable size and pattern type), rocks with realistic textures and shadows, stylized plants with dynamic gradients, rippling water features with animated reflections, and shrine elements to anchor the design.

Making the web personal again

This was a chance to build something with no business case whatsoever. No metrics, no conversion goals, just: what if this existed? Deployment practices and design systems matter - but they’re not why I got into this.

The zen garden is built with modern tools (Astro for the site, React for the interactive components) but embraces the spirit of the early web, when people built things just because they were fun to build and share. Same instinct as Cabeça de Queijo.

That same instinct is what later produced the LLM Sorting Hat: a quiz that tells you which frontier AI model you most resemble, complete with AI-generated house crests, a distressed sorting hat video, and a downloadable result card. Totally unnecessary. Completely worth building.

The technical challenges of playfulness

Creating something “fun” turns out to involve real engineering tradeoffs. The garden needs to hold 60fps while handling thousands of particles for the sand texture. Touch support on mobile required a separate pass. State management for gardens that users can build and modify without tanking performance took some work. And getting realistic textures and animations without overwhelming the browser meant keeping a close eye on what was actually necessary.

What’s next

A few things I’d still like to add:

• Save/load to preserve creations
• Seasonal element variations
• Sound effects
• Time-lapse recording

No timeline on any of it - this one gets worked on when I feel like it.

Try it yourself

You can visit the digital Zen garden and create your own peaceful space. There’s no right or wrong way to use it. Just like a real Zen garden, it’s about the process of creation, not the result.

Or if you want something with a bit more chaos, try the LLM Sorting Hat and find out which AI model you really are.

For more inspiration on creative web experiences, I highly recommend checking out:

• Neal.fun - A masterclass in web creativity
• Neal’s Blog - Insights into his creative process
• The Useless Web - A collection of wonderfully pointless websites

If you built something with the garden or have ideas, drop me a note.