Side A · ready
One Custom Element for every framework. It grows with its container, re-themes itself — and listens to the music it plays.
33⅓
npm i @pulse-music/Pulse is one Custom Element for every framework. It reads its own width — a disc at 96 px, a hero card at 760 — wears nine moods that re-light every player on the page, and listens to the music it plays: the real spectrum, sixty times a second.
Everything, mute included
@container pulse (width < 128px)Pick one and the whole room changes key — the players on this page, the mini player following you, even this wall. It’s remembered for your next visit.
Moods heard 0/9
<pulse-player variant="auto">Interlude
Side B is the part you hear before you see it.
<pulse-fab> shares the same audio session as every player on the page. It appears when the music starts, can be dragged anywhere, snaps to the nearest corner and remembers where you left it — even across pages.
It’s already here. Drop the needle to meet it.
<pulse-fab placement="bottom-end" pulso></pulse-fab>Twenty-four bands of the real spectrum, sixty times a second, from one Web Audio analyser shared by every visual — the ambient EQ, the FAB’s halo, and this landscape. Each line is a moment that just passed.
// The same frames that drive this page. One analyser, zero copies.
const off = engine.onFrame(({ bands, energy }) => {
// bands: Float32Array(24) · energy: 0..1
canvas.draw(bands)
})No audio? No problem: when the analyser can’t run (cross-origin media, no Web Audio), frames are synthesised from playback so visuals never freeze — and they flag syntheticso you can tell.
The engine and the player are framework-free. Thin, typed wrappers give Vue, React and Svelte their own idioms; Angular and plain HTML use the element as-is. Same audio, same events, same types.
<script type="module">
import '@pulse-music/web-component'
</script>
<pulse-player ambient-eq>
<pulse-track src="/projector-screen.mp3" title="Projector Screen"
artist="HoliznaCC0" cover="/projector-screen.jpg"></pulse-track>
</pulse-player>
<!-- Optional floating mini player, same audio session -->
<pulse-fab></pulse-fab> npm i @pulse-music/<script setup lang="ts">
import { PulsePlayer, PulseFab } from '@pulse-music/vue'
const tracks = [{ title: 'Projector Screen', artist: 'HoliznaCC0', src: '/projector-screen.mp3', cover: '/projector-screen.jpg' }]
</script>
<template>
<PulsePlayer :tracks="tracks" ambient-eq />
<PulseFab />
</template> npm i @pulse-music/import { PulsePlayer, PulseFab } from '@pulse-music/react'
const tracks = [{ title: 'Projector Screen', artist: 'HoliznaCC0', src: '/projector-screen.mp3', cover: '/projector-screen.jpg' }]
export function Player() {
return (
<>
<PulsePlayer tracks={tracks} ambientEq />
<PulseFab />
</>
)
} npm i @pulse-music/<script>
import '@pulse-music/svelte'
const tracks = [{ title: 'Projector Screen', artist: 'HoliznaCC0', src: '/projector-screen.mp3', cover: '/projector-screen.jpg' }]
</script>
<pulse-player {tracks} ambient-eq></pulse-player>
<pulse-fab></pulse-fab> npm i @pulse-music/import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
import '@pulse-music/web-component'
@Component({
selector: 'app-player',
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<pulse-player [tracks]="tracks" ambient-eq></pulse-player>
<pulse-fab></pulse-fab>
`,
})
export class PlayerComponent {
tracks = [{ title: 'Projector Screen', artist: 'HoliznaCC0', src: '/projector-screen.mp3', cover: '/projector-screen.jpg' }]
} npm i @pulse-music/Focus the player and type. Or press a key below. Then watch what assistive technology is told — read live from the player’s own accessibility attributes.
Every control is reachable, shortcuts work from anywhere inside the player.
Real buttons and an ARIA slider with spoken time — “1:12 of 2:40”.
Media Session: title, artwork and controls on phones and keyboards.
Spins, ripples and springs step aside when you ask the OS for calm.
Every label is replaceable through one labels property.
axe-core runs WCAG 2.2 AA checks on every change.
This page’s motion as a film, rendered frame by frame from code to “Projector Screen”. No editing software, no stock footage. Sound on.
The grid this page moves on70.06 BPMBeat · 856 msEighth · 428Sixteenth · 214Thirty-second · 107
A tonearm swings in and drops onto a spinning record. The headline slams in word by word; the letters of “plays” rise and fall with the music. The player card opens from the full stop and folds from 760 to 96 pixels wide, then four moods wipe across it. The spectrum turns into a ridgeline landscape, curls into the grooves of a record that flips to side B, and the reel ends on the Pulse logo as the turntable brakes.
MIT-licensed, typed end to end, tested in real browsers. Every change goes through lint, unit, end-to-end and accessibility checks before it’s pressed.
Pressed byMao — @maoxorDesign, engine, elements, and this website.