Como ele é
Parece um daqueles selos redondos de rótulo, com a frase escrita em volta da borda, só que girando. As letras ficam distribuídas em intervalos iguais num círculo, cada uma com o topo voltado para fora, e um espaço extra separa o fim da frase do começo. O anel completa uma volta a cada dez segundos por padrão, num ritmo constante, sem acelerar nem frear, e pode girar no sentido contrário. O raio é medido em caracteres, então o círculo cresce junto com a fonte. O centro do anel fica vazio, livre para um ícone ou uma seta que você posicionar ali.
Você pode estar procurando isto se pediu algo assim
- texto girando em volta de um círculo do lado do botão
- selo redondo que fica rodando com uma frase escrita na borda
- aquele carimbo giratório tipo 'role para baixo' dos sites de agência
- frase em círculo girando em cima da foto do produto
- badge rotativo com o nome da marca ao redor do logo
- palavras rodando em roda para dar movimento ao topo do site
Também chamado de
- carimbo giratório
- texto circular
- texto em círculo girando
- rotating text badge
- circular text animation
- selo giratório
Quando usar
- Selo ao lado de uma chamada para ação, como 'role para ver' ou 'saiba mais'
- Detalhe em volta de um logo, avatar ou foto de produto
- Portfólios e sites de agência que pedem um toque editorial
- Banners de lançamento com uma frase curta repetida
Quando evitar
- Frases longas, que deixam as letras apertadas e difíceis de ler
- Informação importante, porque texto em movimento circular é lido com esforço
Como pedir para a sua IA
Crie um selo de texto circular girando ao lado do botão principal da página: a frase em volta de um círculo, rotação lenta e contínua, cores da minha marca, rótulo acessível com a frase inteira e versão parada para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Roseta
Como deixar Roseta mais rápido, mais lento ou girando ao contrário?
Roseta tem uma prop de duração, que define quantos segundos o anel leva para dar uma volta, dez por padrão, e uma prop reverse, que inverte o sentido. Também dá para mudar o raio, medido em caracteres, para abrir ou fechar o círculo conforme o tamanho da frase.
O leitor de tela lê a frase de Roseta?
No código original de Roseta, cada letra é um elemento separado e não há um rótulo com a frase inteira, então alguns leitores de tela podem soletrar. Vale pedir à IA um aria-label com o texto completo e marcar as letras como decorativas.
Dá para colocar um ícone no meio de Roseta?
Sim, com um pequeno ajuste de layout. Roseta desenha só o anel de letras e deixa o centro vazio; para ter uma seta, um logo ou uma foto no meio, peça à IA para posicionar esse elemento no mesmo ponto central do anel.
