Briar Hunt
← Project index

Interactive web experience · Independent project

Digital Carnival

A creator-world interface organised as a six-card tarot table. Navigation, content, atmosphere, sound, and performance controls belong to the same staged scene.

Scope
Creative direction · interaction design · front-end implementation
Runtime
React 18 · TypeScript · Vite / SWC · raw WebGL
Input
Pointer · touch · keyboard · URL hash
Format
Single-scene creator identity and content experience
Digital Carnival interface with a central tarot card, two cards in the wheel, and controls arranged along the stage edge
Working build · principal sceneSix-card spatial navigationOriginal build captures use Briar’s former screen name, Amo Aster.
React component system◆Radial card stage◆Web Audio layers◆GLSL atmosphere◆Adaptive modes

01 World as interface

The content model became the navigation model.

Six parts of the creator identity are represented as tarot roles. Each card owns its artwork, aura, stage settings, summary, highlights, actions, and lore in structured data; the same definition drives the wheel, compact navigation, poster view, and reading ritual.

The Technomancer artwork used by the Digital Carnival interfaceII · The Technomancer
The Performer portrait used by the Digital Carnival interfaceI · The Performer
The Siren artwork used by the Digital Carnival interfaceIII · The Siren
Data contract

One card definition, four views

Card data is mapped into the carousel, utility navigation, expanded poster, and randomised reading spread.

Scene state

Selection changes the atmosphere

The active card writes its primary, secondary, accent, and sparkle colours into shared CSS variables.

Addressability

Metaphor without a dead end

Selection is mirrored into the URL hash. Back, forward, and direct links can restore a specific card.

Illustration and audio credits are not inferred where the project files contain no attribution.

02 Interaction choreography

A route is staged as a sequence.

The main wheel supports click, drag, touch, arrow keys, and compact direct selection. Activating an inactive card brings it forward; activating the focused card opens its full detail. The separate reading mode turns the same deck into a timed three-card flow.

  1. 01ArriveA staged opening introduces the tent before the interface is exposed.
  2. 02BrowseSix subjects occupy a radial tarot wheel rather than a page menu.
  3. 03FocusThe active card expands in place and changes the scene’s colour field.
  4. 04OpenA second activation moves from card to full poster detail.
  5. 05ReadAn optional three-card ritual shuffles, draws, reveals, and types a result.
  6. 06ReturnHash state preserves the selected card without breaking the stage metaphor.
Digital Carnival three-card reading overlay showing past, present, and future cards
Optional ritualshuffle → draw → reveal → fortuneEscape and a visible close control return to the stage
Wheel geometry

Six slots share a calculated angle around a desktop or mobile radius. Drag distance becomes rotation, then snaps to the nearest card.

Layered activation

One action selects; a second opens. This keeps the full wheel browsable without turning every glance into a modal.

Reading state

A small state machine controls intro, shuffle, draw, reveal, fortune, and completion rather than relying on one long animation.

03 Rendering system

Atmosphere is composited, not baked into a backdrop.

The deluxe scene adds a raw WebGL pass over the React interface. A second shader handles the poster transition. Both use small fullscreen buffers and explicit fallbacks instead of a scene-graph library.

GLSL 01

Atmospheric pass

15 fps cap
  1. 01Fullscreen triangle strip
  2. 02Time-based grain and layered value noise
  3. 03Candle flicker weighted by vignette
  4. 04Slow fog fields rising through the lower frame
  5. 05Alpha blend over the interface
GLSL 02

Burn dissolve

1.6 s pass
  1. 01Transition origin taken from the selected card
  2. 02Radial distance combined with three noise scales
  3. 03Moving threshold removes the dark field
  4. 04Narrow teal edge marks the active boundary
  5. 05CSS transition remains available without WebGL
Scene React component tree+Motion CSS transforms + requestAnimationFrame+Atmosphere raw WebGL canvases+State context + structured card data

04 · Audio direction

The interface has a sound field.

A looped carnival bed runs through Web Audio with a low-pass filter, gain control, and a three-second fade. Quiet tent wind, wood creaks, dark atmosphere, and wind howls are scheduled independently. Card and modal actions draw from small preloaded bell pools with slight pitch variation.

Browser audio graph
SOURCECarnival loopHTMLAudioElement→COLOURLow-pass800 Hz · Q 1→LEVELGainuser-controlled→OUTPUTDestinationafter interaction
ambient loopscheduled environmentinteraction bells

05 Resilience

The spectacle can be turned down without removing the content.

The project treats adaptation as part of the interface. User preferences persist locally, reduced-motion preference can select the simpler presentation, and runtime checks can recommend a lower-cost mode.

Default

Arcane mode

Radial wheel, parallax, animated transitions, environmental layers, and the complete stage.

Accessible structure

Mortal mode

The spatial wheel becomes a direct card list while preserving each subject and its actions.

Lower GPU cost

High performance

Expensive filters, shadows, particles, ambient orbs, and selected transition effects are disabled.

Optional layer

Deluxe mode

The atmospheric WebGL pass is opt-in and excluded on the mobile layout.

KeyboardArrow keys change cards; Enter or Space opens the focused card; Escape closes overlays.
Motionprefers-reduced-motion is observed and can initialise the simplified mode.
GPUWebGL availability and renderer information inform fallback behaviour; failed shaders exit cleanly.
ResponsiveDesktop and mobile use different wheel radii; screen and aspect-ratio checks tune the stage scale.
AudioPlayback retries only after a user gesture when browser autoplay policy blocks the first attempt.
PersistenceMode, performance, deluxe, audio, and volume settings are stored between visits.