Mathematical Tokens & Craft Workbench
Live inspection of OKLCH color palettes, fluid typography proportions, and interactive craft primitives.
6 Mathematical OKLCH Presets (Dual Registers)
Solar Amber
ID: amber
Cyber Emerald
ID: emerald
Deep Cobalt
ID: cobalt
Cosmic Crimson
ID: crimson
Quantum Violet
ID: violet
Solar Paper
ID: paper
Perceptual OKLCH Token Synthesizer
Testing perceptual lightness and chromatic resonance in OKLCH space.
{
name: 'Custom Palette',
id: 'custom',
accentPrimary: 'oklch(0.75 0.16 75)',
accentGlow: 'oklch(0.75 0.16 75 / 0.15)',
spark: 'oklch(0.85 0.18 85)',
borderAccent: 'oklch(0.75 0.16 75 / 0.6)'
}Fluid Proportion Matrix
Live Interactive Components
Pointer Spotlight Glow
Move your cursor across this card to observe the hardware-accelerated radial spotlight.
3D Parallax Tilt
Hardware-accelerated perspective tilt with spring return. Disabled on touch.
CYBERPUNK CIPHER
Hover over the heading above to trigger cryptographic decryption animation.
Smooth cubic-bezier RAF metric easing triggered on view.
Universal ⌘K Search
Instant client fuzzy search indexing pages, primitives, and palette toggles with keyboard arrow navigation.
Apple Luxury Spillway
6-step graduated backdrop-filter blur mask that softens transitions under fixed navigation and headers.
Words rise through overflow masks with preserved aria-label and zero CLS under reduced motion.
Curtain clip-path media reveal with scale parallax easing.
Web Audio Micro-Haptics
Synthesized Web Audio API frequencies without external sound files. Toggle with speaker button or Shift+M.
Sticky Card Deck
Pure CSS sticky storytelling deck with dynamic depth scaling and progressive z-indexing.
Swiss Editorial Grid
Fixed architectural boundary guides with corner crosshairs and column markers.
Top Reading Progress
Hardware-accelerated 2px top reading progress indicator driven by scaleX transform with prefers-reduced-motion bypass.
Shortcuts HUD Modal
Emil Kowalski / Linear keyboard shortcuts HUD modal. Press '?' or 'Shift+/' anywhere to toggle.
Kinetic Back-to-Top Dial
Floating circular button with SVG radial progress ring that tracks scroll percentage. Clicking triggers smooth Lenis scroll return with audio haptics.
Accordion Component (WCAG AAA)
Cloudflare Pages free tier provides unlimited bandwidth and zero invocation costs for static assets across 20,000 pages. Bypassing Workers ensures 0ms TTFB and prevents monthly invocation bill shocks under heavy traffic.
OKLCH is perceptually uniform. Pure RGB blacks (#000000) look dead and synthetic. Tinting neutrals towards the brand hue creates digital depth while maintaining exact mathematical lightness curves and WCAG AAA contrast.
Modify src/config/site.config.ts. The master layout automatically derives all CSS variables, SVG logos, metadata, navigation, and metrics without modifying any template HTML files.
TerminalWindow Component
BrowserWindow Component (Craft #33)
PricingTable Component (Craft #31)
Sovereign Investment Plans
Zero recurring server invoices. Host globally on Cloudflare Pages free tier with unlimited edge throughput.
Starter
Essential sovereign edge deployment for indie hackers, founders, and small teams.
Billed annually (or switch to monthly)
- 100% Static Cloudflare Pages Edge
- Zero Runtime Workers (Free Tier)
- Up to 20,000 Static Pages Quota
- Core 12 Craft Primitives Included
- 6 Mathematical OKLCH Palettes
- Community Discord Support
Sovereign Pro
Engineered for high-impact agencies, AI startups, and production client deliveries.
Billed annually (or switch to monthly)
- Everything in Starter, plus:
- Full 34 Production Craft Primitives
- Awwwards Jury Grade 7.5+ Motion Spine
- Interactive OKLCH Token Synthesizer Lab
- Lenis 1.3 + GSAP Dynamic Choreography
- Emil Kowalski Procedural Audio Haptics
- 10-Gate Cloudflare Static Purity Audit
- Autonomous Agent Fork Engine (npm run fork)
Enterprise Substrate
AGENCY TIERCustom digital systems, dedicated agent pipelines, and bespoke spatial shader engineering.
Billed annually (or switch to monthly)
- Everything in Pro, plus:
- Custom Mathematical OKLCH Design System
- Bespoke WebGL Shaders & Canvas FX
- Custom Agent Workflows & Headless CMS
- Dedicated Zero-Friction Agent Forking
- Zero-Workers Architecture Guarantee
- Full Commercial White-Label License
- Direct WhatsApp & Architecture Hotline
FaqSection Component (Craft #32)
Frequently Answered Inquiries
Architectural clarity, edge deployment physics, and agent ergonomics explained in plain language.
01Why is BOB-Astro 100% pure static with zero Cloudflare Workers runtime cost?
Why is BOB-Astro 100% pure static with zero Cloudflare Workers runtime cost?
Standard SSR frameworks run serverless compute on every visitor request, generating cold starts and sudden invoice spikes. BOB-Astro pre-renders all HTML, XML, and JSON diagnostics statically at build time. Cloudflare Pages serves pre-rendered static assets directly from edge SSDs with 0ms cold starts, zero Worker invocations, and unlimited bandwidth on Cloudflare’s free tier (up to 20,000 pages).
02How do autonomous coding agents (Claude, Cursor, Devin) rebrand this substrate?
How do autonomous coding agents (Claude, Cursor, Devin) rebrand this substrate?
Agents run `npm run fork -- --name "BrandName" --palette emerald --detach-git`. The engine automatically mutates `src/config/site.config.ts`, updates OKLCH tokens, wipes legacy git commits, creates a virgin git repository, and runs static verification tests in under 3 minutes.
03How does the OKLCH mathematical color system ensure WCAG AAA accessibility?
How does the OKLCH mathematical color system ensure WCAG AAA accessibility?
Unlike legacy sRGB or hex codes where brightness scales non-linearly across hues, OKLCH provides uniform perceptual lightness ($L$). The built-in OklchLab primitive mathematically computes contrast ratios against the obsidian background (`oklch(0.12 0.015 260)`), ensuring all text meets or exceeds WCAG AAA (7:1+) standards.
04Can I add blog posts, documentation, or dynamic content easily?
Can I add blog posts, documentation, or dynamic content easily?
Yes. BOB-Astro utilizes Astro 7 Content Layer with Zod-validated Markdown and MDX collections. Just drop `.md` or `.mdx` files into `src/content/docs/`. Navigation, breadcrumbs, search indexing, and Schema.org microdata are generated automatically.
05What happens under prefers-reduced-motion: reduce?
What happens under prefers-reduced-motion: reduce?
Every craft primitive in BOB-Astro respects user accessibility preferences. Lenis smooth scroll is instantly bypassed, CSS transforms and marquis freeze to readable static layouts, and particle canvases render a single balanced static constellation to avoid vestibular strain.
06What is the license and commercial usage rights?
What is the license and commercial usage rights?
BOB-Astro is licensed under the permissive MIT License. You are free to fork, customize, white-label, and sell client websites or commercial SaaS products built on this substrate without restriction.
BorderBeam Component (Craft #34)
Active Traveling State
100% pure CSS animation running on conic-gradient masks with zero runtime JavaScript dependencies.
Precision High-Velocity Spark
Automatically bypassed under prefers-reduced-motion: reduce to protect accessibility.