From ede0f393030e1006fa5463394e7d1219ca74e1f3 Mon Sep 17 00:00:00 2001
From: alexf37 <122472971+alexf37@users.noreply.github.com>
Date: Wed, 1 Oct 2025 21:59:53 +0000
Subject: [PATCH] feat: new onboarding flow (#408)

This is the onboarding flow that you have all seen in my demo.
---
 apps/web/app/layout.tsx                       |  22 +-
 apps/web/app/onboarding/animated-text.tsx     |  53 ++
 apps/web/app/onboarding/bio-form.tsx          |  86 +++
 apps/web/app/onboarding/connections-form.tsx  | 213 ++++++
 apps/web/app/onboarding/extension-form.tsx    | 707 ++++++++++++++++++
 apps/web/app/onboarding/floating-orbs.tsx     | 228 ++++++
 apps/web/app/onboarding/intro.tsx             | 116 +++
 apps/web/app/onboarding/mcp-form.tsx          | 206 +++++
 apps/web/app/onboarding/name-form.tsx         |  95 +++
 apps/web/app/onboarding/nav-menu.tsx          |  44 ++
 .../web/app/onboarding/onboarding-context.tsx | 202 +++++
 apps/web/app/onboarding/onboarding-form.tsx   |  99 +++
 apps/web/app/onboarding/page.tsx              |  28 +
 apps/web/app/onboarding/progress-bar.tsx      |  26 +
 apps/web/app/onboarding/welcome.tsx           |  20 +
 apps/web/components/text-effect.tsx           | 294 ++++++++
 apps/web/components/text-morph.tsx            |  74 ++
 apps/web/package.json                         |   3 +-
 apps/web/public/images/gdrive.svg             |   8 +
 apps/web/public/images/icon-16.png            | Bin 0 -> 33814 bytes
 apps/web/public/images/notion.svg             |   4 +
 apps/web/public/images/onedrive.svg           |   1 +
 bun.lock                                      |   8 +-
 packages/lib/api.ts                           |   5 +
 packages/ui/components/carousel.tsx           |   8 +-
 packages/ui/components/hover-card.tsx         |  44 ++
 packages/ui/package.json                      |   1 +
 27 files changed, 2582 insertions(+), 13 deletions(-)
 create mode 100644 apps/web/app/onboarding/animated-text.tsx
 create mode 100644 apps/web/app/onboarding/bio-form.tsx
 create mode 100644 apps/web/app/onboarding/connections-form.tsx
 create mode 100644 apps/web/app/onboarding/extension-form.tsx
 create mode 100644 apps/web/app/onboarding/floating-orbs.tsx
 create mode 100644 apps/web/app/onboarding/intro.tsx
 create mode 100644 apps/web/app/onboarding/mcp-form.tsx
 create mode 100644 apps/web/app/onboarding/name-form.tsx
 create mode 100644 apps/web/app/onboarding/nav-menu.tsx
 create mode 100644 apps/web/app/onboarding/onboarding-context.tsx
 create mode 100644 apps/web/app/onboarding/onboarding-form.tsx
 create mode 100644 apps/web/app/onboarding/page.tsx
 create mode 100644 apps/web/app/onboarding/progress-bar.tsx
 create mode 100644 apps/web/app/onboarding/welcome.tsx
 create mode 100644 apps/web/components/text-effect.tsx
 create mode 100644 apps/web/components/text-morph.tsx
 create mode 100644 apps/web/public/images/gdrive.svg
 create mode 100644 apps/web/public/images/icon-16.png
 create mode 100644 apps/web/public/images/notion.svg
 create mode 100644 apps/web/public/images/onedrive.svg
 create mode 100644 packages/ui/components/hover-card.tsx

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index e6d9094d..8b1adc85 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Inter, JetBrains_Mono } from "next/font/google";
+import { Inter, JetBrains_Mono, Instrument_Serif } from "next/font/google";
 import "../globals.css";
 import "@ui/globals.css";
 import { AuthProvider } from "@lib/auth-context";
@@ -11,6 +11,8 @@ import { Suspense } from "react";
 import { Toaster } from "sonner";
 import { TourProvider } from "@/components/tour";
 import { MobilePanelProvider } from "@/lib/mobile-panel-context";
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+
 
 import { ViewModeProvider } from "@/lib/view-mode-context";
 
@@ -24,6 +26,12 @@ const mono = JetBrains_Mono({
 	variable: "--font-mono",
 });
 
