Como ele é
Parece o portal de um filme de ficção científica flutuando no espaço profundo. No centro brilha um núcleo de luz que ondula e alterna entre roxo e azul, cercado por anéis finos inclinados, espirais de luz que sobem em hélice e um grande aro roxo que serve de moldura. Cristais facetados vermelhos, azuis, roxos e verdes flutuam ao redor, entre poeira verde e estrelas distantes, dentro de uma esfera translúcida de borda verde. Tudo gira devagar e a câmera dá voltas sozinha; arrastar gira a vista e a rodinha aproxima ou afasta. Duas funções, ligadas a botões na demo, disparam uma onda de luz e sorteiam novas cores.
Você pode estar procurando isto se pediu algo assim
- portal 3D brilhante girando no fundo da página
- aquele portal de ficção científica com anéis e cristais flutuando
- cena espacial em 3D para a abertura de um evento
- fundo de produto de IA com um núcleo de energia no centro
- algo tipo stargate que dá para girar arrastando com o mouse
- efeito de portal dimensional com botão para ativar
Também chamado de
- portal de ficção científica
- portal 3D
- portal de energia
- portal dimensional
- Three.js portal
- cena espacial 3D
- sci-fi portal
Quando usar
- Abertura de evento, hackathon ou conferência com tema de tecnologia
- Landing de produto de IA que quer uma peça central de impacto
- Página de destaque ou de lançamento com pouco texto
- Experiências interativas em que o visitante explora a cena arrastando
Quando evitar
- Fundo de página com rolagem, porque a rodinha sobre a cena aproxima a câmera em vez de rolar
- Páginas que já têm outro efeito em WebGL
- Público que acessa principalmente por celulares antigos
Como pedir para a sua IA
Crie uma cena 3D com Three.js de um portal cósmico na abertura do evento: núcleo de luz, anéis e cristais nas cores da minha marca, brilho suave, zoom pela rodinha desativado, pausa fora da tela e imagem estática para movimento reduzido.
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 Fronteira
Dá para usar Fronteira como fundo de uma página que rola?
Dá, com um ajuste. Fronteira usa controles de órbita: arrastar gira a câmera e a rodinha do mouse aproxima ou afasta, então sobre a cena a rodinha não rola a página. Para usar como fundo, peça à IA para desligar o zoom ou toda a interação e deixar só a rotação automática.
Fronteira tem alguma interação além de girar a câmera?
Tem. Fronteira expõe duas funções que você liga a botões, como na demo: activatePortal dispara uma onda de luz que sai do centro e passa pelos anéis e cristais, com um clarão no núcleo, e shiftDimensions sorteia novas cores numa paleta de oito tons e remonta a cena. As cores base vêm das props primaryColor, secondaryColor, accentColor e vortexColor.
Fronteira pesa muito?
Sim, tem a classificação Pesado no THM Componentes. Fronteira usa Three.js com brilho e antisserrilhado em pós-processamento, milhares de partículas atualizadas a cada quadro, e não pausa por conta própria fora da tela. O prompt orienta a IA a carregar sob demanda, pausar fora da viewport e manter um só efeito WebGL pesado por página.
