Project case study

Creative engineering / 2026

The Kindred Fire

Every ember has a voice.

An audio-reactive band experience where synthesized sound drives a living Canvas flame system, expanding the Evergrace universe through motion and atmosphere.

Explore live project
Project
Self-initiated concept
Role
Creative Engineering + Art Direction
Built with
Vanilla JS · Web Audio · Canvas 2D
Code
View on GitHub ↗
Seven seconds of the live site: synthesized sound shaping the Canvas flames in real time.

01 / The brief

Give a fictional band a living stage.

The Kindred Fire is a self-initiated launch concept for Evergrace Music’s featured fictional band and its album Kindled. The project extends the label world while establishing a darker, ember-led identity of its own.

It was deliberately built without React or Three.js to demonstrate a different creative-engineering toolkit.

The Kindred Fire homepage at rest: Every Ember Has a Voice headline with a Light it up button over a dark ember field
At rest: nothing plays until the visitor chooses to light the fire.

02 / Art direction

Every ember has a voice.

Evergrace gold and charcoal provide continuity with the parent label. Ember red becomes dominant, supported by film grain, fire-gradient typography and a field of varied flame forms.

The visualizer evolved through three iterations. Gaps between individually shaped flame tongues, a restrained ember bed and varied curl and height produced a more convincing sense of fire than a connected horizon.

Kindled album panel with the album art and a nine-track list
The Kindled album panel: ember-led art direction carried into the content views.

03 / Interaction

Sound becomes the visual system.

  • A synthesized Web Audio source feeds an AnalyserNode, avoiding borrowed recordings or licensing questions.
  • Canvas 2D redraws the flame field from live frequency data rather than relying on a prerecorded animation.
  • View Transitions move between the hero and content panel with an instant fallback where unsupported.
  • Tour, album, lyrics and mission views share a keyboard-operable tab interface.
Tour panel with tabs for tour, Kindled, lyrics, mission and project, listing six tour dates
Tour, album, lyrics, mission and project notes share one keyboard-operable tab set.

04 / Access & resilience

Atmosphere with a quiet mode.

A native dialog handles the lyric excerpt. Visible focus states, a skip link and larger targets support keyboard and touch interaction.

Reduced-motion preferences settle the visualizer into a static glow and remove transitions and scroll-driven reveals. Audio and Canvas work pause when the hero is no longer visible.

Lyric excerpt for Every Ember open in a dialog over the dimmed page
The lyric excerpt opens in a native dialog.

05 / Scope & result

A focused creative-engineering demonstration.

The band, album, lyrics, venues, tour and release information are fictional portfolio content. Streaming links, audience metrics, testimonials and sales claims are intentionally absent.

The finished concept demonstrates Web Audio, Canvas animation, progressive enhancement and vanilla JavaScript within a distinct music experience. Desktop and mobile layouts, keyboard tabs and both motion modes were checked during the original project review.

The technical idea and the visual idea are the same: live sound data continuously gives the fire its shape.

The Kindred Fire hero on a phone with the flame visualizer running
Phone: the fire, live
Tour dates stacked on a phone
Phone: tour panel

Explore the work

See the experience
in motion.