Component Catalog

Primary CTA element. Variants: primary (cream fill) and secondary (ghost). Renders as <a> when href is provided.

import Button from "@/components/brand/Button";

Glitch-reveal text animation. Triggers on viewport intersection. Configurable duration, speed, and character set.

import ScrambledText from "@/components/brand/ScrambledText";

Continuously scrolling text band. Used for announcements and emphasis strips.

import Marquee from "@/components/brand/Marquee";

Three descending accent bars. Supports accent, paper, alert, and noir colors. Animates with pulse, grow, or fade.

import DecorativeLines from "@/components/brand/DecorativeLines";

Displays a status string as an uppercase badge. Color is determined by getStatusColor utility.

import StatusBadge from "@/components/brand/StatusBadge";

The full BRUTnoir palette. noir, noirLight, noirMid, noirSurface, noirBorder, cream, acid, crimson, amber, ice.

import Color Tokens from "@/components/tokens";

BRUTnoir box-shadow tokens. Hard-offset, no blur. shadows.shadow, shadowSm, shadowDark, shadowInset, modal.

import Shadow System from "@/components/tokens";

Three font families: DM Serif Display (headings), DM Mono (code/interface), DM Sans (body). Scales: xs–xxxl.

import Typography from "@/components/tokens";

Six-step spacing scale: xs(4) → xxl(32). Used for padding, gap, and margin throughout the system.

import Spacing Scale from "@/components/tokens";

shadcn/ui Button primitive. Variant and size props. Used as a base for accessible button behavior.

import ui/button from "@/components/ui/button";

shadcn/ui Input primitive. Controlled text input with full className override support.

import ui/input from "@/components/ui/input";

shadcn/ui Textarea primitive. Multi-line text input. Resizable.

import ui/textarea from "@/components/ui/textarea";

shadcn/ui Label primitive. Pairs with form inputs for accessibility.

import ui/label from "@/components/ui/label";

shadcn/ui Card primitive. Composable container with header, content, and footer slots.

import ui/card from "@/components/ui/card";

Custom cursor overlay. Replaces the default browser cursor with a brutalist crosshair.

import BrutalistCursor from "@/components/brand/BrutalistCursor";

Layered background: brutalist-noir grid pattern + mouse spotlight + film grain overlay. Placed as a global page backdrop.

import AtmosphericBackground from "@/components/brand/AtmosphericBackground";

Nameless Famous wordmark SVG. Renders the NF brand logo at any scale.

import NamelessLogo from "@/components/brand/NamelessLogo";

Full-screen page transition overlay. Animates between routes with a noir wipe effect.

import PageTransition from "@/components/brand/PageTransition";

Displays the NF production balance / credit UI. Used in client-facing dashboards.

import NfBalance from "@/components/brand/NfBalance";