# Rodopio A thin border with blue and pink light spinning around a field or button, like a neon sign. > Rodopio is a THM Componentes component that wraps an input, a button or a card in a thin border of neon light in two colors, blue and pink by default, that spins around it. It is pure CSS, has three modes, one of them static, and suits night themes and gamer looks. - Category: Special effects - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/rodopio/ ## What it looks like Think of the light of a neon sign running along the frame of a box. A one-pixel line outlines the content, and two slightly blurred patches of light, one blue and one reddish pink, spin around it, completing a turn every 6 seconds. There are three modes: static, with each color fixed at one end; half, the default, with spinning patches; and full, with more light covering the border. The content, such as a text input, sits on top and covers the center. The default size is that of a form field. ## You may be looking for this if you asked for something like - “a glowing neon outline around my search field” - “blue and pink light running around a button” - “a spinning neon outline for a gaming-themed site” - “make my input look like a glowing sign” - “a colorful animated border to highlight a card in dark mode” - “that glow that keeps circling the border, gamer setup style” ## Also known as spinning light border, glowing border, animated border, rotating border, animated gradient border, neon outline ## When to use - A search or sign-up field that needs to stand out - Sites with a night, gaming or tech theme - A highlight button or card on a dark page - A short lead capture form on a launch page ## When to avoid - Several elements on the same screen, where that much spinning light gets tiring - Sober brands, such as healthcare or legal, unless you tone the colors down ## How to ask your AI ```text I want an animated CSS neon outline around the search field at the top of my site: two lights in my brand colors spinning around it with a soft glow, a static version for people who prefer reduced motion and good contrast in dark mode. ``` 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 Rodopio ### Can Rodopio stay still? Yes. Rodopio has a none mode where the border stays still, with one color at each end. It works as the static version for people who prefer reduced motion, which is exactly what the THM Componentes prompt asks your AI to provide for that preference. The half and full modes spin. ### How do I change the colors and speed of Rodopio? The two colors in Rodopio are props, color1 and color2, and accept any CSS color. The length of each turn is the duration prop, in seconds, with 6 by default. The THM Componentes prompt tells your AI to use your project color tokens instead of the blue and pink. ### Do I need to set anything up in CSS for Rodopio to spin? Yes. The spin animation in Rodopio is declared in the Tailwind theme in main.css and reads the duration from a CSS variable. The component page includes the ready-made snippet, and the THM Componentes prompt asks your AI to add the catalog theme variables. Without it, the border shows but does not spin. ## Related components - [Fogo-fátuo](https://vibecode.thmtecnologia.com/en/components/fogo-fatuo/): A colored glow slowly drifts along the border of a card or input, lighting up one stretch and then another. - [Satélite](https://vibecode.thmtecnologia.com/en/components/satelite/): A small beam of colored light circles the border of a card or section, like a comet tracing the frame. - [Pavio](https://vibecode.thmtecnologia.com/en/components/pavio/): A card with a beam of light circling its border and a soft glow that follows the mouse inside. - [Cata-vento](https://vibecode.thmtecnologia.com/en/components/cata-vento/): A button with a thin rainbow border that keeps spinning around the text, softened by a slight blur. - [Girassol](https://vibecode.thmtecnologia.com/en/components/girassol/): When the mouse gets close to a card, an arc of colored light turns on along its border and rotates to face the cursor. - [Arrebol](https://vibecode.thmtecnologia.com/en/components/arrebol/): A dark button with rainbow colors running along its bottom edge and a blurred colorful glow underneath. --- 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).