tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-10 17:26:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:17:45 +08:00
parent 08e61ce833
commit e0eb4e5975
334 changed files with 17212 additions and 12321 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/ui/aurora-background.tsx
+24 -24
View File
@@ -1,6 +1,6 @@
"use client";
import { cn } from "@/lib/utils";
import React, { ReactNode, useEffect, useState } from "react";
'use client';
import { cn } from '@/lib/utils';
import React, { ReactNode, useEffect, useState } from 'react';
interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
children: ReactNode;
@@ -21,11 +21,11 @@ export const AuroraBackground = ({
};
// Add event listener for page visibility changes
document.addEventListener("visibilitychange", handleVisibilityChange);
document.addEventListener('visibilitychange', handleVisibilityChange);
// Cleanup
return () => {
document.removeEventListener("visibilitychange", handleVisibilityChange);
document.removeEventListener('visibilitychange', handleVisibilityChange);
};
}, []);
@@ -33,32 +33,32 @@ export const AuroraBackground = ({
<main>
<div
className={cn(
"transition-bg relative flex h-[100vh] flex-col items-center justify-center bg-zinc-50 text-slate-950 dark:bg-zinc-900",
'transition-bg relative flex h-[100vh] flex-col items-center justify-center bg-zinc-50 text-slate-950 dark:bg-zinc-900',
className,
)}
{...props}
>
<div
className="absolute inset-0 overflow-hidden"
className='absolute inset-0 overflow-hidden'
style={
{
"--aurora":
"repeating-linear-gradient(100deg,#3b82f6_10%,#a5b4fc_15%,#93c5fd_20%,#ddd6fe_25%,#60a5fa_30%)",
"--dark-gradient":
"repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)",
"--white-gradient":
"repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)",
'--aurora':
'repeating-linear-gradient(100deg,#3b82f6_10%,#a5b4fc_15%,#93c5fd_20%,#ddd6fe_25%,#60a5fa_30%)',
'--dark-gradient':
'repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)',
'--white-gradient':
'repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)',
"--blue-300": "#93c5fd",
"--blue-400": "#60a5fa",
"--blue-500": "#3b82f6",
"--indigo-300": "#a5b4fc",
"--violet-200": "#ddd6fe",
"--black": "#000",
"--white": "#fff",
"--transparent": "transparent",
'--blue-300': '#93c5fd',
'--blue-400': '#60a5fa',
'--blue-500': '#3b82f6',
'--indigo-300': '#a5b4fc',
'--violet-200': '#ddd6fe',
'--black': '#000',
'--white': '#fff',
'--transparent': 'transparent',
// Hide container when page is not visible
visibility: isVisible ? "visible" : "hidden",
visibility: isVisible ? 'visible' : 'hidden',
} as React.CSSProperties
}
>
@@ -68,11 +68,11 @@ export const AuroraBackground = ({
`after:animate-aurora pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--indigo-300)_15%,var(--blue-300)_20%,var(--violet-200)_25%,var(--blue-400)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[background-attachment:fixed] after:mix-blend-difference after:content-[""] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,
showRadialGradient &&
`[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
`[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
)}
style={{
// Pause animation when page is not visible
animationPlayState: isVisible ? "running" : "paused",
animationPlayState: isVisible ? 'running' : 'paused',
}}
></div>
</div>