Component Library Documentation
Overview
This project uses a custom component library built for creating fluid, performant web experiences. Each component is designed with minimalism and performance in mind, following consistent patterns for state management, animation, and user interaction.
Layout Components
PageWrapper
components/page-wrapper.tsx
Core layout wrapper that provides consistent page structure, navigation integration, and z-index management. All main pages use this component to ensure unified spacing and navigation behavior.
DEMO:
This entire page is wrapped in PageWrapper with currentPage="create"
Navigation
components/navigation.tsx
Sticky navigation bar with dropdown menus for Creating and Consuming sections. Features animated blur backdrop when dropdowns are open, smooth border animations on hover, and smart active state detection based on current route.
DEMO:
Hover over "Creating" or "Consuming" in the navigation bar at the top to see dropdown menus and backdrop blur
Interactive Components
CustomCursor
components/custom-cursor.tsx
Replaces the default cursor with dual-ring system: outer ring (16px) and inner dot (4px). Features velocity-based scaling that grows with mouse movement speed, smooth lerp animations, and automatic state changes when hovering interactive elements.
DEMO:
Move your mouse quickly to see velocity-based scaling. The custom cursor is active globally.
MagneticButton
components/magnetic-button.tsx
Button with magnetic hover effect that follows cursor movement. Uses RAF-based animation for 60fps performance with 0.1x dampening factor. Supports variants (primary, secondary, ghost) and can render as button or Link component.
DEMO:
SelectionBox
components/selection-box.tsx
Draws a border box around selected text in real-time. Listens to selectionchange events and uses getBoundingClientRect to position a fixed overlay with 8px padding around selection ranges.
DEMO:
Try selecting this text with your mouse. You'll see a border box appear around your selection. The component tracks text selection in real-time and draws a sharp-cornered border around it.
Visual Effects
ShaderBackground
components/shader-background.tsx
WebGL-based animated background using Swirl and ChromaFlow shaders from the 'shaders' package. Features configurable speed, intensity, detail, blend modes, and multi-color gradients. Includes loading state detection and fade-in animation. All parameters exposed through BackgroundControls panel.
DEMO:
The animated background behind this page is the ShaderBackground component. Open the controls in the bottom-right corner to adjust parameters.
GrainOverlay
components/grain-overlay.tsx
SVG-based film grain texture overlay using feTurbulence filter with fractal noise. Opacity controlled via localStorage with 0.08 default. Renders at z-index 50 with overlay blend mode for authentic analog feel.
DEMO:
The subtle film grain texture visible across the entire site is the GrainOverlay. Adjust "Grain Opacity" in background controls (Layers tab) to see the effect.
BackgroundControls
components/background-controls.tsx
Floating control panel (bottom-right) with tabbed interface for Swirl Effect, ChromaFlow, and Layers settings. Includes preset save/load system via localStorage and real-time slider controls for all shader parameters, opacity layers, and color pickers.
DEMO:
Click the three-dot button in the bottom-right corner to open the controls panel with tabs for different settings categories.
Data Display
TreeChart
components/tree-chart.tsx
Collapsible hierarchical tree visualization with recursive node rendering. Features indentation via marginLeft (32px per level), chevron icons for expand/collapse, and animated transitions. Supports unlimited nesting depth with title, description, and children properties.
DEMO:
Root Category
Top level item
ConsumeTable
components/consume-table.tsx
Flexible table component with configurable columns and hover states. Uses [9px] and [10px] font sizes for compact display, border-collapse layout, and subtle row hover effects. Column definitions support any key from data items.
DEMO:
Visit the Consume page to see ConsumeTable displaying software, hardware, books, and other categories in compact table format.
BlogPost
components/blog-post.tsx
Reusable blog article template with metadata header (title, date, read time), tag badges, and prose-optimized content area. Max width of 3xl with proper vertical rhythm and typography hierarchy for long-form content.
DEMO:
This page itself uses the BlogPost component. The header with title, date, and tags, plus all content formatting is provided by BlogPost.
State Management
BackgroundContext
contexts/background-context.tsx
React Context for global shader background state. Manages 20+ parameters (speed, intensity, colors, noise layers, etc.) with localStorage persistence. Provides useBackground hook for consuming components to access/modify settings across the application.
DEMO:
Change any background settings via the controls panel, then navigate to another page. Your settings persist via BackgroundContext and localStorage.
PersistentBackground
components/persistent-background.tsx
Connects ShaderBackground and BackgroundControls to BackgroundContext. Renders at app layout level to persist across route changes. Includes blur layer overlay with configurable opacity for content readability.
DEMO:
Navigate between pages to see the background animation persist without reloading. Adjust "Blur Layer Opacity" in controls to see the readability layer.
Utilities
useReveal
hooks/use-reveal.ts
Custom hook using IntersectionObserver for scroll-triggered animations. Returns ref and isVisible boolean. Default threshold of 0.3 (30% visibility) with configurable parameter. Once visible, stays visible to prevent re-triggering.
DEMO:
Used in section reveals throughout the site. Scroll on the About page to see experience timeline items fade in as they enter the viewport.
Design Principles
- Performance First: RAF-based animations, memoization, and efficient re-renders
- Minimal Typography: [9px] to [14px] font sizes with IBM Plex Sans Condensed
- Sharp Corners: All borders use 0rem radius for crisp, geometric aesthetic
- Subtle Interactions: Border animations, opacity transitions, hover states
- Persistent State: localStorage for user preferences across sessions
- Composable Components: Single responsibility with clear prop interfaces