Speaker Launch

Launch a physical product whose selling point is something you have to see (here, bass you can watch) with the object doing the demonstration, so the visitor's first action is pressing Play rather than reading a claim; price, one buy action and the figures that back the claim sit beside it.

Copy the speaker-launch folder and the ferrofluid folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="ferrofluid/ferrofluid.css">
<link rel="stylesheet" href="speaker-launch/speaker-launch.css">
<div id="speaker-launch"></div>

<script type="module">
  import Ferrofluid from './ferrofluid/ferrofluid.mjs';
  import { mount } from './speaker-launch/speaker-launch.mjs';

  const speakerLaunch = mount(document.getElementById('speaker-launch'), {
    brand: 'Halde',
    product: 'Tarn',
    eyebrow: 'New: Tarn F1 ferrofluid speaker',
  }, { Ferrofluid });

  // speakerLaunch.update({ … });   change any option in place
  // speakerLaunch.destroy();        and take it away again
</script>

mount(element, options, { Ferrofluid })

Builds the block inside the element and returns its handle. Hand it the Ferrofluid it is built with.

handle.update(next = {})

Change options in place.

handle.playing

handle.fluid

handle.player

handle.root

handle.destroy()

Stops it and cleans up after it.

1. At restEvery word readable, the bowl a still glossy pool, the status line says the sound is made in the browser and silent until played. No audio context exists and nothing runs.
2. ArrivingIntro lines, buy row, demo deck and figures rise 14px and fade in once over 0.9s, staggered; CSS only.
3. PlayingA four-bar loop in D minor (kick, bass, pad, hats) is scheduled on the audio clock; the fluid listens to the kick-and-bass bus and rises into a crown on every kick; the magnet sways gently; a 12-bar meter follows the low end; Play reads Pause, aria-pressed true, and the status line says what is playing.
4. PausedThe master fades over 60ms, the context suspends, the fluid stops listening, melts back and sleeps; no frames are requested.
5. Hover and focusNav links brighten, the Pre-order pill takes an accent border, buttons take their hover fill and the buy arrow slides; every control shows a 2px focus ring.
6. PaletteWalnut with a brass bowl, graphite with a steel bowl, or ivory with a ceramic bowl: one token table each.
7. TabletAt container widths 640–999px the name and tagline sit left of the paragraph, the bowl runs the full width, figures four across.
8. PhoneUnder 640px one column: header with the nav on a second row, name, bowl bleeding to the edges with the deck under it, price over a full-width buy button, figures two by two.
9. Reduced motionNo arrival; the bowl shows the spiked still and never moves; Play still plays the sound, the status says the fluid is shown still, and the meter does not move.
10. Off screen or hiddenThe object pauses itself; the block's own frame loop only runs while playing.

Made of: Product shot as demo, Browser synthesised loop, Lookahead audio scheduler, Low end drive bus, Container query recomposition, Palette from object finish.

Original composition; Halde, Tarn, the demo loop and all copy are invented. No image and no audio file: the only picture is the Ferrofluid, the only sound is synthesised in Web Audio after the visitor presses Play. Faces: Italiana and Geist Mono (SIL OFL 1.1) as WOFF2, licences beside them.

• 04FerrofluidFerrofluid in a dish.

More blocks on the same object:

• 04.2Dark HeroA dark editorial hero over black ferrofluid.
• 04.3Processing StateA long job’s progress card, crowned by ferrofluid.