some stars
This commit is contained in:
parent
159502dd00
commit
bc860f1717
@ -26,6 +26,11 @@ main {
|
|||||||
@apply flex flex-col w-full h-full bg-slate-950/95;
|
@apply flex flex-col w-full h-full bg-slate-950/95;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main div,
|
||||||
|
svg {
|
||||||
|
@apply z-20;
|
||||||
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
@apply transition duration-200 ease-in;
|
@apply transition duration-200 ease-in;
|
||||||
}
|
}
|
||||||
|
@ -12,7 +12,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body>
|
<body>
|
||||||
<Stars />
|
<Stars count={40} />
|
||||||
<main>
|
<main>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
{children}
|
{children}
|
||||||
|
@ -1,5 +1,43 @@
|
|||||||
const Stars = () => {
|
"use client";
|
||||||
return <div>heheee</div>;
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
count: number;
|
||||||
|
};
|
||||||
|
const Stars = ({ count }: Props) => {
|
||||||
|
const [width, setWidth] = useState(0);
|
||||||
|
const [height, setHeight] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setWidth(window.innerWidth);
|
||||||
|
setHeight(window.innerHeight);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const randomRgba = (alpha: number) => {
|
||||||
|
return `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, ${alpha})`
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{Array.from({ length: count }).map((_it, i) => {
|
||||||
|
const radius = `${Math.random() * 7}px`
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
style={{
|
||||||
|
left: Math.random() * width,
|
||||||
|
top: Math.random() * height,
|
||||||
|
background: `radial-gradient(circle, ${randomRgba(1)} 0%, ${randomRgba(0)} 100%)`,
|
||||||
|
width: radius,
|
||||||
|
height: radius
|
||||||
|
}}
|
||||||
|
className="absolute z-10">
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Stars;
|
export default Stars;
|
||||||
|
Loading…
Reference in New Issue
Block a user