ARCHIVE_404 — the debut project from ERROR_404.
Four chapters. Twenty recovered files. One transmission.

▶ error404.run · ↓ Download the album · Releases · Changelog

Catalogue: chapter cards with built-in players, and the dock on every page	Phone: the hyperpop tagline and the dock

Written and performed by NULLSAINT and CACHEGHOST. Hyperpop at its core, with metalcore and 2-step, presented as a recovered transmission.

• Intro, "the tracklist falls": matrix code rain whose columns stream the album's own 20 track names, while a terminal readout counts RECOVERING ARCHIVE_404 · FILE 07/20 GOSPEL_OUT … 20/20 FILES INTACT, then drains into the hero. About 4 s, once per visit, and a tap or any key skips it.
• Signal Overload hero: the logo as an outline cut-out, a self-moving flashlight whose light stays inside the letters, glitch bursts every 4–6 s (magenta/cyan tear, sheared slices, colour-split artwork), scanlines and a VHS tracking band. The tagline scrambles between SOMETHING SURVIVED THE CRASH and HYPERPOP MAXIMALISM.
• Player dock: one player on every page that plays all 20 tracks in album order, with a queue grouped by chapter, lock-screen and headphone controls, and resume-where-you-left-off. New visitors start on 07 GOSPEL_OUT.
• Chapter players: every chapter streams in the page, with waveform, seek and per-track durations, handing over to and from the dock.
• Brand kit: palette (click to copy), typography and press images with downloads.
• SIGNAL: a booking form backed by Netlify Forms.
• End credits footer, a wide-screen telemetry gutter (REC timecode and scroll position) and a branded 404.
• One design system: void black, a strict magenta → cyan duo, Bebas Neue / Space Mono / Inter, holo-foil buttons, gradient play keys, a distressed >_ menu icon, viewfinder ticks and LED status chips. Everything animates on the GPU, respects Reduce Motion, and scales fluidly on large screens.

npm install
npm run dev            # http://localhost:5173
npm run check          # lint + formatting + production build (what CI runs)
npm run build          # production build into dist/
npm run preview        # serve the build locally
npm run format         # auto-format everything with Prettier

Requires Node 22 LTS (see .nvmrc).

index.html                 page shell: meta/share tags, favicons, fonts, start-up scripts, Netlify form stub
vite.config.js             build config, plus content-hash stamping for logo-fx.js and every track
netlify.toml               build settings, caching and security headers
public/                    copied as-is to the site root
  404.html                 branded "file not found" page
  site.webmanifest         home-screen / Android manifest
  assets/                  logo (SVG), hero art, brand kit, press images, share image,
                           logo-fx.js (hero/closing flashlight, glitch bursts, nav draw-on)
  audio/                   the 20 tracks (snake_case filenames, e.g. changed_the_lock.mp3)
  fonts/                   Bebas Neue (self-hosted)
src/
  main.jsx · App.jsx       entry point and page order
  config.js                GitHub owner/repo and the album download URL
  components/              BootSequence (intro), Nav, Hero, TaglineSwap, Collective,
                           Catalogue (chapter players), PlayerDock, Signal,
                           DownloadModal, Footer, Gutters, Name
  data/                    chapters.js (tracklist, durations), brand.js (brand kit)
  lib/                     shared easing, time formatting, audioSrc (cache-busted track URLs)
  styles/
    index.css              Tailwind plus the site's base, component and utility layers
    overrides.css          design-system pass (type scale, colours, components); loaded last
.github/                   CI workflow, Dependabot, issue and PR templates
docs/                      README images

Everything lives in src/data/chapters.js:

{ number: 17, title: "ENOUGH", audioPath: "/audio/enough.mp3", duration: "4:25" }

Put the MP3 in public/audio/ under the same name. CI fails the build if a listed track file is missing.

1. Replace the file in public/audio/, keeping its snake_case name (e.g. 07 gospel_out.mp3 → gospel_out.mp3).
2. Update that track's duration in src/data/chapters.js if the length changed.
3. Nothing else: each build stamps every track with a hash of its contents (?v=…, see vite.config.js and src/lib/audioSrc.js), so listeners get the new file straight away instead of a copy from their 30-day browser cache.
4. For a new album download, publish a new GitHub Release with the zip (see Deployment). The download button always points at the latest release.

The site deploys automatically on Netlify from the main branch. netlify.toml sets the build (npm run build → dist, Node 22), long-term caching for hashed bundles, fonts and audio, and security headers.

The album download (ARCHIVE_404.zip, about 153 MB) is too large for git, so it's attached to the latest GitHub Release. The site links to /releases/latest/download/ARCHIVE_404.zip, so publishing a new release with a new zip updates the download automatically:

gh release create v1.2.0 ARCHIVE_404.zip --title "ARCHIVE_404 · v1.2.0" --notes-file release-notes.md --latest

Contact form: submissions arrive under Netlify → Site → Forms.

• Fluid scale: the site is scaled with CSS zoom on large screens, and browsers don't rescale vw/vh under zoom. Size anything full-window as calc(100vw / var(--ez, 1)).
• Search engines: robots.txt and the robots meta tag currently block all crawlers, AI crawlers included. Remove them when the site should be indexed.
• Safari toolbar: Safari 26 tints its toolbars from the fixed nav and the player dock, both #000000. It never tints in Private Browsing.
• Safari clipping: Safari doesn't clip transformed (GPU-composited) children to overflow: hidden. Keep effects inside their box: animate a registered @property, a background position or a gradient centre rather than moving an oversized layer, and add clip-path: inset(0) when a child must move inside a clip.
• Icons: draw UI icons as SVG or CSS shapes. iOS swaps characters like ⏮ ⏭ ☰ ▶ for coloured emoji (▶ is pinned to text with U+FE0E).