supermemory/apps/web/app/onboarding/floating-orbs.tsx

"use client";

import { motion, useReducedMotion } from "motion/react";
import { useEffect, useMemo, useState, memo } from "react";
import { useOnboarding } from "./onboarding-context";

interface OrbProps {
    size: number;
    initialX: number;
    initialY: number;
    duration: number;
    delay: number;
    revealDelay: number;
    shouldReveal: boolean;
    color: {
        primary: string;
        secondary: string;
        tertiary: string;
    };
}

function FloatingOrb({ size, initialX, initialY, duration, delay, revealDelay, shouldReveal, color }: OrbProps) {
    const blurPixels = Math.min(64, Math.max(24, Math.floor(size * 0.08)));

    const gradient = useMemo(() => {
        return `radial-gradient(circle, ${color.primary} 0%, ${color.secondary} 40%, ${color.tertiary} 70%, transparent 100%)`;
    }, [color.primary, color.secondary, color.tertiary]);

    const style = useMemo(() => {
        return {
            width: size,
            height: size,
            background: gradient,
            filter: `blur(${blurPixels}px)`,
            willChange: "transform, opacity",
            mixBlendMode: "plus-lighter",
        } as any;
    }, [size, gradient, blurPixels]);

    const initial = useMemo(() => {
        return {
            x: initialX,
            y: initialY,
            scale: 0,
            opacity: 0,
        };
    }, [initialX, initialY]);

    const animate = useMemo(() => {
        if (!shouldReveal) {
            return {
                x: initialX,
                y: initialY,
                scale: 0,
                opacity: 0,
            };
        }
        return {
            x: [initialX, initialX + 200, initialX - 150, initialX + 100, initialX],
            y: [initialY, initialY - 180, initialY + 120, initialY - 80, initialY],
            scale: [0.8, 1.2, 0.9, 1.1, 0.8],
            opacity: 0.7,
        };
    }, [shouldReveal, initialX, initialY]);

    const transition = useMemo(() => {
        return {
            x: {
                duration: shouldReveal ? duration : 0,
                repeat: shouldReveal ? Number.POSITIVE_INFINITY : 0,
                ease: [0.42, 0, 0.58, 1],
                delay: shouldReveal ? delay + revealDelay : 0,
            },
            y: {
                duration: shouldReveal ? duration : 0,
                repeat: shouldReveal ? Number.POSITIVE_INFINITY : 0,
                ease: [0.42, 0, 0.58, 1],
                delay: shouldReveal ? delay + revealDelay : 0,
            },
            scale: {
                duration: shouldReveal ? duration : 0.8,
                repeat: shouldReveal ? Number.POSITIVE_INFINITY : 0,
                ease: shouldReveal ? [0.42, 0, 0.58, 1] : [0, 0, 0.58, 1],
                delay: shouldReveal ? delay + revealDelay : revealDelay,
            },
            opacity: {
                duration: 1.2,
                ease: [0, 0, 0.58, 1],
                delay: shouldReveal ? revealDelay : 0,
            },
        } as any;
    }, [shouldReveal, duration, delay, revealDelay]);

    return (
        <motion.div
            className="absolute rounded-full"
            style={style}
            initial={initial}
            animate={animate}
            transition={transition}
        />
    );
}

const MemoFloatingOrb = memo(FloatingOrb);

export function FloatingOrbs() {
    const { orbsRevealed } = useOnboarding();
    const reduceMotion = useReducedMotion();
    const [mounted, setMounted] = useState(false);
    const [orbs, setOrbs] = useState<Array<{
        id: number;
        size: number;
        initialX: number;
        initialY: number;
        duration: number;
        delay: number;
        revealDelay: number;
        color: {
            primary: string;
            secondary: string;
            tertiary: string;
        };
    }>>([]);

    useEffect(() => {
        setMounted(true);

        const screenWidth = typeof window !== "undefined" ? window.innerWidth : 1200;
        const screenHeight = typeof window !== "undefined" ? window.innerHeight : 800;

        // Define edge zones (avoiding center)
        const edgeThickness = Math.min(screenWidth, screenHeight) * 0.25; // 25% of smaller dimension

        // Define rainbow color palette
        const colorPalette = [
            { // Magenta
                primary: "rgba(255, 0, 150, 0.6)",
                secondary: "rgba(255, 100, 200, 0.4)",
                tertiary: "rgba(255, 150, 220, 0.1)"
            },
            { // Yellow
                primary: "rgba(255, 235, 59, 0.6)",
                secondary: "rgba(255, 245, 120, 0.4)",
                tertiary: "rgba(255, 250, 180, 0.1)"
            },
            { // Light Blue
                primary: "rgba(100, 181, 246, 0.6)",
                secondary: "rgba(144, 202, 249, 0.4)",
                tertiary: "rgba(187, 222, 251, 0.1)"
            },
            { // Orange (keeping original)
                primary: "rgba(255, 154, 0, 0.6)",
                secondary: "rgba(255, 206, 84, 0.4)",
                tertiary: "rgba(255, 154, 0, 0.1)"
            },
            { // Very Light Red/Pink
                primary: "rgba(255, 138, 128, 0.6)",
                secondary: "rgba(255, 171, 145, 0.4)",
                tertiary: "rgba(255, 205, 210, 0.1)"
            }
        ];

        // Generate orb configurations positioned along edges
        const newOrbs = Array.from({ length: 8 }, (_, i) => {
            let x: number;
            let y: number;
            const zone = i % 4; // Rotate through 4 zones: top, right, bottom, left

            switch (zone) {
                case 0: // Top edge
                    x = Math.random() * screenWidth;
                    y = Math.random() * edgeThickness;
                    break;
                case 1: // Right edge  
                    x = screenWidth - edgeThickness + Math.random() * edgeThickness;
                    y = Math.random() * screenHeight;
                    break;
                case 2: // Bottom edge
                    x = Math.random() * screenWidth;
                    y = screenHeight - edgeThickness + Math.random() * edgeThickness;
                    break;
                case 3: // Left edge
                    x = Math.random() * edgeThickness;
                    y = Math.random() * screenHeight;
                    break;
                default:
                    x = Math.random() * screenWidth;
                    y = Math.random() * screenHeight;
            }

            return {
                id: i,
                size: Math.random() * 300 + 200, // 200px to 500px
                initialX: x,
                initialY: y,
                duration: Math.random() * 20 + 15, // 15-35 seconds (longer for more gentle movement)
                delay: i * 0.4, // Staggered start for floating animation
                revealDelay: i * 0.2, // Faster staggered reveal
                color: colorPalette[i % colorPalette.length]!, // Cycle through rainbow colors
            };
        });

        setOrbs(newOrbs);
    }, []);

    if (!mounted || orbs.length === 0) return null;

    return (
        <div
            className="fixed inset-0 pointer-events-none overflow-hidden"
            style={{ isolation: "isolate", contain: "paint" }}
        >
            {orbs.map((orb) => (
                <MemoFloatingOrb
                    key={orb.id}
                    size={orb.size}
                    initialX={orb.initialX}
                    initialY={orb.initialY}
                    duration={reduceMotion ? 0 : orb.duration}
                    delay={orb.delay}
                    revealDelay={orb.revealDelay}
                    shouldReveal={reduceMotion ? false : orbsRevealed}
                    color={orb.color}
                />
            ))}
        </div>
    );
}