Components
Loading preview...
Card background stars that animate on hover and animate anyway
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/glowing-background-stars-card"use client";
import React from "react";
import {
GlowingStarsBackgroundCard,
GlowingStarsDescription,
GlowingStarsTitle,
} from "@/components/ui/glowing-background-stars-card";
export function GlowingStarsBackgroundCardPreview() {
return (
<div className="flex py-20 items-center justify-center antialiased">
<GlowingStarsBackgroundCard>
<GlowingStarsTitle>Next.js 14</GlowingStarsTitle>
<div className="flex justify-between items-end">
<GlowingStarsDescription>
The power of full-stack to the frontend. Read the release notes.
</GlowingStarsDescription>
<div className="h-8 w-8 rounded-full bg-[hsla(0,0%,100%,.1)] flex items-center justify-center">
<Icon />
</div>
</div>
</GlowingStarsBackgroundCard>
</div>
);
}
const Icon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="h-4 w-4 text-white stroke-2"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
/>
</svg>
);
};