3D / 动效 Hero

精准复刻这个 **Vesper.ai** 单视口落地页。文档标题：`Vesper.ai — Operational AI Infrastructure`。`lang="en"`。使用一个包含内联 CSS 的 HTML 文件，并加入一个用于菜单和动画回退的小型 IIFE。纯黑色 `#000000`。除三项统计数据外，不要添加任何额外版块、卡片、表单、定价表或页脚。不要添加视频、WebGL、Three.js 或 Lottie。不要虚构 CloudFront URL。 立即强制显

为 AI 网站构建器创建一个深色模式 Hero 区块，严格遵循以下规格： ## 技术设置 ### 必需的软件包 安装以下软件包： - `motion`（版本 12.23.24 或更高）——用于动画 - `hls.js`（版本 1.6.15 或更高）——用于视频流播放 - `lucide-react`（版本 0.487.0 或更高）——用于图标 ### 字体 导入以下 Google Fonts： ```css @import url('https://fonts.goog

使用 React、Vite、TypeScript、Tailwind CSS、shadcn/ui，以及作为背景嵌入的 Spline 3D scene，为一家名为“SENTINEL AI”的安防公司创建一个全屏深色 hero landing page。技术栈使用 @splinetool/react-spline 和 @splinetool/runtime 嵌入 3D 内容。以下是全部细节： 字体： Google Fonts“​​Sora”，字重为 300、400、500、600

Prompt to recreate this landing page: Build a single-page dark portfolio landing page using React + Vite + Tailwind CSS + TypeScript + GSAP + Framer Motion + hls.js. --- ## Global Design System ### Fonts Google Fonts import: Inter (300–700…

使用 Tailwind CSS、`motion/react` 实现动画，并使用 `lucide-react` 提供图标，构建一个 React 函数组件。 **1. 字体排版与设置：** - 从 Google Fonts 导入 "Inter" 字体（字重 400、500、600、700），并在 Tailwind 配置/CSS 中将其设为默认无衬线字体。 - 页面整体背景应为 `#f8f9fa`。 **2. 顶部留白版块（View Below）：** - 在页面顶部创建一个版

// components/ui/parallax-hero-images.tsx "use client"; import React, { useEffect, useState, useMemo, useCallback, memo } from "react"; import { motion, useMotionValue, useSpring, useTransform, MotionValue, } from "motion/react"; import { …

// components/ui/world-map.tsx "use client"; import { useRef } from "react"; import { motion } from "motion/react"; import DottedMap from "dotted-map"; import { useTheme } from "next-themes"; interface MapProps { dots?: Array<{ start: { la…

// components/ui/file-upload.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useRef, useState } from "react"; import { motion } from "motion/react"; import { IconUpload } from "@tabler/icons-react"; import { useDropzone…

// components/ui/placeholders-and-vanish-input.tsx "use client"; import { AnimatePresence, motion } from "motion/react"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export function Pl…

// components/ui/evervault-card.tsx "use client"; import { useMotionValue } from "motion/react"; import React, { useState, useEffect } from "react"; import { useMotionTemplate, motion } from "motion/react"; import { cn } from "@/lib/utils"…

// components/ui/sidebar.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useState, createContext, useContext } from "react"; import { AnimatePresence, motion } from "motion/react"; import { IconMenu2, IconX } from "@tab…

// components/ui/sparkles.tsx "use client"; import React, { useId, useMemo } from "react"; import { useEffect, useState } from "react"; import Particles, { initParticlesEngine } from "@tsparticles/react"; import type { Container, SingleOrM…