Texto que Amanhece Ultra

Sobre este efeito

O sol nasce à esquerda de um título e atravessa o céu por trás dele. A luz chega letra a letra, da esquerda pra direita: cada letra acorda, sai da cor da noite pra cor do texto e ganha um fio de luz na borda virada pro sol. Cada letra tem uma sombra deitada no chão, a própria letra virada pra baixo, esticada e inclinada pra longe do sol: comprida quando ele está baixo, curta quando está alto, sumindo na ponta. O chão em volta do sol se ilumina, então as sombras aparecem mesmo em fundo escuro. Depois de nascer, o sol segue o mouse, ou o dedo arrastando no celular, e as sombras giram ao vivo; sem mouse, ele continua andando devagar pelo céu. O leitor de tela lê o texto original. Com a preferência de menos movimento, o dia já está feito e nada se mexe. Tempo do nascer, comprimento e cor das sombras, altura final do sol, brilho, cor da noite, seguir o mouse e passeio ajustáveis. JavaScript e CSS puros, sem biblioteca.

Ficha

Categoria

Texto

Onde combina

topo (hero), recursos

Alcance

Área: vive dentro de um bloco da página.

Plano

Exclusivo do Ultra (R$ 39,90/mês) até 26/10/2026; depois entra no Plus.

Peso

7,4 KB de código comprimido. Sem biblioteca externa.

No celular

Mais pesado: usa 47% do processador de um celular intermediário enquanto anima.

Na loja desde

26/09/2026

Como colocar no seu site

1. Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-texto-que-amanhece.

Assuntos

• texto
• título
• tipografia
• sol
• nascer do sol
• amanhecer
• sombra
• sombra longa
• luz
• entrada
• mouse
• cursor