# Fronteira Um portal de ficção científica com núcleo de luz, anéis, cristais flutuantes e poeira estelar, girando no espaço. > Fronteira é uma cena 3D do THM Componentes, feita com Three.js, que monta um portal de ficção científica: núcleo de luz, anéis inclinados, espirais finas, cristais flutuantes e poeira estelar, tudo com brilho de pós-processamento e girando devagar. A câmera pode ser arrastada, e duas ações disparam uma onda de luz e trocam as cores. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, postprocessing, Three.js - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/fronteira/ ## 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 ```text 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. ## Componentes relacionados - [Voragem](https://vibecode.thmtecnologia.com/componentes/voragem/): Um anel de luz laranja e azul gira em volta de um centro escuro, como um buraco negro engolindo poeira cósmica. - [Abismo](https://vibecode.thmtecnologia.com/componentes/abismo/): Anéis e linhas finas formam um túnel que afunila para um ponto, com uma coluna de luz colorida no centro. - [Gude](https://vibecode.thmtecnologia.com/componentes/gude/): Uma bola de vidro com um redemoinho de tinta índigo e ciano dentro, que gira devagar sobre um chão claro. - [Alvoroço](https://vibecode.thmtecnologia.com/componentes/alvoroco/): Milhares de partículas coloridas e brilhantes giram em enxame em volta de um ponto que segue o mouse. - [Asfalto](https://vibecode.thmtecnologia.com/componentes/asfalto/): Uma estrada noturna com rastros de faróis passando em alta velocidade, que acelera quando você segura o clique. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.