Every player on this page is the same component. Nothing below overrides a
VocaSync class or uses !important — it is all custom properties and
props. Try it in dark mode; each theme carries its own.
Four seeds carry a theme
Set --vocasync-accent, --vocasync-surface,
--vocasync-text and --vocasync-highlight. Borders,
muted text, hover states and the contrast colour on the play button all derive
from them.
Defaults
Loading audio…
Audio not available for this article
Audio could not be loaded
0:00/0:00
Four seeds changed
Loading audio…
Audio not available for this article
Audio could not be loaded
0:00/0:00
Seeds + shape + type
Loading audio…
Audio not available for this article
Audio could not be loaded
0:00/0:00
Square, heavy borders, no elevation
Loading audio…
Audio not available for this article
Audio could not be loaded
0:00/0:00
Shapes
variant changes the form factor. minimal borrows the
page instead of sitting on a card.
variant="bar" (default)
Loading audio…
Audio not available for this article
Audio could not be loaded
0:00/0:00
variant="minimal"
Loading audio…
Audio not available for this article
Audio could not be loaded
0:00/0:00
variant="card", with a title in the before slot
Getting started with VocaSyncNarrated · 1 min
Loading audio…
Audio not available for this article
Audio could not be loaded
0:00/0:00
Density
size scales padding, gaps and control sizes together through one
multiplier, which you can also set directly as --vocasync-density.
size="sm"
Loading audio…
Audio not available for this article
Audio could not be loaded
0:00/0:00
size="md"
Loading audio…
Audio not available for this article
Audio could not be loaded
0:00/0:00
size="lg"
Loading audio…
Audio not available for this article
Audio could not be loaded
0:00/0:00
Controls, order and language
controls takes an ordered array, so it sets both which controls
appear and where. strings covers every visible label and every
accessible name.