gitwtfhub

wtf is basketball-404?

aanandmadhav/basketball-404 — explained in plain English

Analysis updated 2026-05-18

0TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TL;DR

A playful 404 error page where visitors throw a physics-based basketball through a hoop to navigate to a real page.

Mindmap

mindmap
  root((basketball-404))
    What it does
      Physics basketball 404
      Throw ball to navigate
      No physics library
    Tech stack
      TypeScript
      React
      Vite
    Accessibility
      Keyboard fallback
      Reduced motion support
      Responsive layout
    Use cases
      Custom 404 page
      Next.js adaptation
      AI assisted integration
    Customization
      Edit destinations file
      Change colors
      Swap assets

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Replace a boring 404 error page with an interactive basketball game that still links to real pages.

REASON 2

Adapt the demo into a Next.js not-found route that only loads on the error page.

REASON 3

Hand the included prompt file to an AI coding assistant to integrate the effect into your own site.

REASON 4

Offer keyboard and reduced-motion visitors a simple clickable fallback instead of the physics animation.

What's in the stack?

TypeScriptReactVite

How it stacks up

aanandmadhav/basketball-4040xkinno/astraea0xkinno/halcyon
Stars000
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardhard
Complexity2/54/54/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

Wtf does this do

Basketball 404 turns a website's error page into a tiny basketball game instead of a plain apology message. When a visitor lands on a page that does not exist, small balls fall onto the screen using hand built physics, and each ball is labeled with a link to a real page on the site. The visitor can drag or flick a ball through a hoop, and only after that deliberate throw does the site actually navigate to the linked page. The project explicitly builds its own two dimensional physics for gravity, collisions, bouncing, and detecting when a ball crosses the rim, without relying on any external physics library. Accessibility was a stated goal alongside the playful interaction. Visitors using a keyboard, or those who have reduced motion settings turned on, are given simple clickable balls instead of the physics animation, so the page still works for people who cannot or do not want the physics-based interaction. The layout is also responsive, adjusting for both desktop and mobile screens, and there is a small safeguard so that balls falling in during the initial animation cannot accidentally trigger navigation. The repository itself is a standalone demo built with React and Vite, and running it locally only takes an npm install and a dev command. Customizing it means editing a small destinations file for the ball labels and links, adjusting the heading text, changing colors, and optionally swapping the image assets. The README notes that in the creator's own production website, the same idea is implemented as a Next.js component that only loads on the 404 route, so it does not slow down the rest of the site, and it explains how to adapt the demo for a Next.js project. It also includes a written prompt file meant to be handed to an AI coding assistant to help integrate the experience into a different framework. The project is released under the MIT license, and a credit or link back is appreciated but not required.

Yoink these prompts

Prompt 1
Help me run basketball-404 locally with npm install and npm run dev.
Prompt 2
Show me how to edit src/destinations.ts to point the basketball links at my own site's pages.
Prompt 3
Walk me through converting this React and Vite demo into a Next.js not-found.tsx component.
Prompt 4
Use the PROMPT.md brief in this repo to help me integrate the basketball 404 effect into my own framework.

Frequently asked questions

wtf is basketball-404?

A playful 404 error page where visitors throw a physics-based basketball through a hoop to navigate to a real page.

What language is basketball-404 written in?

Mainly TypeScript. The stack also includes TypeScript, React, Vite.

What license does basketball-404 use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is basketball-404 to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is basketball-404 for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.