stabilType

Motion-adaptive typography — adapts letter-spacing, weight, and optical size in real time based on scroll velocity and device motion.

stabiltype.com · npm · GitHub

TypeScript · Zero dependencies · React + Vanilla JS

Install

npm install @liiift-studio/stabiltype

React

Component

import { StabilTypeText } from '@liiift-studio/stabiltype'

<StabilTypeText axis="wght" min={300} max={700}>
  Typography in motion
</StabilTypeText>

Hook

import { useStabilType } from '@liiift-studio/stabiltype'

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

<p ref={ref}>Typography in motion</p>

Vanilla JS

import { applyStabilType, startStabilType, removeStabilType } from '@liiift-studio/stabiltype'

const el = document.querySelector('p')
applyStabilType(el, { axis: 'wght', min: 300, max: 700 })
const stop = startStabilType(el)

// Later:
stop()
removeStabilType(el)