Components
Loading preview...
A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/spotlightimport React from "react";
import { cn } from "@/lib/utils";
import { Spotlight } from "@/components/ui/spotlight";
export function SpotlightPreview() {
return (
<div className="h-[40rem] w-full rounded-md flex md:items-center md:justify-center bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden">
<Spotlight
className="-top-40 left-0 md:left-60 md:-top-20"
fill="white"
/>
<div className=" p-4 max-w-7xl mx-auto relative z-10 w-full pt-20 md:pt-0">
<h1 className="text-4xl md:text-7xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 bg-opacity-50">
Spotlight <br /> is the new trend.
</h1>
<p className="mt-4 font-normal text-base text-neutral-300 max-w-lg text-center mx-auto">
Spotlight effect is a great way to draw attention to a specific part
of the page. Here, we are drawing the attention towards the text
section of the page. I don't know why but I'm running out of
copy.
</p>
</div>
</div>
);
}