/tg. Motion Showcase

01 Signal Pulse

2s / ease-in-out / infinite

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

0.4s + 0.4s + 0.3s / ease-out + cubic-bezier

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

/tg.

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

0.3s / ease / CSS transitions

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

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

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

3s / linear / infinite / clip-path + skew + color offset

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

/tg.

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

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

/tg.

1.5s / comparativo visual de curvas

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)

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