Three lines

This page has no configuration of its own. It imports the site's preconfigured instance from js/quotes.js and asks for a ticker. The bar along the bottom is the result.

import { ticker, welcome } from './js/quotes.js';
import { playAction } from './js/speech.js';
import { initSettings } from './js/settings.js';

const settings = initSettings();

ticker();
welcome({ actions: [playAction({ onMissingKey: settings.promptOnce })] });

Show a welcome quote

The dialog's buttons run Previous · Refresh · Next · Play · Close. Play reads the quote aloud. With a Speechify key configured it uses their voice; with none it falls back to the voice built into your browser, which is why it works here with no setup. Press it again to stop.

Play is not a library feature — js/speech.js supplies it through the dialog's actions slot, so BlockQuotes itself never learns what Speechify is.

To use Speechify's voices you need a key of your own. The first time you press Play, Settings opens so you can paste one; after that it stays out of the way. The hamburger in the corner reopens it whenever you want to change or clear the key.

No theme is set here, so the ticker and dialog follow your operating system's light or dark preference. Switch it and they follow along. The main demo forces dark and adds controls for every option.

Scroll to the bottom — the page is padded automatically so the fixed bar never covers this last line.