Text Reveal
Lines of text rising into place from behind a mask, each a beat after the last, wherever the text happens to wrap.
Usage
import { TextReveal } from '@wdzyi/ui';
<TextReveal
as='h2'
className='font-serif text-[32px] leading-10'
text='Products, systems and the space between'
/>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- textstring
- Plain text. It’s split into lines wherever it wraps.
- as'p' | 'h1' … 'h4' | 'blockquote' | 'div' = 'p'
- The element it is.
- showboolean
- Leave it out to play once it’s in view. On reveals it, and off drops the lines back.
- staggernumber = 90
- Between one line and the next, in ms.
- delaynumber = 0
- Before the first line, in ms.
- classNamestring
- Its type and anything else. The measured copy takes it too.
Notes
- The lines are found by measuring. An invisible copy is set word by word, and words at the same height share a line. It measures again when the width changes or a late font arrives.
- Each line rises over 920ms on the strong ease-out, 90ms after the one above, from a window a little bigger than its letters, so nothing is cut off at rest.
- Without show, it plays the first time a third of it is in view. With it, it rises when show turns on and drops back when it turns off.
- With reduced motion, the text is simply there.