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.
34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
"use client";
|
|
import { cn } from "@/lib/utils";
|
|
import { motion } from "motion/react";
|
|
|
|
export const Meteors = ({ number, className }: { number?: number; className?: string }) => {
|
|
const meteors = new Array(number || 20).fill(true);
|
|
return (
|
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
|
|
{meteors.map((_, idx) => {
|
|
const meteorCount = number || 20;
|
|
// Calculate position to evenly distribute meteors across container width
|
|
const position = idx * (800 / meteorCount) - 400; // Spread across 800px range, centered
|
|
|
|
return (
|
|
<span
|
|
key={"meteor" + idx}
|
|
className={cn(
|
|
"animate-meteor-effect absolute h-0.5 w-0.5 rotate-[45deg] rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]",
|
|
"before:absolute before:top-1/2 before:h-[1px] before:w-[50px] before:-translate-y-[50%] before:transform before:bg-gradient-to-r before:from-[#64748b] before:to-transparent before:content-['']",
|
|
className
|
|
)}
|
|
style={{
|
|
top: "-40px", // Start above the container
|
|
left: position + "px",
|
|
animationDelay: Math.random() * 5 + "s", // Random delay between 0-5s
|
|
animationDuration: Math.floor(Math.random() * (10 - 5) + 5) + "s", // Keep some randomness in duration
|
|
}}
|
|
></span>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
);
|
|
};
|