Building a Modern Indie Game Stack: Next.js, Framer Motion, and Serverless Edge Computing

In the past, building a rich web game required heavy engines like Unity or Flash, resulting in slow load times and poor SEO performance. Today, modern web frameworks like Next.js, combined with serverless hosting and hardware-accelerated styling tools, make it possible to build fully interactive games directly in the browser that load in milliseconds. In this article, we share the engineering stack and performance guidelines behind PSB Ideas applications.

The Framework: Next.js 15+ and the App Router

We chose Next.js as the core of our application hub because it solves the cold-start and routing problems out of the box. Landing pages, blogs, and documentation are rendered statically at build time (Static Site Generation), providing immediate load times and perfect SEO compatibility. The interactive game components (like numQ) run as Client Components (`'use client'`), executing entirely on the user's browser while utilizing the server-rendered framework for security, layout, and global footers.

Animations: Achieving 60FPS with Framer Motion

For web games, animation performance is critical. If the frame rate drops during a fast speed-math run, the user experience is ruined. We use Framer Motion, a declarative motion library for React, to handle transitions, card flips, fever flashes, and gacha animations. To prevent main-thread blocking, we follow these strict optimization rules:

• GPU Acceleration: Only animate layout properties that trigger GPU composites (e.g., transform, scale, rotate, and opacity). Avoid animating width, height, or margins, which force the browser to recalculate layouts.
• Layout Projection: Use Framer Motion's `layoutId` for smooth shared-element transitions between states (like moving a Prism card from the inventory grid to the active slot).
• Reduced Motion: Respect user preferences by automatically disabling animations if the browser's `prefers-reduced-motion` media query is active.

// Custom hook to detect prefers-reduced-motion in React
import { useEffect, useState } from 'react';

export function useReducedMotion() {
  const [shouldReduce, setShouldReduce] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    setShouldReduce(mediaQuery.matches);

    const listener = (event: MediaQueryListEvent) => {
      setShouldReduce(event.matches);
    };
    
    mediaQuery.addEventListener('change', listener);
    return () => mediaQuery.removeEventListener('change', listener);
  }, []);

  return shouldReduce;
}

Serverless and Edge Databases

For game state storage and leaderboards, traditional relational databases (like PostgreSQL) are overkill and can introduce latency due to geographic distance. We deploy our backend APIs using serverless edge functions. By combining Next.js API routes with edge data caching, we ensure database requests are resolved within the node closest to the player, keeping leaderboards synchronized and cheat-free without spinning up heavy database servers.

The combination of Next.js static generation, GPU-accelerated CSS/animations, and edge hosting enables us to build lightweight, lightning-fast interactive web apps. Our users get premium, app-store quality experiences directly through a simple web link, with no downloads or installation required.