hera.bloom.
Entrar
Voltar à galeria

Orb de Assistente de Voz

Esfera de gradiente fluido que respira, emite ondas ao falar e alterna entre ouvir, pensar e falar.

CSS / TailwindIA & FuturistaMédio
Preview ao vivoInterativo
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="cena">
      <div class="halo"></div>
      <div class="ondas">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="orb">
        <span class="fluido"></span>
        <span class="especular"></span>
      </div>
      <div class="estados">
        <span class="estado e1">Ouvindo&hellip;</span>
        <span class="estado e2">Pensando&hellip;</span>
        <span class="estado e3">Falando&hellip;</span>
      </div>
      <p class="marca">✦ Lumen IA &middot; assistente de voz</p>
    </div>
  </body>
</html>

Efeitos relacionados

carregando

Nós de uma rede neural pulsando em canvas, com sinais de luz viajando pelas conexões.

Rede Neural Viva

CSS / Tailwind

Nós de uma rede neural pulsando em canvas, com sinais de luz viajando pelas conexões.

carregando

Barras simétricas dançando a partir do centro com gradiente, alternando entre escuta ativa e mudo.

Waveform de Voz

CSS / Tailwind

Barras simétricas dançando a partir do centro com gradiente, alternando entre escuta ativa e mudo.

carregando

Rosto minimalista de assistente: olhos que piscam, seguem um alvo e mudam de forma com a emoção.

Avatar de Olhos Expressivos

CSS / Tailwind

Rosto minimalista de assistente: olhos que piscam, seguem um alvo e mudam de forma com a emoção.