# Speaker Launch

A speaker launch where the product works on the page. Press Play and a loop made in the browser lifts a gold bowl of ferrofluid into spikes on every kick.

Block · With a Pass · https://tactileui.dev/blocks/speaker-launch

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

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

## Usage notes

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.

## Options

| Option | Type | Description |
| - | - | - |
| brand | text | The wordmark in the nav. |
| product | text | Set very large; short names read best. |
| eyebrow | text | Eyebrow |
| tagline | text | Tagline |
| body | text | Paragraph |
| price | text | Price |
| priceNote | text | Under the price |
| cta | text | Followed by the product name. |
| ship | text | Shipping line |
| href | text | Buy link |
| nav | text | Comma-separated, up to five. |
| stats | text | “value: label; value: label”, up to four. |
| specs | text | Specs line |
| track | text | Demo track name |
| palette | enum | Walnut with a brass bowl, graphite with steel, or ivory with a ceramic bowl. |
| tempo | number | Demo tempo (BPM) |
| reactivity | number | The magnet’s strength at a full kick. |
| density | number | Spike density |
| sharpness | number | Spike sharpness |
| light | number | 0 is from above, clockwise. |

## Methods

- update
- playing
- fluid
- player
- root
- destroy

## States

1. **At rest**: Every 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. **Arriving**: 
3. **Playing**: A four-bar loop in D minor (kick, bass, pad, hats) is scheduled on the audio clock.
4. **Paused**: 
5. **Hover and focus**: Nav links brighten, the Pre-order pill takes an accent border, buttons take their hover fill and the buy arrow slides.
6. **Palette**: Walnut with a brass bowl, graphite with a steel bowl, or ivory with a ceramic bowl: one token table each.
7. **Tablet**: 
8. **Phone**: 
9. **Reduced motion**: No 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 hidden**: The object pauses itself; the block's own frame loop only runs while playing.

## How it works

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.