Briar Hunt
← Work index

JavaScript · TypeScript · web · desktop

What the work is made of.

The software behind the project cases, laid out properly: what runs in the browser, what stays local, where state moves, and which parts needed custom tooling.

Journey browser editor showing a branching node graph and its validation controls
JourneyNode authoring
Athena desktop control surface showing operational state across a tiled interface
AthenaLocal operations
Bazaar browser client component map showing listings and market analytics surfaces
BazaarRealtime client

Working stack

Technology by responsibility.

Everything used across these projects, grouped by the job it does and tied back to the work.

01 / SURFACE

Languages, interfaces & authoring

The browser-facing layer, documentation systems, editors, and operator surfaces.

  • TypeScript
  • JavaScript
  • React 18 / 19
  • SolidJS
  • Astro
  • Starlight / MDX
  • React Router
  • React Flow
  • Blockly
  • Radix UI
  • Tailwind CSS
  • semantic HTML / CSS

Used inMatchaBazaarAthenaSnowmieCarnivalLyricistPortfolio

02 / RUNTIME

Runtime & packaging

Desktop shells, local service processes, application builds, and bundled runtimes.

  • Electron
  • Tauri 2
  • Rust
  • Bun
  • Node.js
  • Vite
  • SWC

Used inBazaarAthenaSnowmieCarnivalLyricistPortfolio

03 / SERVICE

Services & realtime

Local service boundaries, request paths, live events, public APIs, and integrations.

  • Hono
  • Express
  • Fastify
  • HTTP / REST
  • WebSockets
  • Worker services
  • MCP
  • OAuth
  • Discord

Used inMatchaBazaarAthenaSnowmieLyricist

04 / STATE

State, storage & retrieval

Remote cache, local persistence, semantic retrieval, models, and portable authored data.

  • SQLite
  • Drizzle
  • TanStack Query
  • vector search
  • JSON
  • JSZip
  • ONNX

Used inMatchaBazaarAthenaSnowmieLyricist

05 / MEDIA

Graphics, audio & broadcast

Realtime graphics, spatial views, authored motion, sound, charts, and connected broadcast tools.

  • Three.js
  • raw WebGL
  • GLSL
  • Web Audio
  • GSAP
  • Theatre.js
  • Recharts
  • Mermaid
  • OBS
  • Twitch
  • VTube Studio

Used inMatchaBazaarAthenaSnowmieCarnivalLyricist

06 / SHIP

Delivery & verification

The less glamorous part that makes the rest shippable.

  • Astro static builds
  • TypeScript checks
  • ESLint
  • npm / pnpm
  • Nginx
  • route and fragment audits

Used inMatchaBazaarAthenaCarnivalPortfolio

Implementation evidence

Five decisions, in context.

Current interface captures and one labelled component map. No production data.

Journey browser editor with three coloured task nodes, connection handles, validation, import, and export controls
Browser authoring toolJourney config editor

01 / Browser authoring tool

A node graph that writes executable configuration.

Constraint
Branching content had to stay editable without hand-maintaining a large nested configuration.
Decision
React Flow owns spatial dependencies. Blockly handles script-shaped logic. Import, validation, and export keep the result portable.
Implementation
React 19 · TypeScript · React Flow · Blockly · JSON · JSZip
Read the case study ↗
Component map of Bazaar market and analytics routes with filters, listing rows, price history, and activity panels
Realtime market clientBazaar browser client

02 / Realtime market client

Client responsibilities split at the data boundary.

Constraint
Listings, auctions, buy orders, analytics, profiles, and administration all share live domain state but have different interaction and rendering needs.
Decision
TanStack Query owns request state and cache lifecycles. WebSockets carry live events. Three.js and Recharts stay inside the surfaces that need them.
Implementation
React 19 · TypeScript · React Router · TanStack Query · WebSockets · Three.js · Recharts · Radix UI · Tailwind 4
Read the case study ↗
Snowmie desktop runtime with live transcript, central animated form, broadcast connections, and an open memory browser
Realtime desktop runtimeSnowmie

03 / Realtime desktop runtime

Async voice and broadcast state need somewhere to be debugged.

Constraint
Streamed voice, interruption, memory retrieval, operator input, and broadcast events can all change state while a response is in flight.
Decision
The Electron operator surface exposes the runtime instead of pretending it is stateless. Memory stays local and searchable; integrations report their own connection state.
Implementation
Electron · React · TypeScript · Node · WebSockets · SQLite · vector search · Three.js · streamed audio
Read the case study ↗
Athena desktop control surface with cortex, integrity, proposals, memory, cost, logs, terminal, and chat tiles
Local-first desktop systemAthena Rampancy

04 / Local-first desktop system

Operational state stays visible, even when the system is quiet.

Constraint
Model routes, memory, tools, costs, integrity, and connected services needed one inspectable surface without moving private state to a hosted dashboard.
Decision
Bun and Hono form the local service boundary. SolidJS drives the interface. Tauri packages the main window and a reduced secondary display.
Implementation
Bun · Hono · SolidJS · Tauri 2 · Rust · Drizzle · SQLite · ONNX · Three.js
Read the case study ↗
Digital Carnival interface with tarot-led navigation, large card artwork, and a teal WebGL scene
Interactive audiovisual webDigital Carnival

05 / Interactive audiovisual web

One card definition, several spatial forms.

Constraint
The same content had to work as a wheel, compact navigation, an expanded poster, and a reading without splitting into four separate implementations.
Decision
React owns interface state. One structured card model feeds each view. Raw WebGL and GLSL handle the scene; Web Audio handles the sound layers.
Implementation
React 18 · TypeScript · Vite / SWC · raw WebGL · GLSL · Web Audio
Read the case study ↗

