lostpage

lostpage

Immersive 404 pages for every framework. Live WebGL oceans, black holes, chrome and glass 3D type, playable arcade games, retro terminals, paper craft and more, each one a drop-in component.

• 116 scenes, 650+ designs. From plain, fast everyday pages (minimal, search, helpful links, card…) to immersive 3D. Every scene ships with presets: palettes, moods and copy.
• Any framework: React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, Astro, Solid, plain HTML / CDN.
• Zero dependencies. Each scene is 3–20 kB and code-split, so only the one you use is downloaded.
• Accessible: real headings and links, prefers-reduced-motion support, and a text-only fallback when WebGL isn't available.
• Fully customisable: copy, buttons, colours, fonts and scene parameters, or bring your own content on top.

Install

npm i lostpage
# or
pnpm add lostpage
yarn add lostpage
bun add lostpage

Quick start

Next.js (App Router)

// app/not-found.tsx
import { LostPage } from "lostpage/react";

export default function NotFound() {
  return <LostPage scene="lost-at-sea" />;
}

Pages Router: put the same component in pages/404.tsx.

React (Vite, Remix, Gatsby…)

import { LostPage } from "lostpage/react";

<Route path="*" element={<LostPage scene="black-hole" preset="quasar" />} />

Vue 3 / Nuxt

<script setup lang="ts">
import { LostPage } from "lostpage/vue";
</script>

<template>
  <LostPage scene="chrome-404" preset="gold" />
</template>

In Nuxt, use it inside error.vue (wrapped in <ClientOnly>) and pass :code="String(error.statusCode)".

Svelte / SvelteKit

<script>
  import { lostpage } from "lostpage/svelte";
</script>

<div use:lostpage={{ scene: "terminal", preset: "green" }}></div>

Angular, Astro, Solid, Lit, Qwik (Web Component)

import "lostpage/element";

<lost-page scene="rainy-window" preset="amber" heading="The café's shut."></lost-page>

In Angular, add CUSTOM_ELEMENTS_SCHEMA to the component.

Plain HTML / CDN

<lost-page scene="lost-at-sea"></lost-page>
<script type="module" src="https://cdn.jsdelivr.net/npm/lostpage/dist/cdn/element.js"></script>

Or the single-file classic script, which bundles every scene:

<div id="nf"></div>
<script src="https://cdn.jsdelivr.net/npm/lostpage/dist/lostpage.global.js"></script>
<script>LostPage.mount("#nf", "pond", { preset: "night" });</script>

Vanilla JavaScript

import { mount } from "lostpage";

const handle = mount(document.body, "nixie", { preset: "argon" });
// handle.update({ title: "…" }); handle.pause(); handle.resume(); handle.destroy();

CLI

npx lostpage list                   # every scene and preset
npx lostpage list ocean             # filter by id, category or tag
npx lostpage add black-hole:quasar  # writes the right file for your framework
npx lostpage add terminal --framework sveltekit
npx lostpage random

The framework is detected from your package.json: Next (app or pages router), Nuxt, SvelteKit, Svelte, Astro, Angular, Remix, Solid, Vue or React. Without one, the CLI writes a standalone 404.html.

Customise

All options work the same in every framework (props in React and Vue, the object in Svelte and mount, attributes on the web component).

<LostPage
  scene="lost-at-sea"
  preset="storm"                       // pick a preset
  code="410"                           // the status code shown
  eyebrow="Small craft warning"
  title="Rough waters."
  message="This page didn't survive the storm."
  actions={[
    { label: "Head for harbour", href: "/" },
    { label: "Contact us", href: "/contact", variant: "secondary" },
  ]}
  theme={{ accent: "#ff4d2e", "font-display": "Fraunces, serif" }}  // CSS variables
  params={{ waveHeight: 1.4, rain: 1 }} // scene-specific knobs
  height="100dvh"                      // or "100%" inside a sized parent
  onNavigate={(href) => router.push(href)}
/>

Theme variables

--lp-bg --lp-fg --lp-muted --lp-accent --lp-accent-fg --lp-font --lp-font-display --lp-font-mono --lp-font-serif --lp-code-color --lp-code-size --lp-title-size --lp-radius --lp-pad

Set them from the theme option or from your own CSS:

.lp-root { --lp-font: "Satoshi", sans-serif; --lp-accent: #ff4d2e; --lp-radius: 8px; }

Scenes never load web fonts themselves. If your site already loads Inter, Fraunces or JetBrains Mono, they're used automatically.

Your own content

<LostPage scene="aurora">
  <MyBrandedErrorCard />
</LostPage>

Vue uses the default slot. With the web component, child elements become the content.

Writing your own scene

import { defineScene, mount } from "lostpage/core";

const mine = defineScene({
  id: "my-404", name: "Mine", description: "…", category: "Abstract",
  kind: "2d", motion: "live", tags: [], layout: "center",
  copy: { title: "Not here." }, params: { color: "#ff4d2e" },
  setup(ctx) {
    const canvas = ctx.canvas(); // kept sized to the component
    const g = canvas.getContext("2d")!;
    return { frame(t) { /* draw */ }, destroy() {} };
  },
});

mount(document.body, mine);

Scenes

116 scenes, 666 designs. Use the id with scene="…" and any preset with preset="…".

Abstract

Games

Nature

Ocean

Paper & Print

Physics

Playful

Retro Tech

Signs & Displays

Simple

Space

Spooky

Typography

Urban

License

Free for personal projects, commercial projects and client work. No attribution required. You may not resell or repackage the designs themselves (as a template pack, UI kit or competing library). Full terms: LICENSE · plain-English version: https://lostpage.sattu.world/license/