"use client" import * as React from "react" import { motion, useReducedMotion } from "framer-motion" import { cn } from "@/lib/utils" /* ================================================================== */ /* PLACEHOLDER EFFECTS */ /* */ /* These are visual stand-ins for complex animations that would */ /* make this landing page truly next-level. Each has a TODO with */ /* what the ideal implementation would be. */ /* */ /* Swap these out with real implementations when ready: */ /* - Aceternity UI meteors, lamp effect, 3D card tilt */ /* - ReactBits magnet buttons, blob cursor */ /* - Three.js / WebGL particle fields */ /* - Lottie animations for micro-interactions */ /* ================================================================== */ /* ------------------------------------------------------------------ */ /* Meteors — streaking lines across a section background */ /* ------------------------------------------------------------------ */ export interface MeteorsProps { /** Number of meteor streaks. Default 12. */ count?: number className?: string } /** * TODO: PLACEHOLDER — Replace with full Aceternity-style meteors. * * Ideal implementation: * - Random angle (15-35deg), random speed, random length * - Glowing head with fading tail (gradient + blur) * - Random spawn position along top/right edge * - Staggered infinite loop with randomized delays * - Optional: color variants (brand, white, mixed) * * Current: Simple CSS-animated diagonal lines as a preview. */ // Pre-computed deterministic values to avoid hydration mismatch const METEOR_SEEDS = [ { top: 12, left: 15, w: 65, o: 0.22, dur: 2.1, delay: 0.3 }, { top: -5, left: 42, w: 90, o: 0.18, dur: 3.0, delay: 1.8 }, { top: 28, left: 68, w: 55, o: 0.25, dur: 1.8, delay: 3.2 }, { top: 45, left: 25, w: 78, o: 0.20, dur: 2.5, delay: 0.9 }, { top: 8, left: 88, w: 48, o: 0.30, dur: 2.8, delay: 2.5 }, { top: 35, left: 55, w: 100, o: 0.16, dur: 1.6, delay: 4.1 }, { top: 50, left: 10, w: 72, o: 0.23, dur: 3.2, delay: 1.2 }, { top: 18, left: 78, w: 60, o: 0.19, dur: 2.3, delay: 3.8 }, { top: 40, left: 35, w: 85, o: 0.28, dur: 1.9, delay: 0.5 }, { top: 2, left: 60, w: 70, o: 0.17, dur: 2.7, delay: 2.0 }, { top: 22, left: 92, w: 50, o: 0.24, dur: 3.4, delay: 4.5 }, { top: 48, left: 48, w: 95, o: 0.21, dur: 2.0, delay: 1.5 }, ] export function Meteors({ count = 12, className }: MeteorsProps) { const reduced = useReducedMotion() if (reduced) return null return ( ) } /* ------------------------------------------------------------------ */ /* 3D Tilt Card — perspective transform on hover */ /* ------------------------------------------------------------------ */ export interface TiltCardProps extends React.HTMLAttributes { /** Max tilt angle in degrees. Default 8. */ maxTilt?: number } /** * TODO: PLACEHOLDER — Replace with full ReactBits-style 3D tilt. * * Ideal implementation: * - Smooth requestAnimationFrame-based perspective transform * - Specular highlight layer that moves with the tilt * - Depth layers — children at different z-depths for parallax * - Spring physics for settle animation on mouse leave * - Gyroscope support on mobile devices * * Current: Simple CSS perspective + hover scale. */ export function TiltCard({ maxTilt: _maxTilt = 8, className, children, ...props }: TiltCardProps) { const ref = React.useRef(null) const [transform, setTransform] = React.useState("") function handleMouseMove(e: React.MouseEvent) { if (!ref.current) return const rect = ref.current.getBoundingClientRect() const x = (e.clientX - rect.left) / rect.width - 0.5 const y = (e.clientY - rect.top) / rect.height - 0.5 setTransform(`perspective(800px) rotateX(${-y * 8}deg) rotateY(${x * 8}deg) scale3d(1.02, 1.02, 1.02)`) } function handleMouseLeave() { setTransform("") } return (

{children}

) } /* ------------------------------------------------------------------ */ /* Particle Field — ambient floating dots */ /* ------------------------------------------------------------------ */ export interface ParticleFieldProps { /** Number of particles. Default 30. */ count?: number className?: string } /** * TODO: PLACEHOLDER — Replace with Canvas/WebGL particle system. * * Ideal implementation: * - HTML Canvas or Three.js particle system * - Particles connected by lines when close together * - Mouse repulsion / attraction physics * - Depth-of-field blur on distant particles * - Color gradient from brand to muted * - 60fps with GPU acceleration * * Current: Simple CSS-animated floating dots as a preview. */ // Pre-computed particle positions to avoid hydration mismatch const PARTICLE_SEEDS = Array.from({ length: 30 }, (_, i) => ({ size: 1.5 + (((i * 7 + 3) % 11) / 11) * 2, top: ((i * 31 + 17) % 100), left: ((i * 47 + 23) % 100), opacity: 0.1 + (((i * 13 + 5) % 10) / 10) * 0.2, dy: -20 + (((i * 19 + 7) % 20) / 20) * 40, dx: -10 + (((i * 23 + 11) % 20) / 20) * 20, dur: 6 + (((i * 29 + 3) % 10) / 10) * 8, delay: ((i * 37 + 13) % 40) / 10, })) export function ParticleField({ count = 30, className }: ParticleFieldProps) { const reduced = useReducedMotion() if (reduced) return null return ( ) } /* ------------------------------------------------------------------ */ /* Lamp Effect — dramatic top-down light cone */ /* ------------------------------------------------------------------ */ export interface LampEffectProps { className?: string children?: React.ReactNode } /** * TODO: PLACEHOLDER — Replace with full Aceternity lamp effect. * * Ideal implementation: * - SVG or Canvas-based conical gradient light source * - Animated light cone that expands on scroll-in * - Volumetric light rays with noise texture * - Subtle lens flare at the source point * - Content fades in as the "light" reveals it * * Current: CSS radial gradient that fades in, approximating the cone. */ export function LampEffect({ className, children }: LampEffectProps) { const reduced = useReducedMotion() return (

{/* Light cone approximation */}

) } /* ------------------------------------------------------------------ */ /* Magnetic Button — subtle cursor attraction */ /* ------------------------------------------------------------------ */ export interface MagneticProps extends React.HTMLAttributes { /** Magnetic strength. Default 0.3 (30% of distance). */ strength?: number } /** * TODO: PLACEHOLDER — Replace with full ReactBits magnetic effect. * * Ideal implementation: * - GSAP or spring-physics based smooth interpolation * - Configurable attraction radius and falloff curve * - Child content moves independently of container (inner parallax) * - Touch-friendly with optional haptic feedback * * Current: Simple transform offset on mouse move. */ export function Magnetic({ strength = 0.3, className, children, ...props }: MagneticProps) { const ref = React.useRef(null) const [offset, setOffset] = React.useState({ x: 0, y: 0 }) function handleMouseMove(e: React.MouseEvent) { if (!ref.current) return const rect = ref.current.getBoundingClientRect() const centerX = rect.left + rect.width / 2 const centerY = rect.top + rect.height / 2 setOffset({ x: (e.clientX - centerX) * strength, y: (e.clientY - centerY) * strength, }) } function handleMouseLeave() { setOffset({ x: 0, y: 0 }) } return (

{children}

) }

EffectPlaceholders

EffectPlaceholders