mirror of
https://git.mirrors.martin98.com/https://github.com/bytedance/deer-flow
synced 2025-08-19 23:19:06 +08:00
feat: add ray and spotlight
This commit is contained in:
parent
e3b9beeefd
commit
78b10ec066
44
web/src/app/_components/ray.tsx
Normal file
44
web/src/app/_components/ray.tsx
Normal 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>
|
||||
);
|
||||
}
|
@ -27,6 +27,8 @@ import { BentoGrid } from "~/components/magicui/bento-grid";
|
||||
import { FlickeringGrid } from "~/components/magicui/flickering-grid";
|
||||
import { Button } from "~/components/ui/button";
|
||||
|
||||
import { Ray } from "./_components/ray";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
@ -38,6 +40,7 @@ export default function HomePage() {
|
||||
<JoinCommunitySection />
|
||||
</main>
|
||||
<Footer />
|
||||
<Ray />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -18,6 +18,18 @@
|
||||
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 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user