diff --git a/src/app/globals.css b/src/app/globals.css index 1ca0f56..4b6271d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -9,6 +9,18 @@ } @layer utilities { + @keyframes spinner { + 100% { + transform: rotate(360deg) + } + } + + @keyframes spinner-reverse { + 100% { + transform: rotate(-360deg) + } + } + .gradient { @apply bg-gradient-to-br from-slate-950 via-red-700 to-yellow-400; } diff --git a/src/components/stars.tsx b/src/components/stars.tsx index 119017f..2f3e6aa 100644 --- a/src/components/stars.tsx +++ b/src/components/stars.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useState } from "react"; +import { CSSProperties, HTMLAttributes, useEffect, useState } from "react"; type Props = { count: number; @@ -18,23 +18,57 @@ const Stars = ({ count }: Props) => { return `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, ${alpha})` } + const star = (key?: number) => { + const radius = `${Math.random() * 7}px` + let style: CSSProperties = { + background: `radial-gradient(circle, ${randomRgba(1)} 0%, ${randomRgba(0)} 100%)`, + width: radius, + height: radius, + transform: "translate(-50%)", + animation: "spinner 5s linear infinite" + }; + if (key) { + style = { + ...style, + left: Math.random() * width, + top: Math.random() * height + } + } + return ( +