Glowing Stars Effect
Matrix-style grid of stars that glow and animate on hover.
Preview
Glowing Stars Effect
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Feature cards and interactive highlight areas.
Why this component matters
The hover interaction rewards curiosity — stars respond to the user's presence.
Usage guidance
Use inside a card component. The star grid fills the top section while content sits below. Dark backgrounds only.
Installation
bash
npx shadcn@latest add @aceternity/glowing-stars-effectUsage
example.tsxtsx
import { GlowingStarsEffect } from "@/components/ui/glowing-stars-effect";
export default function Example() {
return (
<GlowingStarsEffect>
{/* Your content here */}
</GlowingStarsEffect>
);
}Source
glowing-stars-effect.tsx
components/ui/glowing-stars-effect.tsx