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
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.
