Skip to content →
DOC 03 // MANUAL

34 Craft Primitives & Motion Spine

Awwwards-grade digital craft primitives, Lenis smooth scrolling, Emil Kowalski audio micro-haptics, pricing, FAQs, and live telemetry.

// On This Page

34 Craft Primitives & Motion Spine

BOB-Astro ships with 34 bespoke digital craft primitives engineered to satisfy Awwwards jury criteria (7.5+ design score) without external UI component bloat.

1. Kinetic Motion Engine

The motion spine is governed by Lenis 1.3 and GSAP ScrollTrigger:

  • Unified display requestAnimationFrame loop.
  • Automatic bypass under (prefers-reduced-motion: reduce).
  • Full lifecycle handling across Astro ClientRouter page transitions.

2. Emil Kowalski Synthesized Audio Haptics

Rather than loading heavy external MP3/WAV audio files, the substrate uses the browser’s native Web Audio API to procedurally synthesize micro-frequencies:

  • Tap feedback: 14ms exponential sine wave at 440 Hz.
  • Chime feedback: 22ms dual harmonic at 587 Hz $\rightarrow$ 880 Hz.
  • Modal feedback: 35ms subtle resonant hum at 220 Hz.
  • Accessible global mute toggle with Shift+M shortcut and memory persistence in localStorage.

3. Keyboard-First Raycast Navigation & Diagnostics

  • Press ⌘K or Ctrl+K to trigger the Command Palette.
  • Press ? or Shift+/ to trigger the Keyboard Shortcuts HUD Modal.
  • Press Alt+T / Option+T to toggle the Real-Time Telemetry HUD.
  • Press Alt+A / Option+A to open the Sensory & Accessibility Preferences.
  • Press T to cycle through the 6 OKLCH color palettes on the fly.
  • Press Esc to dismiss any open overlay.

4. Hardware-Accelerated Visual Reveals

  • MaskedReveal.astro: Accessible staggered word reveals through overflow masks with preserved aria-label and zero CLS.
  • ClipImageReveal.astro: Hardware-accelerated curtain and circular clip-path media reveals with scale parallax.
  • FloatingBackToTop.astro: Circular dial button with SVG radial progress ring tracking 0% to 100% of scroll depth.
  • ScrollProgressBar.astro: 2px viewport indicator driven by GPU scaleX transform.

5. Interactive OKLCH Color Science Lab (OklchLab.astro)

Allows designers and autonomous coding agents to synthesize custom brand colors in perceptual OKLCH color space:

  • Real-time sliders for Lightness ($L$), Chroma ($C$), and Hue ($H^\circ$).
  • Automated contrast ratio computation against the obsidian canvas (oklch(0.12 0.015 260)).
  • Instant WCAG AAA (7:1+) or WCAG AA (4.5:1+) compliance badges.
  • One-click copy for the exact TypeScript palette token ready for site.config.ts.

6. Real-Time Telemetry HUD (TelemetryHud.astro)

An in-browser diagnostic overlay for continuous performance auditing (Alt+T):

  • Sustained FPS Counter: Rolling RAF delta measurement tracking 60fps budget.
  • Edge TTFB Meter: Measured via Navigation Timing API (performance.getEntriesByType('navigation')).
  • DOM Node Budget: Total live elements in DOM.
  • Page Load Duration: Total time to loadEventEnd.

7. Sensory & Accessibility Center (AccessibilityModal.astro)

  • Granular motion intensity: Cinematic (60fps), Calm & Restrained, or Strict Reduced Motion.
  • Web Audio haptics on/off state.
  • Neurodivergent horizontal reading guide line following cursor position.

8. Schema Breadcrumb Navigation (Breadcrumb.astro)

Primitive #30 provides accessible, hierarchical navigation with automated SEO microdata:

  • Automated derivation from Astro.url.pathname or custom items array.
  • Generates inline Schema.org BreadcrumbList JSON-LD for rich Google search snippets.
  • Full keyboard focusability and aria-current="page" semantics.

9. Sovereign SaaS Pricing Table (PricingTable.astro)

Primitive #31 delivers an Awwwards-grade SaaS pricing matrix:

  • Interactive monthly vs annual billing toggle with custom discount badges.
  • Highlighted popular/recommended tier with gradient border glow.
  • Feature checklists with SVG vector indicators and magnetic CTA conversion buttons.
  • 100% tokenized with zero hardcoded colors.

10. Schema.org FAQ Section (FaqSection.astro)

Primitive #32 provides accessible disclosures with search engine superpowers:

  • Automated Schema.org FAQPage JSON-LD microdata for Google search rich expandable snippets.
  • Procedurally synthesized Emil Kowalski Web Audio tactile tap feedback on disclosure toggle.
  • Category tagging and chevron rotation animations.

11. Glass Browser Mockup Frame (BrowserWindow.astro)

Primitive #33 provides an Apple/Linear product showcase shell:

  • Authentic macOS window traffic lights (close, minimize, zoom).
  • Secure SSL padlock omnibar displaying custom URLs.
  • Responsive slots for dashboard screenshots, videos, or live interactive Astro islands.

12. Laser Border Beam (BorderBeam.astro)

Primitive #34 provides hardware-accelerated travelling laser specular highlights:

  • Pure CSS animation running on conic-gradient masks with zero runtime JavaScript.
  • Traces along the perimeter of elevated cards, pricing tiers, and active states.
  • Automatically bypassed under prefers-reduced-motion: reduce.

13. Machine-Readable Agent Endpoints

  • /api/catalog: Complete static JSON registry of all 34 craft primitives with prop interfaces.
  • /api/manifest: Full system architecture and design token specification.
  • /api/health: Static edge health and quota telemetry.
  • /llms.txt: Standard compact markdown index for LLMs and autonomous coding agents.
  • /llms-full.txt: Exhaustive single-file context for deep agent understanding.
← PreviousSovereign Edge ArchitectureNext →OKLCH Color Science & Dual Registers