# Fronteira A science fiction portal with a core of light, rings, floating crystals and stardust, turning in deep space. > Fronteira is a 3D scene from THM Componentes, built with Three.js, that assembles a science fiction portal: a core of light, tilted rings, thin spirals, floating crystals and stardust, all glowing through post-processing and turning slowly. You can drag the camera around, and two actions fire a wave of light and swap the colors. - Category: Backgrounds and atmospheres - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Heavy: WebGL or simulation; one per page, loaded on demand - Technology: Vue 3, TypeScript, Tailwind CSS v4, WebGL, postprocessing, Three.js - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/fronteira/ ## What it looks like It looks like a sci-fi movie portal floating in deep space. In the center glows a rippling core of light that shifts between purple and blue, surrounded by thin tilted rings, spirals of light rising in a helix and a large purple hoop framing it all. Red, blue, purple and green faceted crystals float around it, among green dust and distant stars, inside a translucent sphere with a green rim. Everything turns slowly and the camera circles on its own; dragging rotates the view and the scroll wheel zooms in or out. Two functions, wired to buttons in the demo, fire a wave of light and pick new colors. ## You may be looking for this if you asked for something like - “a glowing 3D portal spinning in the page background” - “that sci-fi portal with rings and floating crystals” - “a 3D space scene for an event opener” - “an AI product background with an energy core in the center” - “something like a stargate I can rotate by dragging with the mouse” - “a dimensional portal effect with a button to activate it” ## Also known as glowing energy portal, 3D portal, dimensional portal, sci-fi portal, Three.js portal, 3D space scene ## When to use - An opener for a tech event, hackathon or conference - An AI product landing page that wants a striking centerpiece - A feature or launch page with little text - Interactive experiences where visitors explore the scene by dragging ## When to avoid - Scrolling page backgrounds, since the wheel over the scene zooms the camera instead of scrolling - Pages that already run another WebGL effect - Audiences that browse mostly on old phones ## How to ask your AI ```text Create a Three.js 3D scene of a sci-fi portal for the event opener: a core of light, rings and crystals in my brand colors, a soft glow, scroll wheel zoom turned off, pausing when off screen and a static image for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Fronteira ### Can Fronteira be the background of a scrolling page? Yes, with one change. Fronteira uses orbit controls: dragging rotates the camera and the mouse wheel zooms in or out, so over the scene the wheel does not scroll the page. To use it as a background, ask your AI to turn off zoom or all interaction and keep only the auto rotation. ### Does Fronteira do anything besides rotating the camera? Yes. Fronteira exposes two functions you can wire to buttons, as in the demo: activatePortal sends a wave of light from the center through the rings and crystals, with a flash in the core, and shiftDimensions picks new colors from an eight-color palette and rebuilds the scene. The base colors come from the primaryColor, secondaryColor, accentColor and vortexColor props. ### Is Fronteira heavy? It is rated Heavy in THM Componentes. Fronteira uses Three.js with bloom and anti-aliasing post-processing, thousands of particles updated every frame, and it does not pause by itself off screen. The prompt tells your AI to load it on demand, pause it outside the viewport and keep one heavy WebGL effect per page. ## Related components - [Voragem](https://vibecode.thmtecnologia.com/en/components/voragem/): A ring of orange and blue light spins around a dark center, like a black hole pulling in cosmic dust. - [Abismo](https://vibecode.thmtecnologia.com/en/components/abismo/): Thin rings and lines form a tunnel that narrows to a point, with a column of colored light in the middle. - [Gude](https://vibecode.thmtecnologia.com/en/components/gude/): A glass ball with an indigo and cyan ink swirl inside, slowly turning over a light floor. - [Alvoroço](https://vibecode.thmtecnologia.com/en/components/alvoroco/): Thousands of bright, colorful particles swirl as a swarm around a point that follows the mouse. - [Asfalto](https://vibecode.thmtecnologia.com/en/components/asfalto/): A night highway with streaks of headlights rushing past, speeding up while you hold the click. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).