lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
35 lines (32 loc) • 2 kB
JSX
import React from "react";
// Include the CSS animations as a string inside the component
const AuroraEffect = () => {
return (
<div className="min-w-full min-h-screen bg-black flex items-center justify-center overflow-hidden text-white font-sans">
<div className="text-center">
<h1 className="text-[clamp(3rem,8vw,7rem)] font-extrabold tracking-tight relative overflow-hidden">
Beautiful
<div className="absolute inset-0 z-10 mix-blend-darken pointer-events-none">
<div
className="absolute w-[60vw] h-[60vw] bg-cyan-400 rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter blur-[1rem] mix-blend-overlay animate-[aurora-border_6s_ease-in-out_infinite,aurora-1_5s_ease-in-out_infinite_alternate]"
style={{ animationName: "aurora-border, aurora-1" }}
></div>
<div
className="absolute w-[60vw] h-[60vw] bg-yellow-400 rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter blur-[1rem] mix-blend-overlay animate-[aurora-border_6s_ease-in-out_infinite,aurora-2_5s_ease-in-out_infinite_alternate]"
style={{ animationName: "aurora-border, aurora-2" }}
></div>
<div
className="absolute w-[60vw] h-[60vw] bg-green-400 rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter blur-[1rem] mix-blend-overlay animate-[aurora-border_6s_ease-in-out_infinite,aurora-3_3s_ease-in-out_infinite_alternate]"
style={{ animationName: "aurora-border, aurora-3" }}
></div>
<div
className="absolute w-[60vw] h-[60vw] bg-purple-500 rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter blur-[1rem] mix-blend-overlay animate-[aurora-border_6s_ease-in-out_infinite,aurora-4_13s_ease-in-out_infinite_alternate]"
style={{ animationName: "aurora-border, aurora-4" }}
></div>
</div>
</h1>
</div>
</div>
);
};
export default AuroraEffect;