Initial commit

components/magicui/aurora-text.tsx

@@ -0,0 +1,40 @@
+import React, { memo } from 'react';
+import { cn } from '@/lib/utils';
+
+interface AuroraTextProps {
+  children: React.ReactNode;
+  className?: string;
+  colors?: string[];
+  speed?: number;
+}
+
+export const AuroraText = memo(
+  ({
+    children,
+    className,
+    colors = ['#FF0080', '#7928CA', '#0070F3', '#38bdf8'],
+    speed = 1,
+  }: AuroraTextProps) => {
+    const animationDuration = `${10 / speed}s`;
+
+    const gradientStyle = {
+      backgroundImage: `linear-gradient(90deg, ${colors.join(', ')}, ${colors[0]})`,
+      backgroundSize: '200% 100%',
+      WebkitBackgroundClip: 'text',
+      WebkitTextFillColor: 'transparent',
+      backgroundClip: 'text',
+      animation: `aurora-flow ${animationDuration} ease-in-out infinite`,
+    } as React.CSSProperties;
+
+    return (
+      <span className={cn('relative inline-block', className)}>
+        <span className="sr-only">{children}</span>
+        <span className="relative" style={gradientStyle} aria-hidden="true">
+          {children}
+        </span>
+      </span>
+    );
+  }
+);
+
+AuroraText.displayName = 'AuroraText';

components/magicui/blur-fade.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useRef, useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+interface BlurFadeProps {
+  children: React.ReactNode;
+  className?: string;
+  duration?: number;
+  delay?: number;
+  inView?: boolean;
+}
+
+export function BlurFade({
+  children,
+  className,
+  duration = 0.4,
+  delay = 0,
+  inView = false,
+}: BlurFadeProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(!inView);
+
+  useEffect(() => {
+    if (!inView) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(entry.target);
+        }
+      },
+      { threshold: 0.1, rootMargin: '-50px' }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [inView]);
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        isVisible ? 'opacity-100 blur-none' : 'opacity-0 blur-sm',
+        className
+      )}
+      style={{
+        animation: isVisible
+          ? `blur-fade ${duration}s ease-out ${delay}s forwards`
+          : 'none',
+      }}
+    >
+      {children}
+    </div>
+  );
+}