Glowing Effect
NewAnimated glowing border effect that traces the outline of a container.
Preview
Glowing Effect
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Featured cards and highlighted interactive elements.
Why this component matters
The glow draws attention to the boundary of an element, making it feel elevated and interactive.
Usage guidance
Apply to one or two featured cards per section, not every card. Use IO purple for the glow color. Set blur to 8-12px.
Installation
bash
npx shadcn@latest add @aceternity/glowing-effectUsage
example.tsxtsx
import { GlowingEffect } from "@/components/ui/glowing-effect";
export default function Example() {
return (
<GlowingEffect>
{/* Your content here */}
</GlowingEffect>
);
}Source
glowing-effect.tsx
components/ui/glowing-effect.tsx