Effets de texte

Scroll float reveal

Les caractères de titre flottent depuis le bas et prennent forme à mesure que leur section défile dans la fenêtre, nettoyée directement jusqu'à la position de défilement.

Scroll scrubbed heading

Changelog · vol. 14

Every glyph in this heading tracks the scrollbar instead of a clock. Push the list down and the letters climb out of their baseline one after another, stretching back into proportion as they go. Pull it back up and they sink and stretch again.

v2.7.0 · Scrub timeline snaps to whole frames, so recorded captures stop strobing between two states.

v2.6.3 · Character stagger now measures from the first glyph that leaves the band, not from page load.

v2.6.0 · Reduced motion renders the settled heading outright, no ramp, no waiting.

The effect reads best on headings of eight to thirty characters. Longer lines stagger so far that the tail is still rising while the head has already settled, which can be a look, but usually is not.

Fig. 14 · settle band spans the middle half of the viewport

Utiliser Scroll float reveal

Les caractères de titre flottent depuis le bas et prennent forme à mesure que leur section défile dans la fenêtre, nettoyée directement jusqu'à la position de défilement.

Testez l’aperçu avec la souris et le clavier, puis vérifiez la visibilité du focus et la mise en page sur un écran étroit. Indiquez le numéro ou l’identifiant du composant à votre agent de programmation.

Propriétés: text, stagger, duration

Quels frameworks sont disponibles ?

Le catalogue propose ces versions : react, vue, svelte, astro, html. L’aperçu de cette page utilise React.

Comment accéder à l’implémentation ?

Le code, les versions et les commandes d’installation sont disponibles dans le panneau ci-dessus.

Connectez votre agent