+const serif = Instrument_Serif({
+	subsets: ["latin"],
+	variable: "--font-serif",
+	weight: ["400"],
+});
+
 export const metadata: Metadata = {
 	metadataBase: new URL("https://app.supermemory.ai"),
 	description: "Your memories, wherever you are",
@@ -38,7 +46,7 @@ export default function RootLayout({
 	return (
 		<html className="dark bg-sm-black" lang="en">
 			<body
-				className={`${sans.variable} ${mono.variable} antialiased bg-[#0f1419]`}
+				className={`${sans.variable} ${mono.variable} ${serif.variable} antialiased bg-[#0f1419] overflow-x-hidden`}
 			>
 				<AutumnProvider
 					backendUrl={
@@ -52,10 +60,12 @@ export default function RootLayout({
 								<MobilePanelProvider>
 									<PostHogProvider>
 										<ErrorTrackingProvider>
-											<TourProvider>
-												<Suspense>{children}</Suspense>
-												<Toaster richColors theme="dark" />
-											</TourProvider>
+											<NuqsAdapter>
+												<TourProvider>
+													<Suspense>{children}</Suspense>
+													<Toaster richColors theme="dark" />
+												</TourProvider>
+											</NuqsAdapter>
 										</ErrorTrackingProvider>
 									</PostHogProvider>
 								</MobilePanelProvider>
diff --git a/apps/web/app/onboarding/animated-text.tsx b/apps/web/app/onboarding/animated-text.tsx
new file mode 100644
index 00000000..c3616482
--- /dev/null
+++ b/apps/web/app/onboarding/animated-text.tsx
@@ -0,0 +1,53 @@
+'use client';
+import { useEffect } from 'react';
+import { TextEffect } from '@/components/text-effect';
+
+export function AnimatedText({ children, trigger, delay }: { children: string, trigger: boolean, delay: number }) {
+    const blurSlideVariants = {
+        container: {
+            hidden: { opacity: 0 },
+            visible: {
+                opacity: 1,
+                transition: { staggerChildren: 0.01 },
+            },
+            exit: {
+                transition: { staggerChildren: 0.01, staggerDirection: 1 },
+            },
+        },
+        item: {
+            hidden: {
+                opacity: 0,
+                filter: 'blur(10px) brightness(0%)',
+                y: 0,
+            },
+            visible: {
+                opacity: 1,
+                y: 0,
+                filter: 'blur(0px) brightness(100%)',
+                transition: {
+                    duration: 0.4,
+                },
+            },
+            exit: {
+                opacity: 0,
+                y: -30,
+                filter: 'blur(10px) brightness(0%)',
+                transition: {
+                    duration: 0.3,
+                },
+            },
+        },
+    };
+
+    return (
+        <TextEffect
+            className='inline-flex'
+            per='char'
+            variants={blurSlideVariants}
+            trigger={trigger}
+            delay={delay}
+        >
+            {children}
+        </TextEffect>
+    );
+}
diff --git a/apps/web/app/onboarding/bio-form.tsx b/apps/web/app/onboarding/bio-form.tsx
new file mode 100644
index 00000000..984309a9
--- /dev/null
+++ b/apps/web/app/onboarding/bio-form.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { Textarea } from "@ui/components/textarea";
+import { useOnboarding } from "./onboarding-context";
+import { useState } from "react";
+import { Button } from "@ui/components/button";
+import { AnimatePresence, motion } from "motion/react";
+import { NavMenu } from "./nav-menu";
+import { $fetch } from "@lib/api";
+
+export function BioForm() {
+    const [bio, setBio] = useState("");
+    const { totalSteps, nextStep, getStepNumberFor } = useOnboarding();
+
+    function handleNext() {
+        const trimmed = bio.trim();
+        if (!trimmed) {
+            nextStep();
+            return;
+        }
+
+        nextStep();
+        void $fetch("@post/memories", {
+            body: {
+                content: trimmed,
+                containerTags: ["sm_project_default"],
+                metadata: { sm_source: "consumer" },
+            },
+        }).catch((error) => {
+            console.error("Failed to save onboarding bio memory:", error);
+        });
+    }
+    return (
+        <div className="relative">
+            <div className="space-y-4">
+                <NavMenu>
+                    <p className="text-base text-zinc-600">
+                        Step {getStepNumberFor("bio")} of {totalSteps}
+                    </p>
+                </NavMenu>
+                <h1 className="max-sm:text-4xl">Tell us about yourself</h1>
+                <p className="text-zinc-600 text-2xl max-sm:text-lg">
+                    What should Supermemory know about you?
+                </p>
+            </div>
+            <Textarea
+                autoFocus
+                className="font-sans mt-6 text-base! tracking-normal font-medium border bg-white! border-zinc-200 rounded-lg !field-sizing-normal !min-h-[calc(3*1.5rem+1rem)]"
+                placeholder="I'm a software engineer from San Francisco..."
+                rows={3}
+                value={bio}
+                onChange={(e) => setBio(e.target.value)}
+            />
+            <AnimatePresence
+                mode="sync">
+                {
+                    bio ? (
+                        <motion.div
+                            key="save"
+                            initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                            animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+                            exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                            transition={{ duration: 0.2, ease: "easeOut" }}
+                            className="flex justify-end mt-2 absolute -bottom-12 right-0">
+
+                            <Button variant="link" size="lg" className="text-zinc-900 font-medium! text-lg underline w-fit px-0! cursor-pointer" onClick={handleNext}>
+                                Save & Continue
+                            </Button>
+                        </motion.div>
+                    ) : <motion.div
+                        key="skip"
+                        initial={{ opacity: 0, filter: "blur(5px)", }}
+                        animate={{ opacity: 1, filter: "blur(0px)", }}
+                        exit={{ opacity: 0, filter: "blur(5px)", }}
+                        transition={{ duration: 0.2, ease: "easeOut" }}
+                        className="flex justify-end mt-2 absolute -bottom-12 right-0">
+
+                        <Button variant="link" size="lg" className="text-zinc-900 font-medium! text-lg underline w-fit px-0! cursor-pointer" onClick={handleNext}>
+                            Skip For Now
+                        </Button>
+                    </motion.div>
+                }
+            </AnimatePresence>
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/apps/web/app/onboarding/connections-form.tsx b/apps/web/app/onboarding/connections-form.tsx
new file mode 100644
index 00000000..f71f17ce
--- /dev/null
+++ b/apps/web/app/onboarding/connections-form.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import { motion, type Transition } from "framer-motion";
+import { Button } from "@ui/components/button";
+import { useOnboarding } from "./onboarding-context";
+import { $fetch } from "@lib/api";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { ConnectionResponseSchema } from "@repo/validation/api";
+import type { z } from "zod";
+import { Check } from "lucide-react";
+import { toast } from "sonner";
+import { analytics } from "@/lib/analytics";
+import { useProject } from "@/stores";
+import { NavMenu } from "./nav-menu";
+
+type Connection = z.infer<typeof ConnectionResponseSchema>;
+
+const CONNECTORS = {
+    "google-drive": {
+        title: "Google Drive",
+        description: "Supermemory can use the documents and files in your Google Drive to better understand and assist you.",
+        iconSrc: "/images/gdrive.svg",
+    },
+    notion: {
+        title: "Notion",
+        description: "Help Supermemory understand how you organize your life and what you have going on by connecting your Notion account.",
+        iconSrc: "/images/notion.svg",
+    },
+    onedrive: {
+        title: "OneDrive",
+        description: "By integrating with OneDrive, Supermemory can better understand both your previous and your current work.",
+        iconSrc: "/images/onedrive.svg",
+    },
+} as const;
+
+type ConnectorProvider = keyof typeof CONNECTORS;
+
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: { staggerChildren: 0.15, delayChildren: 0.1 } satisfies Transition,
+    },
+};
+
+const itemVariants = {
+    hidden: { opacity: 0, y: 16 },
+    visible: {
+        opacity: 1,
+        y: 0,
+        transition: { type: "spring", stiffness: 500, damping: 35, mass: 0.8 } satisfies Transition,
+    },
+};
+
+function ConnectionCard({
+    title,
+    description,
+    iconSrc,
+    isConnected = false,
+    onConnect,
+    isConnecting = false
+}: {
+    title: string;
+    description: string;
+    iconSrc: string;
+    isConnected?: boolean;
+    onConnect?: () => void;
+    isConnecting?: boolean;
+}) {
+    return (
+        <div className="flex items-center max-sm:items-start max-sm:gap-3 max-sm:flex-col shadow-lg bg-white rounded-xl py-4 px-6 gap-6 border border-zinc-200">
+            <img src={iconSrc} alt={title} className="size-10 max-sm:hidden" />
+            <div className="flex flex-col gap-0.5 max-sm:gap-2">
+                <div className="flex items-center gap-3">
+                    <img src={iconSrc} alt={title} className="size-5 sm:hidden" />
+                    <h3 className="text-lg font-medium">{title}</h3>
+                </div>
+                <p className="text-zinc-600 text-sm">{description}</p>
+            </div>
+            <div className="sm:ml-auto max-sm:w-full">
+                {isConnected ? (
+                    <Button
+                        variant="outline"
+                        className="max-sm:w-full border border-green-200 bg-green-50 text-green-700 hover:bg-green-100 cursor-default"
+                        disabled
+                    >
+                        <Check className="w-4 h-4 mr-2" />
+                        Connected
+                    </Button>
+                ) : (
+                    <Button
+                        variant="outline"
+                        className="max-sm:w-full border border-zinc-200! hover:text-zinc-900 text-zinc-900 cursor-pointer"
+                        onClick={onConnect}
+                        disabled={isConnecting}
+                    >
+                        Connect
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export function ConnectionsForm() {
+    const { totalSteps, nextStep, getStepNumberFor } = useOnboarding();
+    const { selectedProject } = useProject();
+
+    const { data: connections = [] } = useQuery({
+        queryKey: ["connections"],
+        queryFn: async () => {
+            const response = await $fetch("@post/connections/list", {
+                body: {
+                    containerTags: [],
+                },
+            });
+
+            if (response.error) {
+                throw new Error(
+                    response.error?.message || "Failed to load connections",
+                );
+            }
+
+            return response.data as Connection[];
+        },
+        staleTime: 30 * 1000,
+        refetchInterval: 60 * 1000,
+    });
+
+    const addConnectionMutation = useMutation({
+        mutationFn: async (provider: ConnectorProvider) => {
+            const response = await $fetch("@post/connections/:provider", {
+                params: { provider },
+                body: {
+                    redirectUrl: window.location.href,
+                    containerTags: [selectedProject],
+                },
+            });
+
+            // biome-ignore lint/style/noNonNullAssertion: its fine
+            if ("data" in response && !("error" in response.data!)) {
+                return response.data;
+            }
+
+            throw new Error(response.error?.message || "Failed to connect");
+        },
+        onSuccess: (data, provider) => {
+            analytics.connectionAdded(provider);
+            analytics.connectionAuthStarted();
+            if (data?.authLink) {
+                window.location.href = data.authLink;
+            }
+        },
+        onError: (error, provider) => {
+            analytics.connectionAuthFailed();
+            toast.error(`Failed to connect ${provider}`, {
+                description: error instanceof Error ? error.message : "Unknown error",
+            });
+        },
+    });
+
+    function isConnectorConnected(provider: ConnectorProvider): boolean {
+        return connections.some(connection => connection.provider === provider);
+    }
+
+    function handleConnect(provider: ConnectorProvider) {
+        addConnectionMutation.mutate(provider);
+    }
+
+    return (
+        <div className="relative">
+            <div className="space-y-4">
+                <NavMenu>
+                    <p className="text-base text-zinc-600">
+                        Step {getStepNumberFor("connections")} of {totalSteps}
+                    </p>
+                </NavMenu>
+                <h1 className="max-sm:text-4xl">Connect your accounts</h1>
+                <p className="text-zinc-600 text-2xl max-sm:text-lg">
+                    Help Supermemory get to know you and your documents better
+                    {/* The more context you provide, the better Supermemory becomes */}
+                    {/* Supermemory understands your needs and goals better with more context */}
+                    {/* Supermemory understands you better when it integrates with your apps */}
+                </p>
+            </div>
+            <motion.div className="font-sans text-base mt-8 font-normal tracking-normal flex flex-col gap-4 max-w-prose" initial="hidden" animate="visible" variants={containerVariants}>
+                {Object.entries(CONNECTORS).map(([provider, config]) => {
+                    const providerKey = provider as ConnectorProvider;
+                    const isConnected = isConnectorConnected(providerKey);
+                    const isConnecting = addConnectionMutation.isPending && addConnectionMutation.variables === providerKey;
+
+                    return (
+                        <motion.div key={provider} variants={itemVariants}>
+                            <ConnectionCard
+                                title={config.title}
+                                description={config.description}
+                                iconSrc={config.iconSrc}
+                                isConnected={isConnected}
+                                onConnect={() => handleConnect(providerKey)}
+                                isConnecting={isConnecting}
+                            />
+                        </motion.div>
+                    );
+                })}
+            </motion.div>
+            <div className="flex justify-end mt-4">
+                <Button variant="link" size="lg" className="text-zinc-900 font-medium! text-lg underline w-fit px-0! cursor-pointer" onClick={nextStep}>
+                    Skip For Now
+                </Button>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/app/onboarding/extension-form.tsx b/apps/web/app/onboarding/extension-form.tsx
new file mode 100644
index 00000000..8ce40b99
--- /dev/null
+++ b/apps/web/app/onboarding/extension-form.tsx
@@ -0,0 +1,707 @@
+"use client";
+
+import { ArrowUpIcon, MicIcon, PlusIcon, MousePointer2, LoaderIcon, CheckIcon, XIcon, ChevronRightIcon } from "lucide-react";
+import { NavMenu } from "./nav-menu";
+import { useOnboarding } from "./onboarding-context";
+import { motion, AnimatePresence, type ResolvedValues } from "framer-motion";
+import { useEffect, useMemo, useRef, useState, useLayoutEffect } from "react";
+import React from "react";
+import { cn } from "@lib/utils";
+import { Button } from "@ui/components/button";
+
+type CursorAction =
+    | { type: 'startAt'; target: React.RefObject<HTMLElement | null> }
+    | { type: 'startAtPercent'; xPercent: number; yPercent: number }
+    | { type: 'move'; target: React.RefObject<HTMLElement | null>; duration: number }
+    | { type: 'move'; xPercent: number; yPercent: number; duration: number }
+    | { type: 'pause'; duration: number }
+    | { type: 'click' }
+    | { type: 'call'; fn: () => void }
+
+interface CursorProps {
+    actions: CursorAction[];
+    className?: string;
+    onPositionChange?: (clientX: number, clientY: number) => void;
+}
+
+function useContainerRect(ref: React.RefObject<HTMLDivElement | null>) {
+    const rectRef = React.useRef<DOMRect | null>(null);
+
+    useLayoutEffect(function setup() {
+        if (!ref.current) return;
+
+        function measure() {
+            if (ref.current) {
+                rectRef.current = ref.current.getBoundingClientRect();
+            }
+        }
+
+        measure();
+
+        let resizeObserver: ResizeObserver | null = null;
+        if (typeof ResizeObserver !== "undefined") {
+            resizeObserver = new ResizeObserver(function onResize() {
+                measure();
+            });
+            if (ref.current) {
+                resizeObserver.observe(ref.current);
+            }
+        }
+
+        function onScroll() {
+            measure();
+        }
+
+        window.addEventListener("resize", measure);
+        window.addEventListener("scroll", onScroll, true);
+
+        return function cleanup() {
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+            window.removeEventListener("resize", measure);
+            window.removeEventListener("scroll", onScroll, true);
+        };
+    }, [ref]);
+
+    return rectRef;
+}
+
+function Cursor({ actions, className, onPositionChange }: CursorProps) {
+    const [position, setPosition] = useState({ x: '0px', y: '0px' });
+    const [scale, setScale] = useState(1);
+    const [currentMoveDuration, setCurrentMoveDuration] = useState(0.7); // Default move duration
+    const containerRef = useRef<HTMLDivElement>(null);
+    const timeoutsRef = useRef<number[]>([]);
+    const containerRectRef = useContainerRect(containerRef);
+    const lastUpdateRef = useRef(0);
+
+    function moveToElement(elementRef: React.RefObject<HTMLElement | null>, duration: number) {
+        if (!containerRef.current || !elementRef.current) return;
+
+        setCurrentMoveDuration(duration / 1000); // Convert to seconds for Framer Motion
+
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const elementRect = elementRef.current.getBoundingClientRect();
+        // Position the TOP-LEFT of the cursor at the center of the target element
+        const x = elementRect.left - containerRect.left + elementRect.width / 2;
+        const y = elementRect.top - containerRect.top + elementRect.height / 2;
+
+        setPosition({ x: `${x}px`, y: `${y}px` });
+    }
+
+    function setPositionByPercent(xPercent: number, yPercent: number) {
+        if (!containerRef.current) return;
+        const containerRect = containerRef.current.getBoundingClientRect();
+        // Percentages indicate where the TOP-LEFT of the cursor should be placed
+        const x = (containerRect.width * xPercent) / 100;
+        const y = (containerRect.height * yPercent) / 100;
+        setCurrentMoveDuration(0); // snap without animating
+        setPosition({ x: `${x}px`, y: `${y}px` });
+    }
+
+    function moveToPercent(xPercent: number, yPercent: number, duration: number) {
+        if (!containerRef.current) return;
+        setCurrentMoveDuration(duration / 1000);
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const x = (containerRect.width * xPercent) / 100;
+        const y = (containerRect.height * yPercent) / 100;
+        setPosition({ x: `${x}px`, y: `${y}px` });
+    }
+
+    useEffect(() => {
+        // Clear any existing timeouts before scheduling new ones
+        timeoutsRef.current.forEach((id) => clearTimeout(id));
+        timeoutsRef.current = [];
+
+        let timeAccumulator = 0;
+
+        function schedule(callback: () => void, delay: number): number {
+            const id = window.setTimeout(callback, delay);
+            timeoutsRef.current.push(id);
+            return id;
+        }
+
+        function executeActions(): void {
+            actions.forEach((action) => {
+                // startAt should apply immediately at its place in the sequence and not advance time
+                if (action.type === 'startAt') {
+                    moveToElement(action.target, 0);
+                    return;
+                }
+                if (action.type === 'startAtPercent') {
+                    setPositionByPercent(action.xPercent, action.yPercent);
+                    return;
+                }
+
+                schedule(() => {
+                    switch (action.type) {
+                        case 'move':
+                            if ('target' in action) {
+                                moveToElement(action.target, action.duration);
+                            } else {
+                                moveToPercent(action.xPercent, action.yPercent, action.duration);
+                            }
+                            break;
+                        case 'click':
+                            setScale(0.9);
+                            schedule(function resetClickScale() { setScale(1); }, 100); // Fixed 100ms click duration
+                            break;
+                        case 'call':
+                            try {
+                                action.fn();
+                            } catch (_) {
+                                // no-op on errors to avoid breaking demo
+                            }
+                            break;
+                        case 'pause':
+                            // Pause doesn't require any action, just time passing
+                            break;
+                    }
+                }, timeAccumulator);
+
+                // Add this action's duration to the accumulator for the next action
+                if (action.type === 'click') {
+                    timeAccumulator += 100;
+                } else if (action.type === 'pause') {
+                    timeAccumulator += action.duration;
+                } else if (action.type === 'move') {
+                    timeAccumulator += action.duration;
+                } else {
+                    // 'call' and startAt/startAtPercent don't consume time
+                }
+            });
+        }
+
+        // make sure refs are ready
+        schedule(executeActions, 100);
+
+        return function cleanup(): void {
+            timeoutsRef.current.forEach((id) => clearTimeout(id));
+            timeoutsRef.current = [];
+        };
+    }, [actions]);
+
+    return (
+        <div ref={containerRef} className={`absolute inset-0 pointer-events-none ${className || ''}`}>
+            <motion.div
+                animate={{
+                    x: position.x,
+                    y: position.y,
+                    scale: scale
+                }}
+                transition={{
+                    x: { duration: currentMoveDuration, ease: "easeInOut" },
+                    y: { duration: currentMoveDuration, ease: "easeInOut" },
+                    scale: { duration: 0.1, ease: "easeInOut" }
+                }}
+                className="absolute top-0 left-0"
+                style={{ zIndex: 10 }}
+                onUpdate={(latest: ResolvedValues) => {
+                    if (!onPositionChange) return;
+                    const containerRect = containerRectRef.current;
+                    if (!containerRect) return;
+                    const now = performance.now();
+                    if (now - lastUpdateRef.current < 50) return; // ~20fps throttle
+                    lastUpdateRef.current = now;
+                    const latestX = typeof latest.x === 'number' ? latest.x : parseFloat(String(latest.x || 0));
+                    const latestY = typeof latest.y === 'number' ? latest.y : parseFloat(String(latest.y || 0));
+                    const clientX = containerRect.left + latestX;
+                    const clientY = containerRect.top + latestY;
+                    onPositionChange(clientX, clientY);
+                }}
+            >
+                <MousePointer2 className="size-6 drop-shadow" strokeWidth={1.5} fill="white" />
+            </motion.div>
+        </div>
+    )
+}
+
+function SnippetDemo() {
+    const snippetRootRef = useRef<HTMLDivElement>(null);
+    const sentenceRef = useRef<HTMLSpanElement>(null);
+    const [currentEndIndex, setCurrentEndIndex] = useState<number>(0);
+    const lastStableIndexRef = useRef<number>(0);
+    const [cursorActions, setCursorActions] = useState<CursorAction[]>([]);
+    const [menuOpen, setMenuOpen] = useState<boolean>(false);
+    const [hoveredMenuIndex, setHoveredMenuIndex] = useState<number | null>(null);
+    const menuItemRefs = useRef<(HTMLDivElement | null)[]>([]);
+    const menuItem6Ref = useRef<HTMLElement | null>(null);
+    const charRectsRef = useRef<DOMRect[]>([]);
+
+    const targetText = "There's an Italian dish called saltimbocca, which means \"leap into the mouth.\"";
+
+    function getIndexFromClientPoint(clientX: number, clientY: number): number {
+        const rects = charRectsRef.current;
+        if (!sentenceRef.current || rects.length === 0) return 0;
+        let bestIdx = 0;
+        let bestDist = Number.POSITIVE_INFINITY;
+        for (let i = 0; i < rects.length; i++) {
+            const r = rects[i];
+            if (!r) continue;
+            const cx = r.left + r.width / 2;
+            const cy = r.top + r.height / 2;
+            const dx = clientX - cx;
+            const dy = clientY - cy;
+            const d = dx * dx + dy * dy;
+            if (d < bestDist) {
+                bestDist = d;
+                bestIdx = i;
+            }
+        }
+        return bestIdx;
+    }
+
+    function getMenuItemIndexFromPoint(clientX: number, clientY: number): number | null {
+        const el = document.elementFromPoint(clientX, clientY) as HTMLElement | null;
+        if (!el) return null;
+
+        const menuItem = el.closest('[data-menu-idx]') as HTMLElement | null;
+        if (menuItem) {
+            const idx = parseInt(menuItem.dataset.menuIdx || '', 10);
+            return Number.isFinite(idx) ? idx : null;
+        }
+        return null;
+    }
+
+    useLayoutEffect(function setupCharRectsMeasurement() {
+        function measureCharRects(): void {
+            if (!sentenceRef.current) {
+                charRectsRef.current = [];
+                return;
+            }
+            const spans = sentenceRef.current.querySelectorAll('span[data-idx]');
+            const rects: DOMRect[] = [];
+            spans.forEach(function collect(node) {
+                rects.push((node as HTMLElement).getBoundingClientRect());
+            });
+            charRectsRef.current = rects;
+        }
+
+        measureCharRects();
+
+        let ro1: ResizeObserver | null = null;
+        let ro2: ResizeObserver | null = null;
+        if (typeof ResizeObserver !== "undefined") {
+            ro1 = new ResizeObserver(function onResize() { measureCharRects(); });
+            ro2 = new ResizeObserver(function onResize() { measureCharRects(); });
+            if (snippetRootRef.current) ro1.observe(snippetRootRef.current);
+            if (sentenceRef.current) ro2.observe(sentenceRef.current);
+        }
+
+        function onScroll(): void { measureCharRects(); }
+        window.addEventListener("resize", measureCharRects);
+        window.addEventListener("scroll", onScroll, true);
+
+        return function cleanup(): void {
+            if (ro1) ro1.disconnect();
+            if (ro2) ro2.disconnect();
+            window.removeEventListener("resize", measureCharRects);
+            window.removeEventListener("scroll", onScroll, true);
+        };
+    }, [targetText]);
+
+    useEffect(function setupActionsOnce() {
+        lastStableIndexRef.current = 0;
+        setCurrentEndIndex(0);
+        if (!sentenceRef.current) return;
+        const total = targetText.length;
+        const firstSpan = sentenceRef.current.querySelector('span[data-idx="0"]') as HTMLSpanElement | null;
+        const lastSpan = sentenceRef.current.querySelector(`span[data-idx="${Math.max(0, total - 1)}"]`) as HTMLSpanElement | null;
+        if (!firstSpan || !lastSpan) return;
+        const firstRef = { current: firstSpan } as React.RefObject<HTMLElement>;
+        const lastRef = { current: lastSpan } as React.RefObject<HTMLElement>;
+        setCursorActions([
+            { type: 'call', fn: function reset() { lastStableIndexRef.current = 0; setCurrentEndIndex(0); setHoveredMenuIndex(null); } },
+            { type: 'startAt', target: firstRef },
+            { type: 'pause', duration: 200 },
+            { type: 'move', target: lastRef, duration: 1800 },
+            { type: 'pause', duration: 1200 },
+            { type: "click" },
+            { type: 'call', fn: () => { setMenuOpen(true); } },
+            { type: 'pause', duration: 1000 },
+            { type: 'move', target: menuItem6Ref, duration: 1000 },
+            { type: 'pause', duration: 500 },
+            { type: 'click' },
+        ]);
+    }, []);
+
+    return (
+        <div ref={snippetRootRef} className="size-full select-none text-xs relative overflow-hidden">
+            <Cursor
+                actions={cursorActions}
+                onPositionChange={function onPositionChange(clientX: number, clientY: number) {
+                    // Handle text highlighting
+                    const textIdx = getIndexFromClientPoint(clientX, clientY);
+                    const next = textIdx < lastStableIndexRef.current ? lastStableIndexRef.current : textIdx;
+                    if (next !== lastStableIndexRef.current) {
+                        lastStableIndexRef.current = next;
+                        setCurrentEndIndex(next);
+                    }
+
+                    // Handle menu item hovering
+                    if (menuOpen) {
+                        const menuIdx = getMenuItemIndexFromPoint(clientX, clientY);
+                        if (menuIdx !== hoveredMenuIndex) {
+                            setHoveredMenuIndex(menuIdx);
+                        }
+                    }
+                }}
+            />
+            <div className="h-[125%] w-full bg-white text-justify p-4 text-black absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                writing is easier to read, and the easier something is to read, the more deeply readers will engage with it. The less energy they expend on your prose, the more they'll have left for your ideas. And the further they'll read. Most readers' energy tends to flag part way through an article or essay. If the friction of reading is low enough, more keep going till the end.
+                {" "}
+                <span ref={sentenceRef}>
+                    {targetText.split("").map(function renderChar(ch, idx) {
+                        const highlighted = idx <= currentEndIndex;
+                        return (
+                            <span
+                                key={idx}
+                                data-idx={idx}
+                                className={highlighted ? "bg-blue-200/70" : undefined}
+                            >
+                                {ch}
+                            </span>
+                        );
+                    })}
+                </span>
+                <span className="size-0 relative">
+                    {menuOpen && (
+                        <div className="flex flex-col w-48 text-left absolute top-0 right-0 text-white bg-zinc-800/70 text-xs border-0.5 backdrop-blur-sm border-zinc-900/80 rounded-md px-1.5 py-1.5">
+                            {["Back", "Forward", "Reload", "Save As...", "Print...", "Translate to English", "Save to Supermemory", "View Page Source", "Inspect"].map((item, idx) => (
+                                <React.Fragment key={item}>
+                                    <div
+                                        ref={el => { menuItemRefs.current[idx] = el; if (idx === 6) { menuItem6Ref.current = el; } }}
+                                        data-menu-idx={idx}
+                                        className={cn(
+                                            "px-2 py-0.5 flex items-center gap-1.5 rounded-sm transition-colors",
+                                            (idx === 0 || idx === 1) && "text-white/30",
+                                            hoveredMenuIndex === idx && "bg-blue-500"
+                                        )}
+                                    >
+                                        {idx === 6 && <img src="/images/icon-16.png" alt="Supermemory" className="size-3.5" />}
+                                        {item}
+                                    </div>
+                                    {[2, 5, 6].includes(idx) && <div className="h-px rounded-full my-1 mx-2 bg-zinc-300/20" />}
+                                </React.Fragment>
+                            ))}
+                        </div>
+                    )}
+                </span>
+                {" "}My goal when writing might be called saltintesta: the ideas leap into your head and you barely notice the words that got them there. It's too much to hope that writing could ever be pure ideas. You might not even want it to be. But for most writers, most of the time, that's the goal to aim for. The gap between most writing and pure ideas is not filled with poetry. Plus it's more considerate to write simply. When you write in a fancy way to impress people, you're making them do extra work just so you can seem cool. It's like trailing a long train behind you that readers have to carry.
+            </div>
+        </div>
+    )
+}
+
+function ChatGPTDemo() {
+    const iconRef = useRef<HTMLImageElement>(null);
+    const submitButtonRef = useRef<HTMLDivElement>(null);
+    const [enhancementStatus, setEnhancementStatus] = useState<"notStarted" | "enhancing" | "done">("notStarted");
+    const [memoriesExpanded, setMemoriesExpanded] = useState(false);
+
+    const cursorActions: CursorAction[] = useMemo(() => [
+        {
+            type: "call", fn: function resetStates() {
+                setEnhancementStatus("notStarted");
+                setMemoriesExpanded(false);
+            }
+        },
+        { type: 'startAtPercent', xPercent: 80, yPercent: 80 },
+        { type: 'pause', duration: 1000 },
+        { type: 'move', target: iconRef, duration: 1000 },
+        { type: 'pause', duration: 1000 },
+        { type: 'click' },
+        { type: 'call', fn: function startEnhancing() { setEnhancementStatus("enhancing"); } },
+        { type: 'pause', duration: 1000 },
+        { type: 'move', xPercent: 10, yPercent: 80, duration: 1000 },
+        { type: 'call', fn: function finishEnhancing() { setEnhancementStatus("done"); } },
+        { type: 'pause', duration: 500 },
+        { type: 'move', target: iconRef, duration: 1000 },
+        { type: 'call', fn: function expandMemories() { setMemoriesExpanded(true); } },
+        { type: "pause", duration: 1000 },
+        { type: 'move', xPercent: 80, yPercent: 80, duration: 1000 },
+    ], []);
+
+    return (
+        <div className="size-full relative overflow-hidden select-none pointer-events-none text-white flex flex-col gap-6 items-center justify-center" style={{
+            backgroundColor: "#212121",
+            fontFamily: "ui-sans-serif, -apple-system, system-ui"
+        }}>
+            <Cursor actions={cursorActions} />
+            <div className="text-xl">What's on your mind today?</div>
+            <div className="w-[85%] text-sm rounded-3xl p-2 flex flex-col gap-2" style={{ backgroundColor: "#303030" }}>
+                <div className="p-2">
+                    what are my card's benefits?
+                </div>
+                <div className="flex justify-between items-center p-1 pt-0">
+                    <PlusIcon className="size-5" strokeWidth={1.5} />
+                    <div className="flex items-center gap-2">
+                        <div className="h-4.5 flex items-center">
+                            <motion.div
+                                ref={iconRef}
+                                layout
+                                initial={false}
+                                animate={{
+                                    backgroundColor: enhancementStatus === "notStarted" ? "transparent" : "#1e1b4b",
+                                    borderColor: enhancementStatus === "notStarted" ? "transparent" : "#4338ca",
+                                    borderWidth: enhancementStatus === "notStarted" ? 0 : 1,
+                                    paddingLeft: enhancementStatus === "notStarted" ? 0 : (enhancementStatus === "enhancing" ? 4 : 8),
+                                    paddingRight: enhancementStatus === "notStarted" ? 0 : (enhancementStatus === "enhancing" ? 6 : 8),
+                                    paddingTop: enhancementStatus === "notStarted" ? 0 : 4,
+                                    paddingBottom: enhancementStatus === "notStarted" ? 0 : 4,
+                                    marginTop: enhancementStatus === "notStarted" ? 0 : 4,
+                                    marginBottom: enhancementStatus === "notStarted" ? 0 : 4,
+                                }}
+                                transition={{
+                                    duration: 0.2,
+                                    ease: "easeInOut",
+                                    layout: { duration: 0.2, ease: "easeInOut" }
+                                }}
+                                className="rounded-full text-xs w-fit flex items-center relative"
+                                style={{ border: "solid" }}
+                            >
+                                {enhancementStatus === "notStarted" && (
+                                    <img src="/images/icon-16.png" alt="Enhance with Supermemory" className="size-5" />
+                                )}
+                                {enhancementStatus === "enhancing" && (
+                                    <>
+                                        <LoaderIcon className="size-3 animate-spin" />
+                                        <motion.span
+                                            initial={{ opacity: 0, width: 0 }}
+                                            animate={{ opacity: 1, width: "auto" }}
+                                            transition={{ delay: 0.1, duration: 0.2 }}
+                                            className="ml-2 whitespace-nowrap overflow-hidden"
+                                        >
+                                            Searching...
+                                        </motion.span>
+                                    </>
+                                )}
+                                {enhancementStatus === "done" && (
+                                    <>
+                                        <CheckIcon className="size-3 text-green-400" />
+                                        <motion.span
+                                            initial={{ opacity: 0, width: "auto" }}
+                                            animate={{ opacity: 1, width: "auto" }}
+                                            transition={{ delay: 0.1, duration: 0.2 }}
+                                            className="ml-2">Including 1 memory</motion.span>
+                                    </>
+                                )}
+                                <AnimatePresence>
+                                    {memoriesExpanded && (
+                                        <motion.div
+                                            initial={{
+                                                opacity: 0,
+                                                scale: 0.95,
+                                                y: -8
+                                            }}
+                                            animate={{
+                                                opacity: 1,
+                                                scale: 1,
+                                                y: 0
+                                            }}
+                                            exit={{
+                                                opacity: 0,
+                                                scale: 0.95,
+                                                y: -8
+                                            }}
+                                            transition={{
+                                                duration: 0.15,
+                                                ease: [0.16, 1, 0.3, 1],
+                                            }}
+                                            className="absolute left-1/2 -translate-x-1/2 top-8 bg-[#1e1b4b] border border-[#4338ca] w-56 rounded-lg p-2"
+                                            style={{ transformOrigin: 'top center' }}
+                                        >
+                                            <div className="flex items-center gap-2">
+                                                <img src="/images/icon-16.png" alt="Enhance with Supermemory" className="size-5" />
+                                                <span className="text-xs">User possesses an American Express Platinum card</span>
+                                            </div>
+                                        </motion.div>
+                                    )}
+                                </AnimatePresence>
+                            </motion.div>
+                        </div>
+
+                        <MicIcon className="size-4" strokeWidth={1.5} />
+                        <div ref={submitButtonRef} className="rounded-full bg-white size-6 flex items-center justify-center">
+                            <ArrowUpIcon className="size-4 text-black" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+function TwitterDemo() {
+    const importButtonRef = useRef<HTMLButtonElement>(null);
+    const [importStatus, setImportStatus] = useState<"notStarted" | "importing" | "done">("notStarted");
+
+    const cursorActions: CursorAction[] = useMemo(() => [
+        {
+            type: "call", fn: function resetStates() {
+                setImportStatus("notStarted");
+            }
+        },
+        { type: 'startAtPercent', xPercent: 10, yPercent: 80 },
+        { type: 'pause', duration: 1300 },
+        { type: 'move', target: importButtonRef, duration: 1100 },
+        { type: 'pause', duration: 800 },
+        { type: 'click' },
+        { type: 'call', fn: function startImporting() { setImportStatus("importing"); } },
+        { type: 'pause', duration: 700 },
+        { type: 'move', xPercent: 80, yPercent: 80, duration: 1200 },
+        { type: 'call', fn: function finishImporting() { setImportStatus("done"); } },
+    ], []);
+
+    return (
+        <div className="size-full relative overflow-hidden select-none flex flex-col items-center justify-center">
+            <div className="bg-white text-black px-5 py-3 text-sm rounded-2xl w-9/10">
+                <div className="flex justify-between items-center">
+                    <div className="flex items-center gap-2">
+                        <span className="text-xl font-bold">𝕏</span>
+                        <span className="text-base font-medium">Import Twitter Bookmarks</span>
+                    </div>
+                    <XIcon className="size-4" />
+                </div>
+                <div className="mt-3">
+                    <p className="text-sm text-zinc-600">
+                        This will import all your Twitter bookmarks to Supermemory
+                    </p>
+                </div>
+                <div className="mt-3">
+                    <motion.button
+                        ref={importButtonRef}
+                        animate={{
+                            backgroundColor: importStatus === "importing"
+                                ? "#f59e0b"
+                                : importStatus === "done"
+                                    ? "#10b981"
+                                    : "#3b82f6"
+                        }}
+                        transition={{ duration: 0.3, ease: "easeInOut" }}
+                        className="text-white px-4 py-2 rounded-lg flex items-center gap-2 min-w-[180px] justify-center"
+                    >
+                        <AnimatePresence mode="wait">
+                            {importStatus === "importing" && (
+                                <motion.div
+                                    initial={{ opacity: 0, scale: 0 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    exit={{ opacity: 0, scale: 0 }}
+                                    transition={{ duration: 0.2 }}
+                                >
+                                    <LoaderIcon className="size-4 animate-spin" />
+                                </motion.div>
+                            )}
+                            {importStatus === "done" && (
+                                <motion.div
+                                    initial={{ opacity: 0, scale: 0 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    exit={{ opacity: 0, scale: 0 }}
+                                    transition={{ duration: 0.2 }}
+                                >
+                                    <CheckIcon className="size-4" />
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                        <motion.span
+                            key={importStatus}
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -10 }}
+                            transition={{ duration: 0.3, ease: "easeInOut" }}
+                        >
+                            {importStatus === "importing"
+                                ? "Importing bookmarks..."
+                                : importStatus === "done"
+                                    ? "Import successful"
+                                    : "Import All Bookmarks"}
+                        </motion.span>
+                    </motion.button>
+                </div>
+            </div>
+            <Cursor actions={cursorActions} />
+        </div>
+    )
+}
+
+export function ExtensionForm() {
+    const { totalSteps, nextStep, getStepNumberFor } = useOnboarding();
+    return (
+        <div className="relative flex items-start flex-col gap-6">
+            <div className="flex items-center justify-between w-full">
+                <div className="flex flex-col items-start text-left gap-4">
+                    <NavMenu>
+                        <p className="text-base text-zinc-600">
+                            Step {getStepNumberFor("extension")} of {totalSteps}
+                        </p>
+                    </NavMenu>
+                    <h1>Install the Chrome extension</h1>
+                    <p className="text-zinc-600 text-2xl">
+                        {/* Install the Supermemory extension to start saving and organizing everything that matters. */}
+                        Bring Supermemory everywhere
+                    </p>
+                </div>
+                <div className="flex flex-col items-center text-center gap-4">
+                    <a href="https://supermemory.ai/extension" target="_blank" className="bg-zinc-50/80 backdrop-blur-lg border-2 hover:bg-zinc-100/80 transition-colors duration-100 border-zinc-200/80 shadow-xs rounded-full mt-6 pl-4.5 pr-6 py-4 text-2xl font-sans tracking-tight font-medium flex items-center gap-4">
+                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/2048px-Google_Chrome_icon_%28February_2022%29.svg.png" alt="Chrome" className="size-8" />
+                        Add to Chrome
+                    </a>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-3 w-fit gap-4 text-base font-sans font-medium tracking-normal">
+                <div className="flex flex-col w-80 divide-y divide-zinc-200 border border-zinc-200 shadow-xs rounded-xl overflow-hidden">
+                    <div className="p-4 bg-white">
+                        <h2 className="text-lg">Remember anything, anywhere</h2>
+                        <p className="text-zinc-600 text-sm">
+                            Just right-click to save instantly.
+                        </p>
+                    </div>
+                    <div className="aspect-square bg-blue-500">
+                        <SnippetDemo />
+                    </div>
+
+                </div>
+                <div className="flex flex-col w-80 divide-y divide-zinc-200 border border-zinc-200 shadow-xs rounded-xl overflow-hidden">
+
+                    <div className="p-4 bg-white">
+                        <h2 className="text-lg">Integrate with your AI</h2>
+                        {/* Supercharge your AI with memory */}
+                        {/* Supercharge any AI with Supermemory. */}
+                        {/* ChatGPT is better with Supermemory. */}
+                        {/* Seamless integration with your workflow */}
+                        <p className="text-zinc-600 text-sm">
+                            {/* Integrates with ChatGPT and Claude. */}
+                            {/* Integrates with your chat apps */}
+                            Enhance any prompt with Supermemory.
+                            {/* Seamlessly */}
+                        </p>
+                    </div>
+                    <div className="aspect-square bg-blue-500">
+                        <ChatGPTDemo />
+                    </div>
+                </div>
+                <div className="flex flex-col w-80 divide-y divide-zinc-200 border border-zinc-200 shadow-xs rounded-xl overflow-hidden">
+
+                    <div className="p-4 bg-white">
+                        <h2 className="text-lg">Import Twitter bookmarks</h2>
+                        <p className="text-zinc-600 text-sm">
+                            Search semantically and effortlessly.
+                            {/* Import instantly and search effortlessly. */}
+                        </p>
+                    </div><div className="aspect-square bg-blue-500">
+                        <TwitterDemo />
+                    </div>
+
+                </div>
+            </div>
+            <div className="flex w-full justify-end">
+                <Button variant="link" size="lg" className="text-zinc-900 font-medium! text-lg underline w-fit px-0! cursor-pointer" onClick={nextStep}>
+                    Continue
+                    <ChevronRightIcon className="size-4" />
+                </Button>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/app/onboarding/floating-orbs.tsx b/apps/web/app/onboarding/floating-orbs.tsx
new file mode 100644
index 00000000..96a8f061
--- /dev/null
+++ b/apps/web/app/onboarding/floating-orbs.tsx
@@ -0,0 +1,228 @@
+"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 ? Infinity : 0,
+                ease: [0.42, 0, 0.58, 1],
+                delay: shouldReveal ? delay + revealDelay : 0,
+            },
+            y: {
+                duration: shouldReveal ? duration : 0,
+                repeat: shouldReveal ? Infinity : 0,
+                ease: [0.42, 0, 0.58, 1],
+                delay: shouldReveal ? delay + revealDelay : 0,
+            },
+            scale: {
+                duration: shouldReveal ? duration : 0.8,
+                repeat: shouldReveal ? 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, y;
+            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>
+    );
+}
diff --git a/apps/web/app/onboarding/intro.tsx b/apps/web/app/onboarding/intro.tsx
new file mode 100644
index 00000000..ce106b59
--- /dev/null
+++ b/apps/web/app/onboarding/intro.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { AnimatedText } from "./animated-text";
+import { motion, AnimatePresence } from "motion/react";
+import { Button } from "@repo/ui/components/button";
+import { cn } from "@lib/utils";
+import { ArrowRightIcon } from "lucide-react";
+import { useOnboarding } from "./onboarding-context";
+import { useIsMobile } from "@hooks/use-mobile";
+
+export function Intro() {
+    const { nextStep, introTriggers: triggers } = useOnboarding();
+    const isMobile = useIsMobile();
+
+    return (
+        <motion.div
+            className="flex flex-col gap-4 relative max-sm:text-4xl max-sm:w-full"
+            layout
+            transition={{
+                layout: { duration: 0.8, ease: "anticipate" }
+            }}
+        >
+            <AnimatePresence mode="popLayout">
+                {triggers.first && (
+                    <motion.div
+                        key="first"
+                        layout
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{
+                            opacity: { duration: 0.3 },
+                            layout: { duration: 0.8, ease: "easeInOut" }
+                        }}
+                    >
+                        {isMobile ? (
+                            <div className="flex flex-col">
+                                <AnimatedText trigger={triggers.first} delay={0}>
+                                    Still looking for your
+                                </AnimatedText>
+                                <AnimatedText trigger={triggers.first} delay={0.1}>
+                                    other half?
+                                </AnimatedText>
+                            </div>
+                        ) : (
+                            <AnimatedText trigger={triggers.first} delay={0}>
+                                Still looking for your other half?
+                            </AnimatedText>
+                        )}
+                    </motion.div>
+                )}
+                {triggers.second && (
+                    <motion.div
+                        key="second"
+                        layout
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{
+                            opacity: { duration: 0.3 },
+                            layout: { duration: 0.8, ease: "easeInOut" }
+                        }}
+                    >
+                        <AnimatedText trigger={triggers.second} delay={0.4}>
+                            Don't worry.
+                        </AnimatedText>
+                    </motion.div>
+                )}
+                {triggers.third && (
+                    <motion.div
+                        key="third"
+                        layout
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{
+                            opacity: { duration: 0.3 },
+                            layout: { duration: 0.8, ease: "easeInOut" }
+                        }}
+                    >
+                        <AnimatedText trigger={triggers.third} delay={0.4}>
+                            {/* You just found it. */}
+                            {/* You're about to find it. */}
+                            It's right here.
+                            {/* It's right in front of you. */}
+                            {/* You're looking at it. */}
+                        </AnimatedText>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+            <motion.div
+                key="fourth"
+                className="absolute -bottom-16 left-0"
+                initial={{ opacity: 0, filter: "blur(5px)" }}
+                animate={{
+                    opacity: triggers.fourth ? 1 : 0,
+                    filter: triggers.fourth ? "blur(0px)" : "blur(5px)"
+                }}
+                transition={{
+                    opacity: { duration: 0.6, ease: "easeOut" },
+                    filter: { duration: 0.4, ease: "easeOut" }
+                }}
+            >
+                <Button
+                    variant={"link"}
+                    size={"lg"}
+                    className={cn("text-zinc-600 flex items-center gap-2 hover:text-zinc-950 text-2xl underline group font-normal w-fit px-0! cursor-pointer", !triggers.fourth && "pointer-events-none")}
+                    style={{
+                        transform: triggers.fourth ? "scale(1)" : "scale(0.95)"
+                    }}
+                    onClick={nextStep}
+                >
+                    Meet Supermemory
+                    <ArrowRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-transform duration-200" />
+                </Button>
+            </motion.div>
+        </motion.div>
+    )
+}
\ No newline at end of file
diff --git a/apps/web/app/onboarding/mcp-form.tsx b/apps/web/app/onboarding/mcp-form.tsx
new file mode 100644
index 00000000..50d48979
--- /dev/null
+++ b/apps/web/app/onboarding/mcp-form.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import { Select, SelectValue, SelectTrigger, SelectContent, SelectItem } from "@ui/components/select";
+import { useOnboarding } from "./onboarding-context";
+import { useEffect, useState } from "react";
+import { Button } from "@ui/components/button";
+import { CheckIcon, CircleCheckIcon, CopyIcon, LoaderIcon } from "lucide-react";
+import { toast } from "sonner";
+import { TextMorph } from "@/components/text-morph";
+import { NavMenu } from "./nav-menu";
+import { cn } from "@lib/utils";
+import { motion, AnimatePresence } from "framer-motion";
+import { useQuery } from "@tanstack/react-query";
+import { $fetch } from "@lib/api";
+
+const clients = {
+    cursor: "Cursor",
+    claude: "Claude Desktop",
+    vscode: "VSCode",
+    cline: "Cline",
+    "roo-cline": "Roo Cline",
+    witsy: "Witsy",
+    enconvo: "Enconvo",
+    "gemini-cli": "Gemini CLI",
+    "claude-code": "Claude Code",
+} as const;
+
+export function MCPForm() {
+    const { totalSteps, nextStep, getStepNumberFor } = useOnboarding();
+    const [client, setClient] = useState<keyof typeof clients>("cursor");
+    const [isCopied, setIsCopied] = useState(false);
+    const [isInstalling, setIsInstalling] = useState(true);
+
+    const hasLoginQuery = useQuery({
+        queryKey: ["mcp", "has-login"],
+        queryFn: async (): Promise<{ previousLogin: boolean }> => {
+            const response = await $fetch("@get/mcp/has-login");
+            if (response.error) {
+                throw new Error(response.error?.message || "Failed to check MCP login");
+            }
+            return response.data as { previousLogin: boolean };
+        },
+        enabled: isInstalling,
+        refetchInterval: isInstalling ? 1000 : false,
+        staleTime: 0,
+    });
+
+    useEffect(() => {
+        if (hasLoginQuery.data?.previousLogin) {
+            setIsInstalling(false);
+        }
+    }, [hasLoginQuery.data?.previousLogin]);
+
+    return (
+        <div className="relative flex flex-col gap-6">
+            <div className="space-y-4">
+                <NavMenu>
+                    <p className="text-base text-zinc-600">
+                        Step {getStepNumberFor("mcp")} of {totalSteps}
+                    </p>
+                </NavMenu>
+                <h1 className="max-sm:text-4xl">Install the MCP server</h1>
+                <p className="text-zinc-600 text-2xl max-sm:text-lg">
+                    Bring Supermemory to all your favourite tools
+                </p>
+            </div>
+            <div className="flex flex-col gap-4 font-sans text-base tracking-normal font-normal">
+                <div className="flex gap-4">
+                    <div className="relative flex-shrink-0">
+                        <div style={{
+                            height: "calc(100% - 0.5rem)",
+                        }} className="absolute -z-10 left-1/2 top-8 w-[1px] -translate-x-1/2 transform bg-neutral-200"></div>
+                        <div className="size-10 rounded-lg bg-zinc-100 border-zinc-200 border text-zinc-900 font-medium flex items-center justify-center">1</div>
+                    </div>
+                    <div className="mt-2 space-y-2 w-full">
+                        <p>Select the app you want to install Supermemory MCP to</p>
+                        <Select
+                            onValueChange={(value) => setClient(value as keyof typeof clients)}
+                            value={client}
+                        >
+                            <SelectTrigger id="client-select" className="w-full border border-zinc-200 bg-white!">
+                                <SelectValue placeholder="Select client" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {Object.entries(clients).map(([key, value]) => (
+                                    <SelectItem key={key} value={key}>
+                                        {value}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+                <div className="flex gap-4">
+                    <div className="relative flex-shrink-0">
+                        <div className="size-10 rounded-lg border-zinc-200 border bg-zinc-100 text-zinc-900 font-medium flex items-center justify-center">2</div>
+                        <div style={{
+                            height: "calc(100% - 0.5rem)",
+                        }} className="absolute left-1/2 -z-10 top-8 w-[1px] -translate-x-1/2 transform bg-neutral-200"></div>
+                    </div>
+                    <div className="mt-2 space-y-2">
+                        <p>Copy the installation command</p>
+                        <div className="bg-white relative shadow-xs rounded-lg max-w-md text-balance py-4 px-5 border border-zinc-200">
+                            <p className="text-zinc-900 font-mono text-xs w-4/5">
+                                npx -y install-mcp@latest https://api.supermemory.ai/mcp --client {client} --oauth=yes
+                            </p>
+                            <Button className="absolute right-2 top-2" onClick={() => {
+                                navigator.clipboard.writeText(`npx -y install-mcp@latest https://api.supermemory.ai/mcp --client ${client} --oauth=yes`);
+                                setIsCopied(true);
+                                setTimeout(() => {
+                                    setIsCopied(false);
+                                }, 2000);
+                            }}>
+                                {isCopied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
+                                <TextMorph>
+                                    {isCopied ? "Copied!" : "Copy"}
+                                </TextMorph>
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+                <div className="flex gap-4">
+                    <div className="relative flex-shrink-0">
+                        <div className="size-10 rounded-lg bg-zinc-100 border-zinc-200 border text-zinc-900 font-medium flex items-center justify-center">3</div>
+                    </div>
+                    <div className="mt-2 space-y-2 w-full">
+                        <p>Run the command in your terminal of choice</p>
+                        <motion.div
+                            className={cn("px-5 py-4 border shadow-xs rounded-lg flex items-center gap-3 font-mono text-sm")}
+                            animate={{
+                                backgroundColor: isInstalling ? "rgb(250 250 250)" : "rgb(240 253 244)", // zinc-50 to green-50
+                                borderColor: isInstalling ? "rgb(228 228 231)" : "rgb(187 247 208)", // zinc-200 to green-200
+                            }}
+                            transition={{
+                                duration: 0.3,
+                                ease: "easeInOut"
+                            }}
+                        >
+                            <AnimatePresence mode="wait">
+                                {isInstalling ? (
+                                    <motion.div
+                                        key="loading"
+                                        initial={{ opacity: 0, scale: 0.8 }}
+                                        animate={{ opacity: 1, scale: 1 }}
+                                        exit={{ opacity: 0, scale: 0.8 }}
+                                        transition={{ duration: 0.2 }}
+                                    >
+                                        <LoaderIcon className="size-4 animate-spin" />
+                                    </motion.div>
+                                ) : (
+                                    <motion.div
+                                        key="success"
+                                        initial={{ opacity: 0, scale: 0.8 }}
+                                        animate={{ opacity: 1, scale: 1 }}
+                                        exit={{ opacity: 0, scale: 0.8 }}
+                                        transition={{ duration: 0.2 }}
+                                    >
+                                        <CircleCheckIcon className="size-4 text-green-500" />
+                                    </motion.div>
+                                )}
+                            </AnimatePresence>
+                            <motion.span
+                                key={isInstalling ? "installing" : "complete"}
+                                initial={{ opacity: 0, y: 10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ duration: 0.3, ease: "easeOut" }}
+                            >
+                                {isInstalling ? "Waiting for installation..." : "Installation complete!"}
+                            </motion.span>
+                        </motion.div>
+                    </div>
+                </div>
+            </div>
+            <AnimatePresence
+                mode="sync">
+                {
+                    !isInstalling ? (
+                        <motion.div
+                            key="save"
+                            initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                            animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+                            exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                            transition={{ duration: 0.2, ease: "easeOut" }}
+                            className="flex justify-end">
+
+                            <Button variant="link" size="lg" className="text-zinc-900 font-medium! text-lg underline w-fit px-0! cursor-pointer" onClick={nextStep}>
+                                Continue
+                            </Button>
+                        </motion.div>
+                    ) : <motion.div
+                        key="skip"
+                        initial={{ opacity: 0, filter: "blur(5px)", }}
+                        animate={{ opacity: 1, filter: "blur(0px)", }}
+                        exit={{ opacity: 0, filter: "blur(5px)", }}
+                        transition={{ duration: 0.2, ease: "easeOut" }}
+                        className="flex justify-end">
+
+                        <Button variant="link" size="lg" className="text-zinc-900 font-medium! text-lg underline w-fit px-0! cursor-pointer" onClick={nextStep}>
+                            Skip For Now
+                        </Button>
+                    </motion.div>
+                }
+            </AnimatePresence>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/app/onboarding/name-form.tsx b/apps/web/app/onboarding/name-form.tsx
new file mode 100644
index 00000000..c112933c
--- /dev/null
+++ b/apps/web/app/onboarding/name-form.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { Button } from "@repo/ui/components/button";
+import { useOnboarding } from "./onboarding-context";
+import { useAuth } from "@lib/auth-context";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Input } from "@ui/components/input";
+import { CheckIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { NavMenu } from "./nav-menu";
+import { authClient } from "@lib/auth";
+
+export function NameForm() {
+    const { nextStep, totalSteps, getStepNumberFor } = useOnboarding();
+    const { user } = useAuth();
+    const [name, setName] = useState(user?.name ?? "");
+
+    useEffect(() => {
+        if (!name && user?.name) {
+            setName(user.name);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [user?.name]);
+
+    function handleNext(): void {
+        const trimmed = name.trim();
+        if (!trimmed) {
+            nextStep();
+            return;
+        }
+
+        nextStep();
+        void authClient
+            .updateUser({ name: trimmed })
+            .catch((error: unknown) => {
+                console.error("Failed to update user name during onboarding:", error);
+            });
+    }
+
+    function handleSubmit(e: React.FormEvent): void {
+        e.preventDefault();
+        handleNext();
+    }
+
+    if (!user) {
+        return (
+            <div className="flex flex-col gap-6">
+                <h1 className="text-4xl">You need to sign in to continue</h1>
+                <Link href="/login">Login</Link>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col gap-4">
+            <NavMenu>
+                <p className="text-base text-zinc-600">
+                    Step {getStepNumberFor("name")} of {totalSteps}
+                </p>
+            </NavMenu>
+            <h1 className="text-4xl">
+                What should we call you?
+            </h1>
+
+            <form onSubmit={handleSubmit} className="flex flex-col group">
+                <div className="relative flex flex-col">
+                    <input type="text" autoFocus name="name" autoComplete="name" autoCorrect="off" autoCapitalize="none" spellCheck="false" className="text-black outline-0 text-2xl h-12 font-normal p-0" placeholder="John Doe" value={name} onChange={(e) => setName(e.target.value)} />
+                    <AnimatePresence
+                        mode="popLayout">
+                        {
+                            name && (
+                                <motion.div
+                                    animate={{ opacity: 1 }}
+                                    exit={{ opacity: 0 }}
+                                    initial={{ opacity: 0 }}
+                                    key="next"
+                                    transition={{ duration: 0.15 }}
+                                    className="absolute pointer-events-none inset-0 flex items-center justify-end">
+                                    <button type="submit" className="cursor-pointer transition-colors duration-150 gap-2 pointer-events-auto flex items-center p-2 hover:bg-zinc-100 rounded-lg">
+                                        <CheckIcon className="w-4 h-4" />
+                                        {/* <span className="text-sm">Next</span> */}
+                                    </button>
+                                </motion.div>
+                            )
+                        }
+                    </AnimatePresence>
+                </div>
+                <div className="w-full rounded-full group-focus-within:bg-zinc-400 transition-colors h-px bg-zinc-200"></div>
+            </form>
+
+
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/app/onboarding/nav-menu.tsx b/apps/web/app/onboarding/nav-menu.tsx
new file mode 100644
index 00000000..e66187d2
--- /dev/null
+++ b/apps/web/app/onboarding/nav-menu.tsx
@@ -0,0 +1,44 @@
+"use client";
+import {
+    HoverCard,
+    HoverCardContent,
+    HoverCardTrigger,
+} from "@ui/components/hover-card"
+import { useOnboarding, type OnboardingStep } from "./onboarding-context";
+import { useState } from "react";
+import { cn } from "@lib/utils";
+
+export function NavMenu({ children }: { children: React.ReactNode }) {
+    const { setStep, currentStep, visibleSteps, getStepNumberFor } = useOnboarding();
+    const [open, setOpen] = useState(false);
+    const LABELS: Record<OnboardingStep, string> = {
+        intro: "Intro",
+        name: "Name",
+        bio: "About you",
+        connections: "Connections",
+        mcp: "MCP",
+        extension: "Extension",
+        welcome: "Welcome",
+    };
+    const navigableSteps = visibleSteps.filter(step => step !== "intro" && step !== "welcome");
+    return (
+        <HoverCard openDelay={100} open={open} onOpenChange={setOpen}>
+            <HoverCardTrigger className="w-fit" asChild>{children}</HoverCardTrigger>
+            <HoverCardContent align="start" side="left" sideOffset={24} className="origin-top-right bg-white border border-zinc-200 text-zinc-900">
+                <h2 className="text-zinc-900 text-sm font-medium">Go to step</h2>
+                <ul className="text-sm mt-2">
+                    {navigableSteps.map((step) => (
+                        <li key={step}>
+                            <button type="button" className={cn("py-1.5 px-2 rounded-md hover:bg-zinc-100 w-full text-left", currentStep === step && "bg-zinc-100")} onClick={() => {
+                                setStep(step);
+                                setOpen(false);
+                            }}>
+                                {getStepNumberFor(step)}. {LABELS[step]}
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            </HoverCardContent>
+        </HoverCard>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/app/onboarding/onboarding-context.tsx b/apps/web/app/onboarding/onboarding-context.tsx
new file mode 100644
index 00000000..13e13139
--- /dev/null
+++ b/apps/web/app/onboarding/onboarding-context.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, type ReactNode, useMemo } from "react";
+import { useQueryState } from "nuqs";
+import { useIsMobile } from "@hooks/use-mobile";
+
+// Define the context interface
+interface OnboardingContextType {
+    currentStep: OnboardingStep;
+    setStep: (step: OnboardingStep) => void;
+    nextStep: () => void;
+    previousStep: () => void;
+    totalSteps: number;
+    currentStepIndex: number;
+    // Visible-step aware helpers
+    visibleSteps: OnboardingStep[];
+    currentVisibleStepIndex: number;
+    currentVisibleStepNumber: number;
+    getStepNumberFor: (step: OnboardingStep) => number;
+    introTriggers: {
+        first: boolean;
+        second: boolean;
+        third: boolean;
+        fourth: boolean;
+    };
+    orbsRevealed: boolean;
+    resetIntroTriggers: () => void;
+}
+
+// Create the context
+const OnboardingContext = createContext<OnboardingContextType | undefined>(undefined);
+
+// Define the base step order
+const BASE_STEP_ORDER = ["intro", "name", "bio", "connections", "mcp", "extension", "welcome"] as const;
+
+export type OnboardingStep = (typeof BASE_STEP_ORDER)[number];
+
+interface OnboardingProviderProps {
+    children: ReactNode;
+    initialStep?: OnboardingStep;
+}
+
+export function OnboardingProvider({ children, initialStep = "intro" }: OnboardingProviderProps) {
+    // Helper function to validate if a step is valid
+    const isValidStep = (step: string): step is OnboardingStep => {
+        return BASE_STEP_ORDER.includes(step as OnboardingStep);
+    };
+
+    const [currentStep, setCurrentStep] = useQueryState("step", {
+        defaultValue: initialStep,
+        parse: (value: string) => {
+            // Validate the step from URL - if invalid, use the initial step
+            return isValidStep(value) ? value : initialStep;
+        },
+        serialize: (value: OnboardingStep) => value,
+    });
+    const [orbsRevealed, setOrbsRevealed] = useState(false);
+    const [introTriggers, setIntroTriggers] = useState({
+        first: false,
+        second: false,
+        third: false,
+        fourth: false
+    });
+    const isMobile = useIsMobile();
+
+    // Compute visible steps based on device
+    const visibleSteps = useMemo(() => {
+        if (isMobile) {
+            // On mobile, hide MCP and Extension steps
+            return BASE_STEP_ORDER.filter(s => s !== "mcp" && s !== "extension");
+        }
+        return [...BASE_STEP_ORDER];
+    }, [isMobile]);
+
+    // Setup intro trigger timings when on intro step
+    useEffect(() => {
+        if (currentStep !== "intro") return;
+
+        const cleanups = [
+            setTimeout(() => {
+                setIntroTriggers(prev => ({ ...prev, first: true }));
+            }, 300),
+            setTimeout(() => {
+                setIntroTriggers(prev => ({ ...prev, second: true }));
+            }, 2000),
+            setTimeout(() => {
+                setIntroTriggers(prev => ({ ...prev, third: true }));
+            }, 4000),
+            setTimeout(() => {
+                setIntroTriggers(prev => ({ ...prev, fourth: true }));
+            }, 5500),
+        ];
+
+        return () => cleanups.forEach(cleanup => clearTimeout(cleanup));
+    }, [currentStep]);
+
+    // Set orbs as revealed once the fourth trigger is activated OR if we're on any non-intro step
+    useEffect(() => {
+        if (currentStep !== "intro") {
+            // If we're not on the intro step, orbs should always be visible
+            // (user has either completed intro or navigated directly to another step)
+            if (!orbsRevealed) {
+                setOrbsRevealed(true);
+            }
+        } else if (introTriggers.fourth && !orbsRevealed) {
+            // On intro step, reveal orbs only after the fourth trigger
+            setOrbsRevealed(true);
+        }
+    }, [introTriggers.fourth, orbsRevealed, currentStep]);
+
+    // Ensure current step is always part of visible steps; if not, advance to the next visible step
+    useEffect(() => {
+        if (!visibleSteps.includes(currentStep)) {
+            if (visibleSteps.length === 0) return;
+            const baseIndex = BASE_STEP_ORDER.indexOf(currentStep);
+            // Find the next visible step after the current base index
+            const nextAfterBase = visibleSteps.find(step => BASE_STEP_ORDER.indexOf(step) > baseIndex);
+            const targetStep = nextAfterBase ?? visibleSteps[visibleSteps.length - 1]!;
+            setCurrentStep(targetStep);
+        }
+    }, [visibleSteps, currentStep]);
+
+    function setStep(step: OnboardingStep) {
+        setCurrentStep(step);
+    }
+
+    function nextStep() {
+        const currentIndex = visibleSteps.indexOf(currentStep);
+        const nextIndex = currentIndex + 1;
+
+        if (nextIndex < visibleSteps.length) {
+            setStep(visibleSteps[nextIndex]!);
+        }
+    }
+
+    function previousStep() {
+        const currentIndex = visibleSteps.indexOf(currentStep);
+        const previousIndex = currentIndex - 1;
+
+        if (previousIndex >= 0) {
+            setStep(visibleSteps[previousIndex]!);
+        }
+    }
+
+    function resetIntroTriggers() {
+        setIntroTriggers({
+            first: false,
+            second: false,
+            third: false,
+            fourth: false
+        });
+    }
+
+    const currentStepIndex = BASE_STEP_ORDER.indexOf(currentStep);
+
+    // Visible-step aware helpers
+    const stepsForNumbering = useMemo(() => visibleSteps.filter(s => s !== "intro" && s !== "welcome"), [visibleSteps]);
+
+    function getStepNumberFor(step: OnboardingStep): number {
+        if (step === "intro" || step === "welcome") {
+            return 0;
+        }
+        const idx = stepsForNumbering.indexOf(step);
+        return idx === -1 ? 0 : idx + 1;
+    }
+
+    const currentVisibleStepIndex = useMemo(() => visibleSteps.indexOf(currentStep), [visibleSteps, currentStep]);
+    const currentVisibleStepNumber = useMemo(() => getStepNumberFor(currentStep), [currentStep, stepsForNumbering]);
+    const totalSteps = stepsForNumbering.length;
+
+    const contextValue: OnboardingContextType = {
+        currentStep,
+        setStep,
+        nextStep,
+        previousStep,
+        totalSteps,
+        currentStepIndex,
+        visibleSteps,
+        currentVisibleStepIndex,
+        currentVisibleStepNumber,
+        getStepNumberFor,
+        introTriggers,
+        orbsRevealed,
+        resetIntroTriggers,
+    };
+
+    return (
+        <OnboardingContext.Provider value={contextValue}>
+            {children}
+        </OnboardingContext.Provider>
+    );
+}
+
+export function useOnboarding() {
+    const context = useContext(OnboardingContext);
+
+    if (context === undefined) {
+        throw new Error("useOnboarding must be used within an OnboardingProvider");
+    }
+
+    return context;
+}
diff --git a/apps/web/app/onboarding/onboarding-form.tsx b/apps/web/app/onboarding/onboarding-form.tsx
new file mode 100644
index 00000000..962f8e47
--- /dev/null
+++ b/apps/web/app/onboarding/onboarding-form.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { motion, AnimatePresence } from "motion/react";
+import { NameForm } from "./name-form";
+import { Intro } from "./intro";
+import { useOnboarding } from "./onboarding-context";
+import { BioForm } from "./bio-form";
+import { ConnectionsForm } from "./connections-form";
+import { ExtensionForm } from "./extension-form";
+import { MCPForm } from "./mcp-form";
+import { Welcome } from "./welcome";
+
+export function OnboardingForm() {
+    const { currentStep, resetIntroTriggers } = useOnboarding();
+
+    return (
+        <div className="text-6xl px-6 py-8 tracking-wide font-bold font-serif flex flex-col justify-center max-sm:w-full">
+            <AnimatePresence mode="wait" onExitComplete={resetIntroTriggers}>
+                {currentStep === "intro" && (
+                    <motion.div
+                        key="intro"
+                        initial={{ opacity: 0, filter: "blur(10px)", scale: 0.98 }}
+                        animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+                        exit={{ opacity: 0, filter: "blur(10px)", scale: 0.98 }}
+                        transition={{ duration: 0.28, ease: "easeInOut" }}
+                    >
+                        <Intro />
+                    </motion.div>
+                )}
+                {currentStep === "name" && (
+                    <motion.div
+                        key="name"
+                        initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+                        exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        transition={{ duration: 0.3, ease: "easeOut" }}
+                    >
+                        <NameForm />
+                    </motion.div>
+                )}
+                {currentStep === "bio" && (
+                    <motion.div
+                        key="bio"
+                        initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+                        exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        transition={{ duration: 0.3, ease: "easeOut" }}
+                    >
+                        <BioForm />
+                    </motion.div>
+                )}
+                {currentStep === "connections" && (
+                    <motion.div
+                        key="connections"
+                        initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+                        exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        transition={{ duration: 0.3, ease: "easeOut" }}
+                    >
+                        <ConnectionsForm />
+                    </motion.div>
+                )}
+                {currentStep === "mcp" && (
+                    <motion.div
+                        key="mcp"
+                        initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+                        exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        transition={{ duration: 0.3, ease: "easeOut" }}
+                    >
+                        <MCPForm />
+                    </motion.div>
+                )}
+                {currentStep === "extension" && (
+                    <motion.div
+                        key="extension"
+                        initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+                        exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        transition={{ duration: 0.3, ease: "easeOut" }}
+                    >
+                        <ExtensionForm />
+                    </motion.div>
+                )}
+                {currentStep === "welcome" && (
+                    <motion.div
+                        key="welcome"
+                        initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+                        exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+                        transition={{ duration: 0.3, ease: "easeOut" }}
+                    >
+                        <Welcome />
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/app/onboarding/page.tsx b/apps/web/app/onboarding/page.tsx
new file mode 100644
index 00000000..b04f1349
--- /dev/null
+++ b/apps/web/app/onboarding/page.tsx
@@ -0,0 +1,28 @@
+import { getSession } from "@lib/auth";
+import { OnboardingForm } from "./onboarding-form";
+import { OnboardingProvider } from "./onboarding-context";
+import { FloatingOrbs } from "./floating-orbs";
+import { OnboardingProgressBar } from "./progress-bar";
+import { redirect } from "next/navigation";
+import { type Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Welcome to Supermemory",
+    description: "We're excited to have you on board.",
+};
+
+export default function OnboardingPage() {
+    const session = getSession();
+
+    if (!session) redirect("/login");
+
+    return (
+        <div className="min-h-screen w-full overflow-x-hidden text-zinc-900 bg-white flex items-center justify-center relative">
+            <OnboardingProvider>
+                <OnboardingProgressBar />
+                <FloatingOrbs />
+                <OnboardingForm />
+            </OnboardingProvider>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/app/onboarding/progress-bar.tsx b/apps/web/app/onboarding/progress-bar.tsx
new file mode 100644
index 00000000..9bc01b01
--- /dev/null
+++ b/apps/web/app/onboarding/progress-bar.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { motion } from "motion/react";
+import { useOnboarding } from "./onboarding-context";
+
+export function OnboardingProgressBar() {
+    const { currentVisibleStepNumber, totalSteps } = useOnboarding();
+
+    const progress = totalSteps === 0
+        ? 0
+        : (currentVisibleStepNumber / totalSteps) * 100;
+
+    return (
+        <div className="fixed top-0 left-0 right-0 z-50 h-1 bg-zinc-200">
+            <motion.div
+                className="h-full bg-gradient-to-r from-orange-500 via-amber-500 to-gold-600"
+                initial={{ width: "0%" }}
+                animate={{ width: `${progress}%` }}
+                transition={{
+                    duration: 0.8,
+                    ease: "easeInOut"
+                }}
+            />
+        </div>
+    );
+}
diff --git a/apps/web/app/onboarding/welcome.tsx b/apps/web/app/onboarding/welcome.tsx
new file mode 100644
index 00000000..d3b19dcd
--- /dev/null
+++ b/apps/web/app/onboarding/welcome.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Button } from "@ui/components/button";
+import { ArrowRightIcon, ChevronRightIcon } from "lucide-react";
+
+export function Welcome() {
+    return (
+        <div className="flex flex-col gap-4 items-center text-center">
+            <h1>Welcome to Supermemory</h1>
+            <p className="text-zinc-600 text-2xl">
+                We're excited to have you on board.
+            </p>
+
+            <a href="/" className="tracking-normal w-fit flex items-center justify-center text-2xl underline cursor-pointer font-medium text-zinc-900">
+                Get started
+                <ArrowRightIcon className="size-4 ml-2" />
+            </a>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/components/text-effect.tsx b/apps/web/components/text-effect.tsx
new file mode 100644
index 00000000..82c6823c
--- /dev/null
+++ b/apps/web/components/text-effect.tsx
@@ -0,0 +1,294 @@
+'use client';
+import { cn } from '@lib/utils';
+import {
+    AnimatePresence,
+    motion
+} from 'motion/react';
+import type {
+    TargetAndTransition,
+    Transition,
+    Variant,
+    Variants,
+} from 'motion/react'
+import React from 'react';
+
+export type PresetType = 'blur' | 'fade-in-blur' | 'scale' | 'fade' | 'slide';
+
+export type PerType = 'word' | 'char' | 'line';
+
+export type TextEffectProps = {
+    children: string;
+    per?: PerType;
+    as?: keyof React.JSX.IntrinsicElements;
+    variants?: {
+        container?: Variants;
+        item?: Variants;
+    };
+    className?: string;
+    preset?: PresetType;
+    delay?: number;
+    speedReveal?: number;
+    speedSegment?: number;
+    trigger?: boolean;
+    onAnimationComplete?: () => void;
+    onAnimationStart?: () => void;
+    segmentWrapperClassName?: string;
+    containerTransition?: Transition;
+    segmentTransition?: Transition;
+    style?: React.CSSProperties;
+};
+
+const defaultStaggerTimes: Record<PerType, number> = {
+    char: 0.03,
+    word: 0.05,
+    line: 0.1,
+};
+
+const defaultContainerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.05,
+        },
+    },
+    exit: {
+        transition: { staggerChildren: 0.05, staggerDirection: -1 },
+    },
+};
+
+const defaultItemVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+    },
+    exit: { opacity: 0 },
+};
+
+const presetVariants: Record<
+    PresetType,
+    { container: Variants; item: Variants }
+> = {
+    blur: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { opacity: 0, filter: 'blur(12px)' },
+            visible: { opacity: 1, filter: 'blur(0px)' },
+            exit: { opacity: 0, filter: 'blur(12px)' },
+        },
+    },
+    'fade-in-blur': {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { opacity: 0, y: 20, filter: 'blur(12px)' },
+            visible: { opacity: 1, y: 0, filter: 'blur(0px)' },
+            exit: { opacity: 0, y: 20, filter: 'blur(12px)' },
+        },
+    },
+    scale: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { opacity: 0, scale: 0 },
+            visible: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0 },
+        },
+    },
+    fade: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { opacity: 0 },
+            visible: { opacity: 1 },
+            exit: { opacity: 0 },
+        },
+    },
+    slide: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { opacity: 0, y: 20 },
+            visible: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: 20 },
+        },
+    },
+};
+
+const AnimationComponent: React.FC<{
+    segment: string;
+    variants: Variants;
+    per: 'line' | 'word' | 'char';
+    segmentWrapperClassName?: string;
+}> = React.memo(({ segment, variants, per, segmentWrapperClassName }) => {
+    const content =
+        per === 'line' ? (
+            <motion.span variants={variants} className='block'>
+                {segment}
+            </motion.span>
+        ) : per === 'word' ? (
+            <motion.span
+                aria-hidden='true'
+                variants={variants}
+                className='inline-block whitespace-pre'
+            >
+                {segment}
+            </motion.span>
+        ) : (
+            <motion.span className='inline-block whitespace-pre'>
+                {segment.split('').map((char, charIndex) => (
+                    <motion.span
+                        key={`char-${charIndex}`}
+                        aria-hidden='true'
+                        variants={variants}
+                        className='inline-block whitespace-pre'
+                    >
+                        {char}
+                    </motion.span>
+                ))}
+            </motion.span>
+        );
+
+    if (!segmentWrapperClassName) {
+        return content;
+    }
+
+    const defaultWrapperClassName = per === 'line' ? 'block' : 'inline-block';
+
+    return (
+        <span className={cn(defaultWrapperClassName, segmentWrapperClassName)}>
+            {content}
+        </span>
+    );
+});
+
+AnimationComponent.displayName = 'AnimationComponent';
+
+const splitText = (text: string, per: PerType) => {
+    if (per === 'line') return text.split('\n');
+    return text.split(/(\s+)/);
+};
+
+const hasTransition = (
+    variant?: Variant
+): variant is TargetAndTransition & { transition?: Transition } => {
+    if (!variant) return false;
+    return (
+        typeof variant === 'object' && 'transition' in variant
+    );
+};
+
+const createVariantsWithTransition = (
+    baseVariants: Variants,
+    transition?: Transition & { exit?: Transition }
+): Variants => {
+    if (!transition) return baseVariants;
+
+    const { exit: _, ...mainTransition } = transition;
+
+    return {
+        ...baseVariants,
+        visible: {
+            ...baseVariants.visible,
+            transition: {
+                ...(hasTransition(baseVariants.visible)
+                    ? baseVariants.visible.transition
+                    : {}),
+                ...mainTransition,
+            },
+        },
+        exit: {
+            ...baseVariants.exit,
+            transition: {
+                ...(hasTransition(baseVariants.exit)
+                    ? baseVariants.exit.transition
+                    : {}),
+                ...mainTransition,
+                staggerDirection: -1,
+            },
+        },
+    };
+};
+
+export function TextEffect({
+    children,
+    per = 'word',
+    as = 'p',
+    variants,
+    className,
+    preset = 'fade',
+    delay = 0,
+    speedReveal = 1,
+    speedSegment = 1,
+    trigger = true,
+    onAnimationComplete,
+    onAnimationStart,
+    segmentWrapperClassName,
+    containerTransition,
+    segmentTransition,
+    style,
+}: TextEffectProps) {
+    const segments = splitText(children, per);
+    const MotionTag = motion[as as keyof typeof motion] as typeof motion.div;
+
+    const baseVariants = preset
+        ? presetVariants[preset]
+        : { container: defaultContainerVariants, item: defaultItemVariants };
+
+    const stagger = defaultStaggerTimes[per] / speedReveal;
+
+    const baseDuration = 0.3 / speedSegment;
+
+    const customStagger = hasTransition(variants?.container?.visible ?? {})
+        ? (variants?.container?.visible as TargetAndTransition).transition
+            ?.staggerChildren
+        : undefined;
+
+    const customDelay = hasTransition(variants?.container?.visible ?? {})
+        ? (variants?.container?.visible as TargetAndTransition).transition
+            ?.delayChildren
+        : undefined;
+
+    const computedVariants = {
+        container: createVariantsWithTransition(
+            variants?.container || baseVariants.container,
+            {
+                staggerChildren: customStagger ?? stagger,
+                delayChildren: customDelay ?? delay,
+                ...containerTransition,
+                exit: {
+                    staggerChildren: customStagger ?? stagger,
+                    staggerDirection: -1,
+                },
+            }
+        ),
+        item: createVariantsWithTransition(variants?.item || baseVariants.item, {
+            duration: baseDuration,
+            ...segmentTransition,
+        }),
+    };
+
+    return (
+        <AnimatePresence mode='popLayout'>
+            {trigger && (
+                <MotionTag
+                    initial='hidden'
+                    animate='visible'
+                    exit='exit'
+                    variants={computedVariants.container}
+                    className={className}
+                    onAnimationComplete={onAnimationComplete}
+                    onAnimationStart={onAnimationStart}
+                    style={style}
+                >
+                    {per !== 'line' ? <span className='sr-only'>{children}</span> : null}
+                    {segments.map((segment, index) => (
+                        <AnimationComponent
+                            key={`${per}-${index}-${segment}`}
+                            segment={segment}
+                            variants={computedVariants.item}
+                            per={per}
+                            segmentWrapperClassName={segmentWrapperClassName}
+                        />
+                    ))}
+                </MotionTag>
+            )}
+        </AnimatePresence>
+    );
+}
diff --git a/apps/web/components/text-morph.tsx b/apps/web/components/text-morph.tsx
new file mode 100644
index 00000000..467dc999
--- /dev/null
+++ b/apps/web/components/text-morph.tsx
@@ -0,0 +1,74 @@
+'use client';
+import { cn } from '@lib/utils';
+import { AnimatePresence, motion, type Transition, type Variants } from 'motion/react';
+import { useMemo, useId } from 'react';
+
+export type TextMorphProps = {
+    children: string;
+    as?: React.ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+    variants?: Variants;
+    transition?: Transition;
+};
+
+export function TextMorph({
+    children,
+    as: Component = 'p',
+    className,
+    style,
+    variants,
+    transition,
+}: TextMorphProps) {
+    const uniqueId = useId();
+
+    const characters = useMemo(() => {
+        const charCounts: Record<string, number> = {};
+
+        return children.split('').map((char) => {
+            const lowerChar = char.toLowerCase();
+            charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1;
+
+            return {
+                id: `${uniqueId}-${lowerChar}${charCounts[lowerChar]}`,
+                label: char === ' ' ? '\u00A0' : char,
+            };
+        });
+    }, [children, uniqueId]);
+
+    const defaultVariants: Variants = {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+    };
+
+    const defaultTransition: Transition = {
+        type: 'spring',
+        stiffness: 280,
+        damping: 18,
+        mass: 0.3,
+    };
+
+    return (
+        // @ts-expect-error - style is optional
+        <Component className={cn(className)} aria-label={children} style={style}>
+            <AnimatePresence mode='popLayout' initial={false}>
+                {characters.map((character) => (
+                    <motion.span
+                        key={character.id}
+                        layoutId={character.id}
+                        className='inline-block'
+                        aria-hidden='true'
+                        initial='initial'
+                        animate='animate'
+                        exit='exit'
+                        variants={variants || defaultVariants}
+                        transition={transition || defaultTransition}
+                    >
+                        {character.label}
+                    </motion.span>
+                ))}
+            </AnimatePresence>
+        </Component>
+    );
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 54d69020..057532f4 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -57,13 +57,14 @@
 		"dotenv": "^16.6.0",
 		"embla-carousel-autoplay": "^8.6.0",
 		"embla-carousel-react": "^8.6.0",
+		"framer-motion": "^12.23.12",
 		"is-hotkey": "^0.2.0",
 		"isbot": "^5.1.28",
 		"lucide-react": "^0.525.0",
 		"motion": "^12.19.2",
 		"next": "15.3.0",
 		"next-themes": "^0.4.6",
-		"nuqs": "^2.4.3",
+		"nuqs": "^2.5.2",
 		"posthog-js": "^1.257.0",
 		"random-word-slugs": "^0.1.7",
 		"react": "^19.1.0",
diff --git a/apps/web/public/images/gdrive.svg b/apps/web/public/images/gdrive.svg
new file mode 100644
index 00000000..a8cefd5b
--- /dev/null
+++ b/apps/web/public/images/gdrive.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg">
+	<path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
+	<path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
+	<path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
+	<path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
+	<path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
+	<path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
+</svg>
\ No newline at end of file
diff --git a/apps/web/public/images/icon-16.png b/apps/web/public/images/icon-16.png
new file mode 100644
index 0000000000000000000000000000000000000000..549d267d0b2fe5c64fcd185d7295dea150a59ba5
GIT binary patch
literal 33814
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

literal 0
HcmV?d00001

diff --git a/apps/web/public/images/notion.svg b/apps/web/public/images/notion.svg
new file mode 100644
index 00000000..bf6442f7
--- /dev/null
+++ b/apps/web/public/images/notion.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z" fill="#fff"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z" fill="#000"/>
+</svg>
diff --git a/apps/web/public/images/onedrive.svg b/apps/web/public/images/onedrive.svg
new file mode 100644
index 00000000..f7d7a6a6
--- /dev/null
+++ b/apps/web/public/images/onedrive.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 5.5 32 20.5"><title>OfficeCore10_32x_24x_20x_16x_01-22-2019</title><g id="STYLE_COLOR"><path d="M12.20245,11.19292l.00031-.0011,6.71765,4.02379,4.00293-1.68451.00018.00068A6.4768,6.4768,0,0,1,25.5,13c.14764,0,.29358.0067.43878.01639a10.00075,10.00075,0,0,0-18.041-3.01381C7.932,10.00215,7.9657,10,8,10A7.96073,7.96073,0,0,1,12.20245,11.19292Z" fill="#0364b8"/><path d="M12.20276,11.19182l-.00031.0011A7.96073,7.96073,0,0,0,8,10c-.0343,0-.06805.00215-.10223.00258A7.99676,7.99676,0,0,0,1.43732,22.57277l5.924-2.49292,2.63342-1.10819,5.86353-2.46746,3.06213-1.28859Z" fill="#0078d4"/><path d="M25.93878,13.01639C25.79358,13.0067,25.64764,13,25.5,13a6.4768,6.4768,0,0,0-2.57648.53178l-.00018-.00068-4.00293,1.68451,1.16077.69528L23.88611,18.19l1.66009.99438,5.67633,3.40007a6.5002,6.5002,0,0,0-5.28375-9.56805Z" fill="#1490df"/><path d="M25.5462,19.18437,23.88611,18.19l-3.80493-2.2791-1.16077-.69528L15.85828,16.5042,9.99475,18.97166,7.36133,20.07985l-5.924,2.49292A7.98889,7.98889,0,0,0,8,26H25.5a6.49837,6.49837,0,0,0,5.72253-3.41556Z" fill="#28a8ea"/></g></svg>
\ No newline at end of file
diff --git a/bun.lock b/bun.lock
index 7e4ca681..1d76152f 100644
--- a/bun.lock
+++ b/bun.lock
@@ -121,13 +121,14 @@
         "dotenv": "^16.6.0",
         "embla-carousel-autoplay": "^8.6.0",
         "embla-carousel-react": "^8.6.0",
+        "framer-motion": "^12.23.12",
         "is-hotkey": "^0.2.0",
         "isbot": "^5.1.28",
         "lucide-react": "^0.525.0",
         "motion": "^12.19.2",
         "next": "15.3.0",
         "next-themes": "^0.4.6",
-        "nuqs": "^2.4.3",
+        "nuqs": "^2.5.2",
         "posthog-js": "^1.257.0",
         "random-word-slugs": "^0.1.7",
         "react": "^19.1.0",
@@ -224,6 +225,7 @@
         "@radix-ui/react-collapsible": "^1.1.11",
         "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-hover-card": "^1.1.15",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-popover": "^1.1.14",
         "@radix-ui/react-progress": "^1.1.7",
@@ -1050,6 +1052,8 @@
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
 
+    "@radix-ui/react-hover-card": ["@radix-ui/react-hover-card@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg=="],
+
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
     "@radix-ui/react-label": ["@radix-ui/react-label@2.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ=="],
@@ -3390,7 +3394,7 @@
 
     "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="],
 
-    "nuqs": ["nuqs@2.5.1", "", { "dependencies": { "@standard-schema/spec": "1.0.0" }, "peerDependencies": { "@remix-run/react": ">=2", "@tanstack/react-router": "^1", "next": ">=14.2.0", "react": ">=18.2.0 || ^19.0.0-0", "react-router": "^6 || ^7", "react-router-dom": "^6 || ^7" }, "optionalPeers": ["@remix-run/react", "@tanstack/react-router", "next", "react-router", "react-router-dom"] }, "sha512-YvAyI01gaEfS6U2iTcfffKccGkqYRnGmLoCHvDjK4ShgtB0tKmYgC7+ez9PmdaiDmrLR+y1qHzfQC66T0VFwWQ=="],
+    "nuqs": ["nuqs@2.5.2", "", { "dependencies": { "@standard-schema/spec": "1.0.0" }, "peerDependencies": { "@remix-run/react": ">=2", "@tanstack/react-router": "^1", "next": ">=14.2.0", "react": ">=18.2.0 || ^19.0.0-0", "react-router": "^6 || ^7", "react-router-dom": "^6 || ^7" }, "optionalPeers": ["@remix-run/react", "@tanstack/react-router", "next", "react-router", "react-router-dom"] }, "sha512-vzKeoYlMRmNYPWECdn53Nmh/jM+r/iSezEin342EVXPogT6KzALwdnYbZxASE5vTdXRUtOymtPkgsarLipKetg=="],
 
     "nypm": ["nypm@0.6.1", "", { "dependencies": { "citty": "^0.1.6", "consola": "^3.4.2", "pathe": "^2.0.3", "pkg-types": "^2.2.0", "tinyexec": "^1.0.1" }, "bin": { "nypm": "dist/cli.mjs" } }, "sha512-hlacBiRiv1k9hZFiphPUkfSQ/ZfQzZDzC+8z0wL3lvDAOUu/2NnChkKuMoMjNur/9OpKuz2QsIeiPVN0xM5Q0w=="],
 
diff --git a/packages/lib/api.ts b/packages/lib/api.ts
index ad343050..bfdc3ac0 100644
--- a/packages/lib/api.ts
+++ b/packages/lib/api.ts
@@ -187,6 +187,11 @@ export const apiSchema = createSchema({
 		}),
 	},
 
+	// MCP operations
+	"@get/mcp/has-login": {
+		output: z.object({ previousLogin: z.boolean() }),
+	},
+
 	// Waitlist operations
 	"@get/waitlist/status": {
 		output: WaitlistStatusResponseSchema,
diff --git a/packages/ui/components/carousel.tsx b/packages/ui/components/carousel.tsx
index 2462c404..2326bd02 100644
--- a/packages/ui/components/carousel.tsx
+++ b/packages/ui/components/carousel.tsx
@@ -181,8 +181,8 @@ function CarouselPrevious({
 			className={cn(
 				"absolute size-8 rounded-full",
 				orientation === "horizontal"
-					? "top-1/2 -left-12 -translate-y-1/2"
-					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+					? "top-1/2 left-2 -translate-y-1/2"
+					: "top-2 left-1/2 -translate-x-1/2 rotate-90",
 				className,
 			)}
 			data-slot="carousel-previous"
@@ -211,8 +211,8 @@ function CarouselNext({
 			className={cn(
 				"absolute size-8 rounded-full",
 				orientation === "horizontal"
-					? "top-1/2 -right-12 -translate-y-1/2"
-					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+					? "top-1/2 right-2 -translate-y-1/2"
+					: "bottom-2 left-1/2 -translate-x-1/2 rotate-90",
 				className,
 			)}
 			data-slot="carousel-next"
diff --git a/packages/ui/components/hover-card.tsx b/packages/ui/components/hover-card.tsx
new file mode 100644
index 00000000..bdf3ce94
--- /dev/null
+++ b/packages/ui/components/hover-card.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2a1bfd1b..7c2a564a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -12,6 +12,7 @@
 		"@radix-ui/react-collapsible": "^1.1.11",
 		"@radix-ui/react-dialog": "^1.1.14",
 		"@radix-ui/react-dropdown-menu": "^2.1.15",
+		"@radix-ui/react-hover-card": "^1.1.15",
 		"@radix-ui/react-label": "^2.1.7",
 		"@radix-ui/react-popover": "^1.1.14",
 		"@radix-ui/react-progress": "^1.1.7",