spinning animations
This commit is contained in:
parent
bc860f1717
commit
cbfc6304f3
@ -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;
|
||||
}
|
||||
|
@ -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})`
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{Array.from({ length: count }).map((_it, i) => {
|
||||
const star = (key?: number) => {
|
||||
const radius = `${Math.random() * 7}px`
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
left: Math.random() * width,
|
||||
top: Math.random() * height,
|
||||
let style: CSSProperties = {
|
||||
background: `radial-gradient(circle, ${randomRgba(1)} 0%, ${randomRgba(0)} 100%)`,
|
||||
width: radius,
|
||||
height: radius
|
||||
}}
|
||||
height: radius,
|
||||
transform: "translate(-50%)",
|
||||
animation: "spinner 5s linear infinite"
|
||||
};
|
||||
if (key) {
|
||||
style = {
|
||||
...style,
|
||||
left: Math.random() * width,
|
||||
top: Math.random() * height
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
style={style}
|
||||
className="absolute z-10">
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const spinningStar = (key: number) => {
|
||||
const r = .1 + Math.random() * 1337
|
||||
const containerRadius = `${r}px`
|
||||
const duration = Math.floor(r) / 100;
|
||||
const x = Math.random() * width, y = Math.random() * height;
|
||||
const animation = Math.random() > .5 ? "spinner" : "spinner-reverse"
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
style={{
|
||||
left: x,
|
||||
top: y,
|
||||
width: containerRadius,
|
||||
height: containerRadius,
|
||||
animation: `${animation} ${duration}s linear infinite`
|
||||
}}
|
||||
className="absolute">
|
||||
{star()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{Array.from({ length: count }).map((_it, i) => {
|
||||
return i % 4 === 0 ? spinningStar(i) : star(i)
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user