MotionSites · 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）：** - 在页面顶部创建一个版

为 “Axion Studio” 构建一个 React + Vite + Tailwind CSS 落地页——这是一个设计机构网站。英雄区背景使用 `shaders` 包（npm: `shaders`），图标使用 `lucide-react`。页面包含 3 个版块。准确匹配每一处细节： --- ## SECTION 1：HERO（全视口高度） **背景：** 浅灰色 `#EFEFEF`，叠加全屏动画 shader（positioned absolute, inset-0

使用 React + TypeScript + Vite + Tailwind CSS，为名为 "Wanderful" 的旅行品牌构建一个占满视口、具有电影感的首屏区域。使用 GSAP 制作动画，并使用 `lucide-react` 提供图标。 **字体（通过 `src/index.css` 中的 Google Fonts 加载）：** ```css @import url('https://fonts.googleapis.com/css2?family=Instrume

创建一个高性能、可交互的 3D 水平圆柱轮播，展示高端动态银行卡。 核心功能与交互： 使用 React (useState, useEffect, useRef)、Tailwind CSS v4 和标准 requestAnimationFrame，实现流畅的 60fps 渲染循环。无需外部动画库。 场景应像连续循环滚动/轮播一样运行，并持续更新 progress 变量。 为卡片添加可交互的 3D 视差倾斜效果，使其通过惯性阻尼平滑响应鼠标光标移动 (mousemove)，并略

为 "Aurai"——一款全天候 AI 健康伴侣——构建全屏 hero section landing page。页面是一个单独的 viewport-height section，包含循环背景视频和叠加内容。 ## 视频背景 - 全屏 `<video>` element，带有 `autoPlay`、`loop`、`muted`、`playsInline` attributes - 视频 URL：`https://d8j0ntlcm91z4.cloudfront.net/u

--- **提示词：** 创建一个位于固定背景视频之上的全 viewport section（100vh）。该 section 本身没有背景色——完全透明，因此可以透出其后的固定视频。 **背景视频（固定在所有内容之后）：** 一个固定在 viewport 上的 `<video>` 元素（`position: fixed; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; z-index: 0

使用 Vite 构建一个 React + TypeScript + Tailwind CSS 单页 Hero 区域。整个页面都位于 `src/App.tsx` 中。除 `react`、`react-dom`、`lucide-react` 和 Tailwind 外，不使用其他库。 **背景：** - 一个全屏、自动播放、静音、循环且带 `playsInline` 的背景 `<video>` 元素，使用绝对定位和 `inset-0 w-full h-full object-co

**在 Vite + React + TypeScript + Tailwind CSS 项目中构建一个全屏 hero section。使用 `gsap` 和 `lucide-react`。不要使用其他 UI 库。** ### 字体（位于 `src/index.css`） 在 index.css 顶部、` @tailwind ` 指令之前导入： ```css @import url('https://fonts.googleapis.com/css2?family=Ins