Motion Showcase

Animações e transições da marca /tg.

01 Signal Pulse

2s / ease-in-out / infinite

Ponto laranja que pulsa em escala e opacidade. 3 tamanhos com delay escalonado.

02 Slash Reveal

A barra desliza primeiro, depois tg aparece, e o ponto salta. Sequência de entrada da marca.

/tg.

03 Fade In Up

0.2s - 0.7s / ease-out + cubic-bezier

Elementos surgem de baixo com fade. 4 variantes de velocidade. Ativados ao entrar na viewport.

0.2s
0.4s
0.7s
spring

04 Card Hover

Hover: translateY(-4px), sombra cresce, borda transiciona para laranja. Somente CSS.

Card A
Card B
Card C

05 Dot Trail

1.5s / ease-in-out / infinite / staggered

5 pontos animam em sequência criando sensação de carregamento ou processamento.

06 Glitch Text

Efeito glitch usando clip-path, leve skew e deslocamento de cor. Loop de 3 segundos.

/tg.

07 Brand Reveal

2.5s total / ease-out + cubic-bezier bounce

Sequência completa: / desliza da esquerda, tg aparece em fade, . escala de 0 com bounce.

/tg.

08 Easing Reference

4 curvas de easing com seus valores cubic-bezier. Observe a diferença no comportamento.

Spring cubic-bezier(0.34, 1.56, 0.64, 1)
Smooth cubic-bezier(0.4, 0, 0.2, 1)
Decel cubic-bezier(0, 0, 0.2, 1)
Accel cubic-bezier(0.4, 0, 1, 1)

09 Duration Reference

0.2s / 0.4s / 0.7s / ease-out

Barras preenchem da esquerda para a direita mostrando as 3 durações padrão da marca.

Fast 0.2s
Medium 0.4s
Slow 0.7s

/tg. Motion Showcase -- Animações CSS puras + JS mínimo