# Pavio A card with a beam of light circling its border and a soft glow that follows the mouse inside. > Pavio is an exclusive THM Componentes component: a card where a gradient beam of light keeps circling the border while a soft glow follows the cursor inside. Built in CSS, with JavaScript only to track the pointer and pause off screen, it is rated Light and highlights the recommended plan on a pricing page. - Category: Special effects - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/pavio/ ## What it looks like Picture a white card with rounded corners and a thin border where a streak of light keeps running, like the LEDs chasing around a shop sign. The beam goes from indigo at the tail to cyan at the tip, is about 70 degrees long and completes a lap every 6 seconds, with a blurred halo just outside and inside the edge. When the mouse moves over the card, a soft light in the beam color follows the pointer. The default content is a sample pricing plan that you replace with your own. ## You may be looking for this if you asked for something like - “a light running around the border of the most popular plan card” - “a pricing card with a glowing border that spins” - “an animated outline of light moving around a card, kind of neon” - “make the recommended plan stand out on my pricing page without overdoing it” - “a card that lights up where the mouse hovers” - “a gradient border animation to draw attention to an offer” - “that glowing border effect you see on SaaS sites” ## Also known as animated border, glowing border card, conic gradient border, light trail border, rotating border glow, cursor glow card ## When to use - The recommended plan in a pricing table, next to plain cards - An offer or coupon card that needs to stand out on the page - A callout for a new feature inside a dashboard or landing page - A free trial invitation at the end of a sales page ## When to avoid - Grids full of identical cards, where the beam stops working as a highlight - Dark sites, unless you first change the card's fixed white background ## How to ask your AI ```text Create an animated border card for the recommended plan on my pricing page: a gradient beam of light in my brand colors running around the border and a soft glow following the cursor, paused when off screen and with a still border for people who prefer reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Pavio ### Will Pavio make my page heavy? No. Pavio is rated Light in THM Componentes: the beam is a conic gradient animated with CSS, and JavaScript only tracks the cursor and pauses the animation when the card leaves the screen. Still, use it on one or two cards per page so the highlight keeps its meaning. ### Can I change the colors and content of Pavio? Yes. Pavio takes the tail and tip colors of the beam, lap duration, beam length, border width, corner radius and card width as props, and the prompt tells your AI to use your project color tokens. Your own content goes in the slot, replacing the sample plan. ### Does Pavio respect reduced motion settings? Yes. When reduced motion is turned on in the system, Pavio switches off the animation and parks the beam at a fixed spot on the border, so the highlight remains. The glow that follows the cursor still works, because it only appears while the mouse moves over the card. ## Related components - [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. - [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. - [Rodopio](https://vibecode.thmtecnologia.com/en/components/rodopio/): A thin border with blue and pink light spinning around a field or button, like a neon sign. - [Luar](https://vibecode.thmtecnologia.com/en/components/luar/): A card with a soft circular glow that follows the cursor and fades when the mouse leaves. - [Pódio](https://vibecode.thmtecnologia.com/en/components/podio/): Plan cards side by side with a monthly and yearly switch, a featured plan and a full feature comparison. - [Furta-cor](https://vibecode.thmtecnologia.com/en/components/furta-cor/): A card with artwork that tilts in 3D under the mouse and shimmers with a rainbow sheen, like a rare trading card. --- 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).