Template de site
orb-ui
Biblioteca de componentes React de IA de voz com adaptadores para Vapi, ElevenLabs, LiveKit, Pipecat, OpenAI Realtime e Gemini Live.
IA · Grátis
Páginas
Capturas da demonstração, página por página. Role dentro de cada página para vê-la inteira.
Análise do design
Uma leitura feita por IA do design deste template: cores, tipografia, espaçamento, seções e detalhes marcantes. O Ottermind parte dela quando você usa o template.
- Visão geral
página de destino, futurista, densidade média, escura
- Paleta
fundo #0a0a0a; superfícies [#101010, #eef7ff, #8bc7ff, #7fc2ff]; texto #ffffff; texto abafado #858585; primária #8bc7ff; destaques [#8bc7ff, #7fc2ff]
- Tipografia
títulos system-ui, 700, caixa de frase; corpo system-ui, 16px; escala h1 76px / h2 54px / h3 13px
- Forma e espaçamento
raio do botão 7px, raio do cartão 28px, bordas nenhuma, sombras rgba(0,0,0,0.42) 0px 34px 90px 0px, interna rgba(255,255,255,0.024) 0px 1px 0px 0px, espaçamento entre seções 80px, largura do conteúdo 1016px
- Seções (de cima para baixo)
- Cabeçalho — layout horizontal, logotipo à esquerda, navegação à direita, botão "Star on GitHub" com ícone de estrela, fundo escuro
- Hero — layout em duas colunas, título principal "Voice agent UI that feels alive." em tipo grande e negrito, subtítulo abaixo, botões CTA ("npm install orb-ui", "Read the docs"), pré-visualização ao vivo da superfície de voz com órbita animada e controles de tema, fundo escuro
- Recursos — quatro cartões de largura igual com ícones e rótulos: "7 Provider paths", "2-way Audio response", "A11y Accessible controls", "MIT Open source", fundo escuro
- Início rápido — layout em duas colunas, título "Choose your stack. Keep one component.", lista de caminhos de integração à esquerda, bloco de código à direita com destaque de sintaxe, fundo escuro
- Documentação — seção em largura total com título "Build the interface around your voice agent.", imagem da UI órbita, lista vertical de guias com setas, fundo escuro
- Rodapé — layout em três colunas, informações da marca à esquerda, links do produto no centro, recursos à direita, texto cinza claro, fundo escuro
- Detalhes marcantes
- Órbita com gradiente animado e brilho suave
- Botões interativos de alternância de tema com destaque no estado ativo
- Blocos de código com coloração de sintaxe e botão de cópia para a área de transferência
- Sombras flutuantes de cartões com destaques internos
- Predefinições sutis de movimento para o comportamento da órbita
- Tipografia limpa e minimalista com espaçamento consistente
- Outras páginas
- /docs: navegação lateral, conteúdo principal com exemplos de código e seções estruturadas, fundo escuro
- /playground: UI interativa com seletores de provedor/tema, painel de exibição de sinal, controles deslizantes de volume, saída JSON em tempo real, fundo escuro
Detalhes do template
- Categoria
- IA
- Feito com
- React
- Autor
- larsen66
- Publicado em
- 21st.dev
- Preço
- Grátis
- Voice
- AI
- React
Design original de larsen66, publicado no 21st.dev. O Ottermind não copia o código do template: ele cria um site novo a partir do briefing.
O briefing de onde o Ottermind parte
Ele abre no Studio como rascunho — acrescente sua marca, público e páginas antes de enviar.
Crie um site de IA inspirado no template "orb-ui". Brief de referência: Biblioteca de componentes React de IA de voz com adaptadores para Vapi, ElevenLabs, LiveKit, Pipecat, OpenAI Realtime e Gemini Live. Estilo e recursos a refletir: Voz, React. Use copy e imagens originais para minha marca em vez do conteúdo placeholder da referência.
Como usar este template
- 1
Clique em “Usar este template” para abri-lo no Ottermind Studio com o briefing preenchido.
- 2
Acrescente ao briefing sua marca, público, páginas e conteúdo.
- 3
O Ottermind cria um site novo inspirado neste design — continue ajustando pelo chat.
