feat: implement basic layout of landing page

src/server/app.py

@@ -13,7 +13,6 @@ from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import Response, StreamingResponse
 from langchain_core.messages import AIMessageChunk, ToolMessage
 from langgraph.types import Command
-from mcp import ClientSession
 
 from src.graph.builder import build_graph_with_memory
 from src.podcast.graph.builder import build_graph as build_podcast_graph

web/package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-collapsible": "^1.1.8",
     "@radix-ui/react-dialog": "^1.1.10",
     "@radix-ui/react-dropdown-menu": "^2.1.11",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.4",
     "@radix-ui/react-scroll-area": "^1.2.4",
     "@radix-ui/react-select": "^2.2.2",

web/pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.11
         version: 2.1.11(@types/react-dom@19.1.1(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-icons':
+        specifier: ^1.3.2
+        version: 1.3.2(react@19.1.0)
       '@radix-ui/react-label':
         specifier: ^2.1.4
         version: 2.1.4(@types/react-dom@19.1.1(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -721,6 +724,11 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-icons@1.3.2':
+    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
+    peerDependencies:
+      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
+
   '@radix-ui/react-id@1.1.1':
     resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
@@ -3932,6 +3940,10 @@ snapshots:
       '@types/react': 19.1.2
       '@types/react-dom': 19.1.1(@types/react@19.1.2)
 
+  '@radix-ui/react-icons@1.3.2(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+
   '@radix-ui/react-id@1.1.1(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)

web/src/app/_components/logo.tsx

@@ -1,25 +1,14 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import { useState } from "react";
-
-import { Markdown } from "./markdown";
-
 export function Logo() {
-  const [text, setText] = useState("🦌 DeerFlow");
   return (
     <a
       className="opacity-70 transition-opacity duration-300 hover:opacity-100"
       target="_blank"
       href="https://github.com/bytedance/deer-flow"
-      onMouseEnter={() =>
-        setText(
-          "🦌 **D**eep **E**xploration and **E**fficient **R**esearch Flow",
-        )
-      }
-      onMouseLeave={() => setText("🦌 DeerFlow")}
     >
-      <Markdown animate>{text}</Markdown>
+      🦌 DeerFlow
     </a>
   );
 }

web/src/app/_components/theme-toggle.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
+"use client";
+
 import { Monitor, Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 

web/src/app/chat/main.tsx

@@ -3,24 +3,15 @@
 
 "use client";
 
-import { GithubOutlined } from "@ant-design/icons";
-import Link from "next/link";
 import { useMemo } from "react";
 
-import { Button } from "~/components/ui/button";
-import { useReplay } from "~/core/replay";
 import { useStore } from "~/core/store";
 import { cn } from "~/lib/utils";
 
-import { Logo } from "../_components/logo";
 import { MessagesBlock } from "../_components/messages-block";
 import { ResearchBlock } from "../_components/research-block";
-import { ThemeToggle } from "../_components/theme-toggle";
-import { Tooltip } from "../_components/tooltip";
-import { SettingsDialog } from "../_settings/dialogs/settings-dialog";
 
 export default function Main() {
-  const { isReplay } = useReplay();
   const openResearchId = useStore((state) => state.openResearchId);
   const doubleColumnMode = useMemo(
     () => openResearchId !== null,

web/src/app/chat/page.tsx

@@ -25,9 +25,7 @@ export default function HomePage() {
       <header className="fixed top-0 left-0 flex h-12 w-full w-screen items-center justify-between px-4">
         <Logo />
         <div className="flex items-center">
-          <ThemeToggle />
+          <Tooltip title="Star DeerFlow on GitHub">
-          {!isReplay && <SettingsDialog />}
-          <Tooltip title="Visit DeerFlow on GitHub">
             <Button variant="ghost" size="icon" asChild>
               <Link
                 href="https://github.com/bytedance/deer-flow"
@@ -37,6 +35,8 @@ export default function HomePage() {
               </Link>
             </Button>
           </Tooltip>
+          <ThemeToggle />
+          {!isReplay && <SettingsDialog />}
         </div>
       </header>
       <Suspense fallback={<div>Loading DeerFlow...</div>}>

web/src/app/layout.tsx

@@ -26,7 +26,7 @@ export default function RootLayout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="en" className={`${geist.variable}`} suppressHydrationWarning>
-      <body className="bg-app h-screen w-screen overflow-hidden overscroll-none">
+      <body className="bg-app h-screen w-screen overscroll-none">
         <ThemeProvider
           attribute="class"
           defaultTheme="system"

web/src/app/page.tsx

@@ -1,10 +1,358 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-"use client";
+import { GithubFilled, GithubOutlined } from "@ant-design/icons";
+import {
+  Bird,
+  Book,
+  Camera,
+  ChevronRight,
+  Code,
+  Globe,
+  Home,
+  Lightbulb,
+  Microscope,
+  Network,
+  Paintbrush,
+  Podcast,
+  ShoppingCart,
+  Usb,
+  User,
+} from "lucide-react";
+import Link from "next/link";
 
-import { redirect } from "next/navigation";
+import { AuroraText } from "~/components/magicui/aurora-text";
+import { BentoCard } from "~/components/magicui/bento-grid";
+import { BentoGrid } from "~/components/magicui/bento-grid";
+import { FlickeringGrid } from "~/components/magicui/flickering-grid";
+import { Button } from "~/components/ui/button";
+
+import { ThemeToggle } from "./_components/theme-toggle";
 
 export default function HomePage() {
-  redirect("/chat");
+  return (
+    <div className="flex w-screen flex-col items-center">
+      <Header />
+      <main className="container flex w-screen flex-col items-center justify-center gap-56">
+        <Jumbotron />
+        <CaseStudySection />
+        <CoreFeatureSection />
+        <JoinCommunitySection />
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <header className="supports-backdrop-blur:bg-background/80 bg-background/40 sticky top-0 left-0 z-40 flex h-15 w-screen flex-col items-center backdrop-blur-lg">
+      <div className="container flex h-15 items-center justify-between">
+        <div className="text-xl font-medium">
+          <span className="mr-1">🦌</span>
+          <span>DeerFlow</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" asChild>
+            <Link href="https://github.com/bytedance/deer-flow" target="_blank">
+              <GithubOutlined />
+              Star on GitHub
+            </Link>
+          </Button>
+          <ThemeToggle />
+        </div>
+      </div>
+      <hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" />
+    </header>
+  );
+}
+
+function Footer() {
+  return (
+    <footer className="container mt-32 flex w-screen flex-col items-center justify-center">
+      <hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" />
+      <div className="text-muted-foreground container flex h-20 flex-col items-center justify-center text-sm">
+        <p className="font-serif text-xl">
+          &quot;Originated from Open Source, give back to Open Source.&quot;
+        </p>
+      </div>
+      <div className="text-muted-foreground container mb-8 flex flex-col items-center justify-center text-xs">
+        <p>Licensed under MIT License</p>
+        <p>&copy; 2025 DeepFlow</p>
+      </div>
+    </footer>
+  );
+}
+
+function SectionHeader({
+  title,
+  description,
+}: {
+  title: React.ReactNode;
+  description: React.ReactNode;
+}) {
+  return (
+    <div className="mb-12 flex flex-col items-center justify-center gap-2">
+      <h2 className="mb-4 bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-5xl font-bold text-transparent">
+        {title}
+      </h2>
+      <p className="text-muted-foreground text-center text-xl">{description}</p>
+    </div>
+  );
+}
+
+function Jumbotron() {
+  return (
+    <section className="relative flex h-[95vh] w-screen flex-col items-center justify-center pb-15">
+      <FlickeringGrid
+        id="deer-hero-bg"
+        className={`absolute inset-0 z-0 [mask-image:radial-gradient(800px_circle_at_center,white,transparent)]`}
+        squareSize={4}
+        gridGap={4}
+        color="#60A5FA"
+        maxOpacity={0.16}
+        flickerChance={0.1}
+      />
+      <FlickeringGrid
+        id="deer-hero"
+        className={`absolute inset-0 z-0 mask-[url(/images/deer-hero.svg)] mask-size-[38%] mask-center mask-no-repeat`}
+        squareSize={3}
+        gridGap={6}
+        color="#60A5FA"
+        maxOpacity={0.5}
+        flickerChance={0.12}
+      />
+      <div className="relative z-10 flex flex-col items-center justify-center gap-12">
+        <h1 className="text-5xl font-bold">
+          <span className="bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
+            Deep Research{" "}
+          </span>
+          <AuroraText>at Your Fingertips</AuroraText>
+        </h1>
+        <p className="text-muted-foreground text-center text-xl">
+          Discover the revolutionary Multi-Agent Research Assistant that
+          empowers you to dive
+          <br />
+          deeper and wider into any subject. Equipped with the powerful tools
+          like search
+          <br />
+          engines, crawlers, Python, and MCP services, DeerFlow provides instant
+          <br />
+          insights, in-depth reports and even captivating podcasts.
+        </p>
+        <div className="flex gap-6">
+          <Button className="w-42 text-lg" size="lg" asChild>
+            <Link href="/chat">
+              Get Started <ChevronRight />
+            </Link>
+          </Button>
+          <Button className="w-42 text-lg" size="lg" variant="outline" asChild>
+            <Link href="https://github.com/bytedance/deer-flow" target="_blank">
+              <GithubFilled />
+              Learn More
+            </Link>
+          </Button>
+        </div>
+      </div>
+      <div className="absolute bottom-8 flex text-sm opacity-40">
+        <p>* DEER stands for Deep Exploration and Efficient Research.</p>
+      </div>
+    </section>
+  );
+}
+
+const caseStudies = [
+  {
+    icon: Home,
+    title: "Design a futuristic smart home for a family of 4",
+    description:
+      "DeepFlow generates innovative concepts and detailed blueprints for a cutting-edge smart home, incorporating AI-driven automation and sustainable energy solutions.",
+  },
+  {
+    icon: Book,
+    title: "Write a historical fiction novel set in ancient Rome",
+    description:
+      "DeepFlow assists in crafting compelling characters, intricate plots, and historically accurate settings to bring your ancient Roman story to life.",
+  },
+  {
+    icon: ShoppingCart,
+    title: "Create a marketing campaign for a new eco-friendly product",
+    description:
+      "DeepFlow develops a strategic marketing plan, including social media content, ad designs, and audience targeting strategies to promote your sustainable product effectively.",
+  },
+  {
+    icon: Lightbulb,
+    title: "Invent a groundbreaking renewable energy solution",
+    description:
+      "DeepFlow helps brainstorm innovative ideas and provides technical schematics for a renewable energy solution that addresses global energy challenges.",
+  },
+  {
+    icon: Camera,
+    title: "Direct a short film about climate change",
+    description:
+      "DeepFlow assists in developing a compelling script, visual storyboards, and production plans to create an impactful short film on environmental issues.",
+  },
+  {
+    icon: Globe,
+    title: "Plan a sustainable travel itinerary for eco-conscious tourists",
+    description:
+      "DeepFlow designs a detailed travel plan featuring eco-friendly accommodations, activities, and transportation options for environmentally aware travelers.",
+  },
+  {
+    icon: Code,
+    title: "Develop an AI-powered app for mental health support",
+    description:
+      "DeepFlow provides guidance on app design, user experience, and AI integration to create a tool that offers personalized mental health resources and support.",
+  },
+  {
+    icon: Paintbrush,
+    title: "Create an immersive art installation on human connection",
+    description:
+      "DeepFlow assists in conceptualizing and designing an interactive art installation that explores themes of empathy, relationships, and the power of human connection.",
+  },
+];
+
+function CaseStudySection() {
+  return (
+    <section className="relative container flex flex-col items-center justify-center">
+      <SectionHeader
+        title="Case Studies"
+        description="See DeerFlow in action through replays."
+      />
+      <div className="container flex flex-wrap">
+        {caseStudies.map((caseStudy) => (
+          <div key={caseStudy.title} className="w-[25%] p-2">
+            <BentoCard
+              {...{
+                Icon: caseStudy.icon,
+                name: caseStudy.title,
+                description: caseStudy.description,
+                href: "/",
+                cta: "Learn more",
+                className: "w-full h-[320px]",
+                background: (
+                  <img
+                    alt="background"
+                    className="absolute -top-20 -right-20 opacity-60"
+                  />
+                ),
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+const features = [
+  {
+    Icon: Microscope,
+    name: "Dive Deeper and Reach Wider",
+    description:
+      "Unlock deeper insights with advanced tools. Our powerful search and web crawling technology gathers comprehensive data, delivering in-depth reports to enhance your study.",
+    href: "/",
+    cta: "Learn more",
+    background: (
+      <img alt="background" className="absolute -top-20 -right-20 opacity-60" />
+    ),
+    className: "lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3",
+  },
+  {
+    Icon: User,
+    name: "Human-in-the-loop",
+    description:
+      "Refine your research plan, or adjust focus areas all through simple natural language.",
+    href: "/",
+    cta: "Learn more",
+    background: (
+      <img alt="background" className="absolute -top-20 -right-20 opacity-60" />
+    ),
+    className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4",
+  },
+  {
+    Icon: Network,
+    name: "Multi-Agent Architecture",
+    description:
+      "Experience agent teamwork with our Supervisor + Handoffs architecture. From initial communication to deep research and polished report generation, each step is seamlessly coordinated for maximum efficiency and accuracy.",
+    href: "/",
+    cta: "Learn more",
+    background: (
+      <img alt="background" className="absolute -top-20 -right-20 opacity-60" />
+    ),
+    className: "lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3",
+  },
+  {
+    Icon: Bird,
+    name: "Lang Stack",
+    description:
+      "Build with confidence using the <a href='https://www.langchain.com/langchain'>LangChain</a> and <a href='https://www.langchain.com/langgraph'>LangGraph</a> frameworks.",
+    href: "/",
+    cta: "Learn more",
+    background: (
+      <img alt="background" className="absolute -top-20 -right-20 opacity-60" />
+    ),
+    className: "lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2",
+  },
+  {
+    Icon: Usb,
+    name: "MCP Integrations",
+    description:
+      "Supercharge your research workflow and expand your toolkit with seamless MCP integrations.",
+    href: "/",
+    cta: "Learn more",
+    background: (
+      <img alt="background" className="absolute -top-20 -right-20 opacity-60" />
+    ),
+    className: "lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-3",
+  },
+  {
+    Icon: Podcast,
+    name: "Podcast Generation",
+    description:
+      "Listen to insights anytime—perfect for on-the-go learning or sharing findings effortlessly.  ",
+    href: "/",
+    cta: "Learn more",
+    background: (
+      <img alt="background" className="absolute -top-20 -right-20 opacity-60" />
+    ),
+    className: "lg:col-start-3 lg:col-end-3 lg:row-start-3 lg:row-end-4",
+  },
+];
+
+function CoreFeatureSection() {
+  return (
+    <section className="relative container flex flex-col content-around items-center justify-center">
+      <SectionHeader
+        title="Core Features"
+        description="Find out what makes DeerFlow effective."
+      />
+      <BentoGrid className="h-[75vh] lg:grid-rows-3">
+        {features.map((feature) => (
+          <BentoCard key={feature.name} {...feature} />
+        ))}
+      </BentoGrid>
+    </section>
+  );
+}
+
+function JoinCommunitySection() {
+  return (
+    <section className="container flex flex-col items-center justify-center pb-12">
+      <SectionHeader
+        title={
+          <AuroraText colors={["#60A5FA", "#A5FA60", "#A560FA"]}>
+            Join the DeerFlow Community
+          </AuroraText>
+        }
+        description="Contribute brilliant ideas to shape the future of DeerFlow. Collaborate, innovate, and make impacts."
+      />
+      <Button className="text-xl" size="lg" asChild>
+        <Link href="https://github.com/bytedance/deer-flow" target="_blank">
+          <GithubFilled />
+          Contribute Now
+        </Link>
+      </Button>
+    </section>
+  );
 }

web/src/components/magicui/aurora-text.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import React, { memo } from "react";
+
+interface AuroraTextProps {
+  children: React.ReactNode;
+  className?: string;
+  colors?: string[];
+  speed?: number;
+}
+
+export const AuroraText = memo(
+  ({
+    children,
+    className = "",
+    colors = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"],
+    speed = 1,
+  }: AuroraTextProps) => {
+    const gradientStyle = {
+      backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${
+        colors[0]
+      })`,
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      animationDuration: `${10 / speed}s`,
+    };
+
+    return (
+      <span className={`relative inline-block ${className}`}>
+        <span className="sr-only">{children}</span>
+        <span
+          className="relative animate-aurora bg-[length:200%_auto] bg-clip-text text-transparent"
+          style={gradientStyle}
+          aria-hidden="true"
+        >
+          {children}
+        </span>
+      </span>
+    );
+  },
+);
+
+AuroraText.displayName = "AuroraText";

web/src/components/magicui/bento-grid.tsx

@@ -0,0 +1,83 @@
+import { ArrowRightIcon } from "@radix-ui/react-icons";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+
+import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+
+interface BentoGridProps extends ComponentPropsWithoutRef<"div"> {
+  children: ReactNode;
+  className?: string;
+}
+
+interface BentoCardProps extends ComponentPropsWithoutRef<"div"> {
+  name: string;
+  className: string;
+  background: ReactNode;
+  Icon: React.ElementType;
+  description: string;
+  href: string;
+  cta: string;
+}
+
+const BentoGrid = ({ children, className, ...props }: BentoGridProps) => {
+  return (
+    <div
+      className={cn(
+        "grid w-full auto-rows-[22rem] grid-cols-3 gap-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+const BentoCard = ({
+  name,
+  className,
+  background,
+  Icon,
+  description,
+  href,
+  cta,
+  ...props
+}: BentoCardProps) => (
+  <div
+    key={name}
+    className={cn(
+      "group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl",
+      // light styles
+      "bg-background [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
+      // dark styles
+      "transform-gpu dark:bg-background dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+      className,
+    )}
+    {...props}
+  >
+    <div>{background}</div>
+    <div className="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10">
+      <Icon className="h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75" />
+      <h3 className="text-xl font-semibold text-neutral-700 dark:text-neutral-300">
+        {name}
+      </h3>
+      <p className="max-w-lg text-neutral-400">{description}</p>
+    </div>
+
+    <div
+      className={cn(
+        "pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100",
+      )}
+    >
+      <Button variant="ghost" asChild size="sm" className="pointer-events-auto">
+        <a href={href}>
+          {cta}
+          <ArrowRightIcon className="ms-2 h-4 w-4 rtl:rotate-180" />
+        </a>
+      </Button>
+    </div>
+    <div className="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10" />
+  </div>
+);
+
+export { BentoCard, BentoGrid };

web/src/components/magicui/flickering-grid.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { cn } from "~/lib/utils";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+interface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  squareSize?: number;
+  gridGap?: number;
+  flickerChance?: number;
+  color?: string;
+  width?: number;
+  height?: number;
+  className?: string;
+  maxOpacity?: number;
+}
+
+export const FlickeringGrid: React.FC<FlickeringGridProps> = ({
+  squareSize = 4,
+  gridGap = 6,
+  flickerChance = 0.3,
+  color = "rgb(0, 0, 0)",
+  width,
+  height,
+  className,
+  maxOpacity = 0.3,
+  ...props
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isInView, setIsInView] = useState(false);
+  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+
+  const memoizedColor = useMemo(() => {
+    const toRGBA = (color: string) => {
+      if (typeof window === "undefined") {
+        return `rgba(0, 0, 0,`;
+      }
+      const canvas = document.createElement("canvas");
+      canvas.width = canvas.height = 1;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return "rgba(255, 0, 0,";
+      ctx.fillStyle = color;
+      ctx.fillRect(0, 0, 1, 1);
+      const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data);
+      return `rgba(${r}, ${g}, ${b},`;
+    };
+    return toRGBA(color);
+  }, [color]);
+
+  const setupCanvas = useCallback(
+    (canvas: HTMLCanvasElement, width: number, height: number) => {
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      const cols = Math.floor(width / (squareSize + gridGap));
+      const rows = Math.floor(height / (squareSize + gridGap));
+
+      const squares = new Float32Array(cols * rows);
+      for (let i = 0; i < squares.length; i++) {
+        squares[i] = Math.random() * maxOpacity;
+      }
+
+      return { cols, rows, squares, dpr };
+    },
+    [squareSize, gridGap, maxOpacity],
+  );
+
+  const updateSquares = useCallback(
+    (squares: Float32Array, deltaTime: number) => {
+      for (let i = 0; i < squares.length; i++) {
+        if (Math.random() < flickerChance * deltaTime) {
+          squares[i] = Math.random() * maxOpacity;
+        }
+      }
+    },
+    [flickerChance, maxOpacity],
+  );
+
+  const drawGrid = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      width: number,
+      height: number,
+      cols: number,
+      rows: number,
+      squares: Float32Array,
+      dpr: number,
+    ) => {
+      ctx.clearRect(0, 0, width, height);
+      ctx.fillStyle = "transparent";
+      ctx.fillRect(0, 0, width, height);
+
+      for (let i = 0; i < cols; i++) {
+        for (let j = 0; j < rows; j++) {
+          const opacity = squares[i * rows + j];
+          ctx.fillStyle = `${memoizedColor}${opacity})`;
+          ctx.fillRect(
+            i * (squareSize + gridGap) * dpr,
+            j * (squareSize + gridGap) * dpr,
+            squareSize * dpr,
+            squareSize * dpr,
+          );
+        }
+      }
+    },
+    [memoizedColor, squareSize, gridGap],
+  );
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let animationFrameId: number;
+    let gridParams: ReturnType<typeof setupCanvas>;
+
+    const updateCanvasSize = () => {
+      const newWidth = width || container.clientWidth;
+      const newHeight = height || container.clientHeight;
+      setCanvasSize({ width: newWidth, height: newHeight });
+      gridParams = setupCanvas(canvas, newWidth, newHeight);
+    };
+
+    updateCanvasSize();
+
+    let lastTime = 0;
+    const animate = (time: number) => {
+      if (!isInView) return;
+
+      const deltaTime = (time - lastTime) / 1000;
+      lastTime = time;
+
+      updateSquares(gridParams.squares, deltaTime);
+      drawGrid(
+        ctx,
+        canvas.width,
+        canvas.height,
+        gridParams.cols,
+        gridParams.rows,
+        gridParams.squares,
+        gridParams.dpr,
+      );
+      animationFrameId = requestAnimationFrame(animate);
+    };
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateCanvasSize();
+    });
+
+    resizeObserver.observe(container);
+
+    const intersectionObserver = new IntersectionObserver(
+      ([entry]) => {
+        setIsInView(entry.isIntersecting);
+      },
+      { threshold: 0 },
+    );
+
+    intersectionObserver.observe(canvas);
+
+    if (isInView) {
+      animationFrameId = requestAnimationFrame(animate);
+    }
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      resizeObserver.disconnect();
+      intersectionObserver.disconnect();
+    };
+  }, [setupCanvas, updateSquares, drawGrid, width, height, isInView]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(`h-full w-full ${className}`)}
+      {...props}
+    >
+      <canvas
+        ref={canvasRef}
+        className="pointer-events-none"
+        style={{
+          width: canvasSize.width,
+          height: canvasSize.height,
+        }}
+      />
+    </div>
+  );
+};

web/src/styles/globals.css

@@ -57,6 +57,40 @@
   --color-sidebar-ring: var(--sidebar-ring);
   --color-app: var(--app-background);
   --color-brand: var(--brand);
+  --animate-aurora:
+    aurora 8s ease-in-out infinite alternate;
+  @keyframes aurora {
+  0% {
+    background-position:
+    0% 50%;
+    transform:
+    rotate(-5deg) scale(0.9);
+    }
+  25% {
+    background-position:
+    50% 100%;
+    transform:
+    rotate(5deg) scale(1.1);
+    }
+  50% {
+    background-position:
+    100% 50%;
+    transform:
+    rotate(-3deg) scale(0.95);
+    }
+  75% {
+    background-position:
+    50% 0%;
+    transform:
+    rotate(3deg) scale(1.05);
+    }
+  100% {
+    background-position:
+    0% 50%;
+    transform:
+    rotate(-5deg) scale(0.9);
+    }
+  }
 }
 
 :root {