feat: add ray and spotlight

This commit is contained in:
Li Xin 2025-04-28 17:32:13 +08:00
parent e3b9beeefd
commit 78b10ec066
3 changed files with 59 additions and 0 deletions

View File

@ -0,0 +1,44 @@
export function Ray() {
return (
<svg
className="animate-spotlight pointer-events-none fixed -top-80 left-0 z-[99] h-[169%] w-[138%] opacity-0 md:-top-20 md:left-60 lg:w-[84%]"
viewBox="0 0 3787 2842"
fill="none"
>
<g filter="url(#filter)">
<ellipse
cx="1924.71"
cy="273.501"
rx="1924.71"
ry="273.501"
transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
fill="white"
fillOpacity="0.21"
></ellipse>
</g>
<defs>
<filter
id="filter"
x="0.860352"
y="0.838989"
width="3785.16"
height="2840.26"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
></feBlend>
<feGaussianBlur
stdDeviation="151"
result="effect1_foregroundBlur_1065_8"
></feGaussianBlur>
</filter>
</defs>
</svg>
);
}

View File

@ -27,6 +27,8 @@ import { BentoGrid } from "~/components/magicui/bento-grid";
import { FlickeringGrid } from "~/components/magicui/flickering-grid"; import { FlickeringGrid } from "~/components/magicui/flickering-grid";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { Ray } from "./_components/ray";
export default function HomePage() { export default function HomePage() {
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
@ -38,6 +40,7 @@ export default function HomePage() {
<JoinCommunitySection /> <JoinCommunitySection />
</main> </main>
<Footer /> <Footer />
<Ray />
</div> </div>
); );
} }

View File

@ -18,6 +18,18 @@
opacity: 1; opacity: 1;
} }
} }
--animate-spotlight: spotlight 2s ease 0.75s 1 forwards;
@keyframes spotlight {
0% {
opacity: 0;
transform: translate(-72%, -62%) scale(0.5);
}
to {
opacity: 1;
transform: translate(-50%, -40%) scale(1);
}
}
} }
@theme inline { @theme inline {