speechType

Typography that follows your voice — per-word typographic emphasis synced to Web Speech API boundary events.

speechtype.com · npm · GitHub

TypeScript · Zero dependencies · React + Vanilla JS

Install

npm install @liiift-studio/speechtype

React

Component

import { SpeechTypeText } from '@liiift-studio/speechtype'

<SpeechTypeText axis="wght" min={300} max={700} autoPlay>
  The quick brown fox jumps over the lazy dog.
</SpeechTypeText>

Hook

import { useSpeechType } from '@liiift-studio/speechtype'

const { ref, speak, stop } = useSpeechType({ axis: 'wght', min: 300, max: 700 })

<p ref={ref}>The quick brown fox jumps over the lazy dog.</p>

Vanilla JS

import { prepareSpeechType, applySpeechType, startSpeechType, removeSpeechType } from '@liiift-studio/speechtype'

const el = document.querySelector('p')
const originalHTML = el.innerHTML
prepareSpeechType(el, originalHTML)
const stop = startSpeechType(el, { axis: 'wght', min: 300, max: 700 })

// Later:
stop()
removeSpeechType(el, originalHTML)