Project records

Implementation records by project.

MATCHA / WEB

Documentation · authoring · servicesbriar-docs

Matcha web platform

The public documentation system and its browser authoring tools live beside a dashboard, service layer, worker, integrations, and release infrastructure.

  • The current repository contains 280 documentation pages and 19 browser tools.
  • React Flow node graphs and Blockly editors produce structured configuration rather than decorative diagrams.
  • The service layer includes Fastify, Drizzle, SQLite, a dashboard, a worker, Discord integration, and an MCP server.
Matcha case study ↗
Surface
Astro 5Starlight / MDXReact 19TypeScriptTailwind CSSRadix UI
Authoring
React FlowBlocklyThree.jsMermaidRechartsJSZip
Services
FastifyDrizzleSQLiteWorkerDiscordMCP

BAZAAR / CLIENT

Realtime web applicationbazaar-web

Bazaar browser client

A frontend-only market client with typed routes, live events, charts, administration, and custom asset rendering.

  • TanStack Query owns remote cache and request state while WebSockets carry live client events.
  • The interface covers listings, auctions, buy orders, analytics, profiles, and administration.
  • Three.js and Recharts handle custom asset presentation and market data without moving those concerns into the API layer.
Bazaar system sheet ↗
Interface
React 19TypeScript 5.9React RouterRadix UITailwind 4
Data
TanStack QueryWebSocketstyped API routes
Visual
Three.jsRechartsFramer MotionVite 8

SNOWMIE / RUNTIME

Realtime Electron desktop systemsnowmie

Snowmie

A desktop control system where streamed voice, interruption, conversation state, semantic memory, broadcast context, and character output meet one operator interface.

  • Electron remains the desktop shell for the current Mission Control application.
  • SQLite and vector search support conversation and memory inspection without hiding state behind a remote service.
  • Twitch events, OBS context, VTube Studio output, WebSockets, and streamed audio converge in the monitored runtime.
Snowmie case study ↗
Interface
ReactTypeScriptThree.js
Runtime
ElectronNodeWebSocketsstreamed audio
State & inputs
SQLitevector searchTwitchOBSVTube Studio

ATHENA / DESKTOP

Local services · desktop control surfaceathena-rampancy

Athena Rampancy

A single-user desktop system for model routing, semantic memory, retrieval, proactive scheduling, voice, and inspectable operational state.

  • Bun and Hono provide the local service boundary; SolidJS drives the control surface.
  • Tauri 2 packages the desktop application while the service and interface remain independently inspectable.
  • Drizzle and SQLite store local state, ONNX supports local inference work, and Three.js renders spatial operational views.
Athena case study ↗
Interface
SolidJSTypeScriptThree.js
Runtime
BunHonoTauri 2Rust
State & models
DrizzleSQLiteONNXsemantic retrieval

CARNIVAL / WEBGL

Interactive audiovisual websiteamoastersite

Digital Carnival

A tarot-led interface built from spatial card navigation, poster views, readings, custom shaders, layered audio, and responsive fallback modes.

  • The visual layer uses raw WebGL and GLSL rather than a scene framework.
  • Web Audio coordinates the ambient and interaction layers while React owns the content and interface states.
  • One structured card definition drives the wheel, compact navigation, expanded poster, and reading spread.
Digital Carnival case study ↗
Interface
React 18TypeScript 5Vite 5 / SWC
Graphics
raw WebGLGLSLCSS transforms
Sound & state
Web Audiostructured card dataURL hashTwitch status

LYRICIST / DESKTOP

Desktop · local web · broadcast overlayspotify-lyrics-viewer

Lyricist 2.0

Current 2.0 work covers synced lyrics, local-audio input, timing tools, broadcast overlays, and reusable visual profiles.

  • Both desktop packaging paths remain in the repository: Tauri 2 around a bundled Node and Express service, plus Electron.
  • Three.js, GSAP, and Theatre.js drive the presentation layer and authored visual timing.
  • Spotify input, local audio, custom lyric timing, WebSocket updates, and OBS overlays share the same toolchain.
Interface
ReactTypeScriptThree.js
Runtime
Tauri 2RustElectronNodeExpress
Timing & output
GSAPTheatre.jsWebSocketSpotifylocal audioOBS

BRIAR / PORTFOLIO

Static editorial website · interactive systembriar-portfolio

briar.rocks

The portfolio is its own Astro and TypeScript system: static output, project-specific layouts, representative working artefacts, and no general-purpose CMS.

  • Astro emits complete HTML, CSS, fonts, images, and progressively enhanced TypeScript for a plain Nginx deployment with no tracking.
  • The project atlas and three sanitised system specimens work from deterministic local data; the underlying case-study content remains readable without them.
  • Cross-document transitions hand real project artefacts into their case studies. Safari receives the same navigation through a CSS aperture fallback.
  • Blueprint mode exposes the page grid and implementation labels; reduced-motion, keyboard operation, and focus states are treated as first-class paths.
  • Deployment creates a guarded server snapshot before replacing the live build. A build-time checker validates routes, fragments, and asset references.
Portfolio home ↗
Build
Astro 7TypeScriptVite
Interaction
SVG project atlasPointer EventsView Transitionsdeterministic reducers
Access
semantic HTMLkeyboard pathsreduced motionself-hosted fonts
Delivery
Nginxguarded snapshotsstatic route and fragment audit

Elsewhere in the portfolio

The rest of the engineering work.

Dawn is Java and Kotlin Compose. Veil is Java and GLSL. NDA-protected systems without a safely publishable web stack stay in their project cases.

Return to the full work index ↗