asepharyana
bf75d9deef
Vendor 50 Aceternity UI components into components/ui from the official registry (ui.aceternity.com/registry/<slug>.json), adapted for this template's stack: Tailwind v4, motion/react 13, cn util, React 19. Add a live showcase gallery (/ui + /docs/... navigation is unchanged): app/ui/page.tsx renders <ShowcaseGallery> with 30+ demos — 3d-pin, aurora, background-beams, bento, card-stack, card-spotlight, direction-aware-hover, encrypted-text, evervault-card, flip-words, hero-highlight, hero-parallax, infinite-moving-cards, moving-border, sparkles, tracing-beam, animated-tooltip, typewriter-effect, placeholders-and-vanish-input and friends. Toolchain stays zero-warning: vendored animation code is scoped in eslint.config.mjs (react-hooks/react-compiler advisory rules, no-any, prefer-const, no-img-element) so app code keeps a 0-error gate. typecheck, build, 7 vitest tests and 2 test suites all green.
62 lines
2.9 KiB
TypeScript
62 lines
2.9 KiB
TypeScript
"use client";
|
|
import { cn } from "@/lib/utils";
|
|
import React, { ReactNode } from "react";
|
|
|
|
interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
|
|
children: ReactNode;
|
|
showRadialGradient?: boolean;
|
|
}
|
|
|
|
export const AuroraBackground = ({
|
|
className,
|
|
children,
|
|
showRadialGradient = true,
|
|
...props
|
|
}: AuroraBackgroundProps) => {
|
|
return (
|
|
<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",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<div
|
|
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%)",
|
|
|
|
"--blue-300": "#93c5fd",
|
|
"--blue-400": "#60a5fa",
|
|
"--blue-500": "#3b82f6",
|
|
"--indigo-300": "#a5b4fc",
|
|
"--violet-200": "#ddd6fe",
|
|
"--black": "#000",
|
|
"--white": "#fff",
|
|
"--transparent": "transparent",
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<div
|
|
// I'm sorry but this is what peak developer performance looks like // trigger warning
|
|
className={cn(
|
|
`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%)]`
|
|
)}
|
|
></div>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|