mirror of
https://git.mirrors.martin98.com/https://github.com/bytedance/deer-flow
synced 2025-08-20 01:09:06 +08:00
feat: implement basic layout of landing page
This commit is contained in:
Li Xin
parent
899438eca0
commit
08de9e0cab
@ -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
|
||||
|
||||
@ -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",
|
||||
|
||||
12
web/pnpm-lock.yaml
generated
12
web/pnpm-lock.yaml
generated
@ -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)
|
||||
|
||||
6
web/public/images/deer-hero.svg
Normal file
6
web/public/images/deer-hero.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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";
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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 />
|
||||
{!isReplay && <SettingsDialog />}
|
||||
<Tooltip title="Visit DeerFlow on GitHub">
|
||||
<Tooltip title="Star 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>}>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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">
|
||||
"Originated from Open Source, give back to Open Source."
|
||||
</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>© 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>
|
||||
);
|
||||
}
|
||||
|
||||
43
web/src/components/magicui/aurora-text.tsx
Normal file
43
web/src/components/magicui/aurora-text.tsx
Normal file
@ -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";
|
||||
83
web/src/components/magicui/bento-grid.tsx
Normal file
83
web/src/components/magicui/bento-grid.tsx
Normal file
@ -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 };
|
||||
199
web/src/components/magicui/flickering-grid.tsx
Normal file
199
web/src/components/magicui/flickering-grid.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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 {
|
||||
@ -241,4 +275,4 @@ textarea {
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user