▌// COMPONENT LIBRARY

UI PRIMITIVES

Every component ships fully typed and prop-driven. Customize colors via @theme tokens in globals.css. No component edits needed.

PRIMITIVES

SECTIONS

HOOKS

THEME VARIANTS

▶ VIEW ALL VARIANTS ← BACK TO HOME

00VARIANTS 01BUTTON 02BADGE 03TEXT 04HEADER 05STATBLOCK 06CARD 07SCORES 08CHARACTER 09TOKENS 10SYSTEM

THEME SYSTEM

SWAP 3 TOKENS. NEW THEME.

Every component inherits from --color-retro-green, --color-retro-green-dim, and --color-retro-magenta. Override all three and the entire UI transforms.

GREEN

The default. Classic arcade phosphor: green neon on black.

ACTIVEHOTUNLOCKED

CURRENTLY VIEWING

CYAN

Electric blue-cyan primary with warm orange accent. Cyberpunk ocean.

ACTIVEHOTUNLOCKED

→ VIEW CYAN VARIANT

PINK

Hot pink primary with electric violet accent. Vaporwave neon arcade.

ACTIVEUNLOCKEDBOSS STAGE

→ VIEW PINK VARIANT

01 · PRIMITIVES

BUTTON COMPONENT

VARIANTS

SIZES

ARCADE COMBOS

AS LINKS

→ CYAN VARIANT ← HOME

Pass an href prop and the Button renders as next/link automatically.

02 · PRIMITIVES

BADGE COMPONENT

COLOR VARIANTS

GREENCYANMAGENTAYELLOW

GAME CONTEXT

LEVEL 01UNLOCKEDNEWBOSS STAGECOMPLETERARE

03 · PRIMITIVES

TEXT COMPONENT

BODY

Regular paragraph copy. Descriptions, explanations, readable blocks.

VT32318–22px--retro-white/60renders

PREVIEW

Regular paragraph copy in VT323. Used for descriptions, explanations, and any block of readable text. Scales from 18px to 22px.

USAGE

<Text variant="body">
  Your paragraph content here.
</Text>

CAPTION

Supplementary text: dates, meta info, footnotes, helper hints.

VT32316–20px--retro-white/40renders

PREVIEW

Smaller supplementary text: dates, meta info, footnotes, helper hints below inputs. Scales from 16px to 20px, dimmer opacity.

USAGE

<Text variant="caption">Published March 4, 2026</Text>

LABEL

Section sub-labels and identifiers. Supports color overrides via className.

Press Start 2P8pxuppercasecolor prop

PREVIEW

default

SECTION SUB-LABELS

className="text-retro-cyan!"

CYAN OVERRIDE

className="text-retro-magenta!"

ACCENT OVERRIDE

USAGE

<Text variant="label">SECTION TITLE</Text>
// with color override
<Text variant="label" className="text-retro-cyan!">CATEGORY</Text>

CODE

File paths, token names, inline code references.

VT323retro-greenneon glowrenders

PREVIEW

src/app/globals.css

@/components/ui/Button

variant="body" as="div"

USAGE

<Text variant="code">src/app/globals.css</Text>
<Text variant="code">@/components/ui/Button</Text>

AS PROP: SEMANTIC ELEMENT

The as prop controls the rendered HTML element while keeping the same visual style. Use as="span" to place text inline within a paragraph.

Block paragraph text.

<Text variant="body">...</Text>

→

Block div: wrap other elements.

<Text as="div">...</Text>

→<div>

Use the as prop inline.

<Text as="span">...</Text>

→

04 · PRIMITIVES

SECTIONHEADER COMPONENT

LEFT ALIGNED (DEFAULT)

01 · EXAMPLE

YOUR SECTION TITLE

CENTER ALIGNED

02 · EXAMPLE

CENTERED HEADING

05 · PRIMITIVES

STATBLOCK COMPONENT

LEVELS

DEVS

2YRS

IN DEV

∞

HEART

06 · PRIMITIVES

CARD COMPONENT

⬡LEVEL 1

DYNAMIC WORLDS

Procedurally generated environments that shift and breathe with the player's emotional state.

★★★★★

◈LEVEL 2

LIGHT MECHANICS

Darkness consumes. Every beam of light is earned. Physics-based illumination reacts to your every move.

★★★★★

⬟LEVEL 3

EMOTIONAL SCORE

An adaptive soundtrack that mirrors the player's journey from void to radiance. 40+ hours of music.

★★★★★

07 · PRIMITIVES

SCOREBOARD COMPONENT

HIGH SCORES

RANK	PLAYER	STAGE	SCORE	DATE
01	A>D>WNEW	STAGE 12	9,824,750	26.03.04
02	L>I>T	STAGE 11	7,314,200	26.02.14
03	G>H>O	STAGE 10	5,980,100	25.12.31
04	V>O>I	STAGE 09	4,200,000	25.11.08
05	D>A>R	STAGE 08	2,999,999	25.10.22

#01

A>D>WNEW

9,824,750

STAGESTAGE 12

DATE26.03.04

#02

L>I>T

7,314,200

STAGESTAGE 11

DATE26.02.14

#03

G>H>O

5,980,100

STAGESTAGE 10

DATE25.12.31

#04

V>O>I

4,200,000

STAGESTAGE 09

DATE25.11.08

#05

D>A>R

2,999,999

STAGESTAGE 08

DATE25.10.22

08 · PRIMITIVES

PIXELCHARACTER COMPONENT

HERO

GHOST

COIN

SIZE 48

SIZE 32

09 · THEME SYSTEM

COLOR TOKENS

retro-green

#00ff41

retro-magenta

#ff00a8

retro-cyan

#00e5ff

retro-yellow

#ffe600

retro-white

#e8eaf0

retro-black

#070810

retro-deep

#0d0f1a

retro-green-dim

#00aa2a

HOW TO SWAP THE THEME

All tokens live in src/app/globals.css under @theme. Change any value and every component updates. No component edits needed.

→ SEE CYAN VARIANT

10 · SYSTEM

SYSTEM PAGES

404 PAGE

404

Game Over: Page Not Found screen shown when a route doesn't exist.

→ PREVIEW

ERROR PAGE

ERR

Critical System Failure screen shown when an unexpected error occurs.

→ PREVIEW

The 404 page is live at any unknown route. Try /this-does-not-exist. The error page triggers on runtime exceptions.