Header Pattern Library
A collection of header variations for the Sysops Day Dream zine system.
VARIANT: HALFTONE
The Disco Ball Metaphor
Decorative halftone blocks with varying densities create visual rhythm. Inspired by loading bars and progress indicators.
VARIANT: ASCII
╔═══╗ ║ █ ║ ╚═══╝
Terminal Archaeology
Box-drawing characters and ASCII art for retro terminal aesthetic.
VARIANT: BLOCKS
Composting Chaos
Vertical bar pattern creates a stark, brutalist rhythm.
VARIANT: TERMINAL
$>
System Protocols
Command prompt prefix with dashed divider for terminal-style headers.
VARIANT: MINIMAL
📚
Repository References
Clean icon + title + underline for straightforward headers.
VARIANT: METADATA
🔥
Field Notes: Burnout Velocity
Release
002-terminal-velocity
Type
Field Guide
Date
2025-11-05
Read Time
8 min
Tags
burnout, velocity
Status
Published
Header with structured metadata display for detailed content information.
VARIANT: PROGRESS
Loading Consciousness
Animated progress bars create a sense of loading or building momentum.
COMPONENT: TABLE HEADER
📚
Repository References
Repository
Focus
Key Innovation
claude-code-api-rs
API Gateway
Connection pooling, 5-10x speedup
claude-sdk-rs
SDK Library
Type-safe, feature-gated architecture
cc-enhanced
TUI Dashboard
Real-time project monitoring
Structured table header for displaying organized data with column labels.
Usage Examples
// Import the component
import { HeaderPattern } from '@/components/header-patterns'
// Use in your page
<HeaderPattern
title="Your Title Here"
variant="halftone"
accentColor="amber"
/>
title="Your Title Here"
variant="halftone"
accentColor="amber"
/>