We Turned Our Loading Screen Into a Drag-and-Drop Puzzle Game

TL;DR: Our AI needs about 5 minutes to research a business, plan a strategy, generate content, create images, and assemble a full website. That’s a long wait. Instead of showing a spinner, we built a drag-and-drop puzzle game where users arrange website sections (Navigation, Hero, About, Services, Footer) into a wireframe grid. It loops with increasingly snarky commentary. Users actually enjoy the build process now.

The Problem: Five Minutes Is an Eternity

When you tell someone “your website will be ready in 5 minutes,” they think that’s fast. And it is—compared to hiring a designer. But when they’re staring at a screen, 5 minutes feels like an hour.

We tried the obvious solutions first:

• Progress bar: Gets to 60% fast, then crawls. Users think it’s broken.
• Step labels: “Researching your business… Designing your logo… Writing content…” Better, but still passive.
• Estimated time remaining: Lies. AI generation times are unpredictable.

None of these solved the core problem: the user has nothing to do. They’re waiting, and waiting is boring.

The Insight: Make Waiting Feel Like Doing

We asked ourselves: what if the loading screen wasn’t a loading screen? What if it was an activity that’s thematically connected to what the AI is doing?

The AI is building a website. The user could be… building a website too. Just a simpler, more fun version.

The Game

Here’s what we built: an interactive puzzle where you drag website sections into their correct positions on a wireframe grid.

Three Layout Templates

Each round randomly selects one of three layouts:

1. Standard: Navigation → Hero → About → Services → Contact → Footer
2. Sidebar: Header → Sidebar → Banner → Content → CTA → Footer
3. Portfolio: Navigation → Hero → Gallery → Testimonials → Pricing → Footer

Each layout is a 4×8 grid with pieces spanning different areas—the Hero might be 4 columns wide and 2 rows tall, while the Sidebar is 1 column and 4 rows deep.

Two Input Methods

Mobile: Tap piece → Tap target slot
Desktop: Click and drag piece → Drop on slot

We built a custom drag system from scratch—no libraries. It handles:

• Mouse drag with ghost preview (rotated, scaled)
• Touch drag with scroll prevention
• Hit-testing via getBoundingClientRect() on slot refs
• A 5-second safety timeout for stuck drags
• touchcancel handling (incoming calls, gesture interrupts)

Visual Feedback

Every interaction has immediate feedback:

• Correct placement: Piece snaps with an elastic card-pop animation
• Wrong slot: Red border flash + shake animation
• Idle too long: Unplaced pieces start wiggling (nudge animation)
• Empty slots: Subtle pulse to guide placement (slot-hint animation)
• Drag in progress: Original piece fades to 30% opacity, ghost follows cursor

The Piece Illustrations

Each puzzle piece isn’t just a colored rectangle. It contains a tiny wireframe mockup of what that section actually looks like:

• Navigation: Logo placeholder + horizontal menu lines
• Hero: Large title block + subtitle + CTA button
• Services: Three-column card grid
• Gallery: 2×2 image grid
• Footer: Centered decorative dots

This subtly teaches users what website sections look like and how they fit together.

The Quip System

After completing a puzzle, the game shows a contextual message before resetting with a new layout. The messages escalate across rounds:

Round 1 (gentle):

“Our AI is still choosing a font.” “Nice click. Our AI felt that.”

Round 2 (impressed):

“You built that faster than our AI. Don’t tell it.” “Two down. Our AI is rethinking its life.”

Round 3+ (savage):

“Maybe we should let YOU build the website.” “You’re faster than us. Please don’t start a rival company.” “Our AI rage-quit. Happy now?”

We use a no-repeat shuffler so you never see the same quip twice in a row. The tone matches our brand: confident, a little competitive, never corporate.

Technical Details

Hydration-Safe Randomization

The game runs client-side ('use client'), but random layout selection can cause hydration mismatches in Next.js. We defer all randomization to useEffect:

const initialized = useRef(false);

useEffect(() => {
  if (!initialized.current) {
    initialized.current = true;
    const layout = LAYOUTS[Math.floor(Math.random() * LAYOUTS.length)];
    setPieces(shuffleArray(layout.pieces));
    setSlots(layout.slots);
  }
}, []);

Progress Integration

The game optionally displays real build progress underneath:

interface Props {
  stepLabel?: string;  // "Researching your business..."
  percent?: number;    // 0-97 (never shows 100%)
}

We cap at 97% because showing 100% before the redirect feels broken. The label updates with each pipeline step, so users see the AI’s actual progress while playing.

Responsive Layout

The wireframe grid scales between mobile (160px base width, 20px row height) and desktop (220px base width, 28px row height). On mobile, the piece tray moves below the grid instead of beside it, preventing the need for horizontal scrolling.

Results

We don’t have A/B test data (everyone gets the game now), but qualitative feedback has been clear:

• Support tickets about “stuck” builds dropped. Users who are engaged don’t think the process is broken.
• Users mention the game in feedback. “The little puzzle thing while it builds is fun” appears in multiple responses.
• Average time on build page increased. Users stay on the page instead of navigating away and missing the redirect.
• Zero negative feedback. No one has complained about the game being distracting or unwanted.

What We’d Do Differently

1. Track completion rates. We should measure how many puzzles users complete per build session. This tells us engagement depth.
2. Add difficulty scaling. The current puzzles are intentionally easy (6 pieces, obvious slots). For power users who build multiple sites, harder variants would extend replay value.
3. Connect to the real output. Imagine if the puzzle pieces transformed into actual sections of YOUR website as the AI finishes each one. We haven’t built this yet, but it’s on the roadmap.

The Meta-Lesson

Loading screens are a UX tax. Every product has them—API calls, build processes, deployments. The default response is “make it faster.” But sometimes the better response is “make the wait worthwhile.”

A 5-minute build with a puzzle game feels shorter than a 2-minute build with a spinner. Perception matters more than milliseconds.

Try It

Type your business name on WebZum, hit “Build My Website,” and play the puzzle while our AI does the rest. See if you can beat three rounds before your site is ready.