Efeitos de texto

Scroll float reveal

Os caracteres de título flutuam de baixo para cima e assumem forma à medida que sua seção rola pela janela de visualização, passando diretamente para a posição de rolagem.

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

Como usar Scroll float reveal

Os caracteres de título flutuam de baixo para cima e assumem forma à medida que sua seção rola pela janela de visualização, passando diretamente para a posição de rolagem.

Teste a prévia com o mouse e o teclado. Verifique o foco visível e o layout em telas estreitas na sua página. Informe o número ou o identificador do componente ao seu agente de programação.

Propriedades: text, stagger, duration

Quais frameworks estão disponíveis?

O catálogo inclui estas versões: react, vue, svelte, astro, html. A prévia desta página usa React.

Como acessar a implementação?

O código, as versões e os comandos de instalação estão disponíveis no painel acima.

Conecte seu agente