MotionSites · 个人作品集叙事

使用 React、TypeScript、Vite 和 Tailwind CSS，为名为 "Viktor Oddy" 的创意设计工作室创建一个单页落地页。使用 lucide-react 提供图标。整个页面采用白色背景，并使用两种自定义字体："PP Neue Montreal"（正文字体，从 Webflow CDN 加载）和 "PP Mondwest"（衬线装饰字体，从本地 /PPMondwest-Regular.woff2 文件加载）。正文默认字体为 PP Neue Montr

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…

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

**提示词：** 使用 React、Tailwind CSS 和 **framer-motion** 创建一个“关于我”section。网站使用 **Google Font "Kanit"**（字重 300-900）和深色背景 `#0C0C0C`。 **Section 布局：** - 全宽 section，`min-h-screen`，flexbox column，双轴居中 - Padding：`px-5 sm:px-8 md:px-10 py-20` - 背景：`#0C

**使用 React + Vite + Tailwind CSS，为名为 "Alwayzz" 的创意机构创建一个单页落地页 hero section。所有样式均使用自定义 CSS（不要使用 Tailwind utilities）。设计应简约、干净、采用黑白配色，并始终使用紧凑的负字间距。** --- ### 字体（通过 index.html 中的 Google Fonts 加载） ``` Inter: weights 400, 500, 600, 700 Source

使用 React、TypeScript、Tailwind CSS、Framer Motion 和 Lucide React，为「Jack」构建一个 3D 创作者作品集落地页。页面采用深色主题（背景为 #0C0C0C），字体使用 Kanit（Google Fonts，字重 300-900）。页面标题为「Jack -- 3D Creator」。 全局样式 html、body、#root 和主容器的背景：#0C0C0C 字体族：'Kanit', sans-serif 全局重置：b

重现这个完全一致的全视口作品集落地页——实现像素级精确匹配。 ═══════════════════════════════════════ 技术 / 技术栈 ═══════════════════════════════════════ - React + TypeScript + Tailwind CSS + Vite - 图标：lucide-react（`Play`、`Menu`、`X`） - 单个全屏页面：`h-screen w-full overflow-hidd

Build a full-viewport dark personal portfolio Features section using React + TypeScript + Tailwind CSS + lucide-react. **Layout & Structure:** - Full screen dark background `#0a0a0a`, white text, Inter font with antialiased smoothing - Top…

使用 React、Tailwind CSS、Framer Motion 和 Lucide React icons 构建一个全屏 Hero Section。使用 Inter 字体。页面需要完全适配移动端。以下是确切规格： --- **背景：** - 使用一段自动播放、循环、静音的视频作为背景，覆盖整个视口。 - 视频 URL：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_2

为一家名为 "Prisma" 的创意工作室创建一个使用 React + Vite + TypeScript + Tailwind CSS 的落地页。页面包含 3 个部分：Hero、About 和 Features。使用 framer-motion 实现动画，使用 lucide-react 提供图标。设计采用深色、低调且富有电影感的风格，并搭配暖奶油色调色板。 字体 在 index.html 中加载两种 Google Fonts： Almarai（字重：300、400、7

使用 React、Tailwind CSS 和 Vite，为名为“VANGUARD”的创意机构构建一个全屏 hero landing page。页面应为一个占满 viewport 高度的单区块，以循环视频为背景，所有内容叠加在其上方。 **背景视频：** 使用以下准确的 CloudFront URL，创建全屏 `<video>` element，带有 `autoPlay`、`muted`、`loop` 和 `playsInline` attributes，并设置为 `obj