Typable

An extension of the Animatable component which allows for animating text or numbers per character.

Lively

page.tsx

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
import { Typable } from '@infinityfx/lively/layout';

export default function Page() {

    return <span style={{
        fontSize: '2rem',
        fontWeight: '600'
    }}>
        <Typable animate={{ opacity: [0, 1] }} triggers={[{ on: 'mount' }]}>
            Lively
        </Typable>
    </span>;
}

Properties

The Typable component inherits all properties from the Animatable component.