mist

Apple Vision-style fluid blur animations for text entry / exit.

Framework-agnostic core + a thin React wrapper. Uses the Web Animations API and native CSS filter: blur() so the compositor handles the heavy lifting.

Install

npm install @antoineview/mist

Vanilla usage

import { Mist } from '@antoineview/mist';

const el = document.querySelector('h1')!;
const m = new Mist(el, {
  split: 'word',
  stagger: 60,
  duration: 800,
  blur: 20,
  y: 12,
});

m.in();
m.out();
m.toggle();
m.destroy();

React usage

import { MistText } from '@antoineview/mist/react';

<MistText text="A small thing, well-made, can change a day." split="word" />

react and react-dom are peer dependencies.

Options

Option	Type	Default
split	'word' | 'line' | 'char'	'word'
stagger	number (ms)	60
duration	number (ms)	800
blur	number (px)	20
y	number (px)	12
easing	string	'cubic-bezier(0.22, 1, 0.36, 1)'
autoIn	boolean	false

Licence

MIT.