spinning animations
This commit is contained in:
parent
bc860f1717
commit
cbfc6304f3
@ -9,6 +9,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@layer utilities {
|
@layer utilities {
|
||||||
|
@keyframes spinner {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spinner-reverse {
|
||||||
|
100% {
|
||||||
|
transform: rotate(-360deg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.gradient {
|
.gradient {
|
||||||
@apply bg-gradient-to-br from-slate-950 via-red-700 to-yellow-400;
|
@apply bg-gradient-to-br from-slate-950 via-red-700 to-yellow-400;
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { CSSProperties, HTMLAttributes, useEffect, useState } from "react";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
count: number;
|
count: number;
|
||||||
@ -18,23 +18,57 @@ const Stars = ({ count }: Props) => {
|
|||||||
return `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, ${alpha})`
|
return `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, ${alpha})`
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
const star = (key?: number) => {
|
||||||
<div>
|
|
||||||
{Array.from({ length: count }).map((_it, i) => {
|
|
||||||
const radius = `${Math.random() * 7}px`
|
const radius = `${Math.random() * 7}px`
|
||||||
return (
|
let style: CSSProperties = {
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
style={{
|
|
||||||
left: Math.random() * width,
|
|
||||||
top: Math.random() * height,
|
|
||||||
background: `radial-gradient(circle, ${randomRgba(1)} 0%, ${randomRgba(0)} 100%)`,
|
background: `radial-gradient(circle, ${randomRgba(1)} 0%, ${randomRgba(0)} 100%)`,
|
||||||
width: radius,
|
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">
|
className="absolute z-10">
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user