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;
|
||||
}
|
||||
|
||||
main div,
|
||||
svg {
|
||||
@apply z-20;
|
||||
}
|
||||
|
||||
svg {
|
||||
@apply transition duration-200 ease-in;
|
||||
}
|
||||
|
@ -12,7 +12,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Stars />
|
||||
<Stars count={40} />
|
||||
<main>
|
||||
<Navbar />
|
||||
{children}
|
||||
|
@ -1,5 +1,43 @@
|
||||
const Stars = () => {
|
||||
return <div>heheee</div>;
|
||||
"use client";
|
||||
|
||||
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;
|
||||
|
Loading…
Reference in New Issue
Block a user