加载中…
创作者 · MotionSites
查看原始来源 ↗
Prompt
使用 React + TypeScript + Tailwind CSS,为名为 "securify" 的数据安全 SaaS 落地页构建一个全屏首屏区域,包含循环播放的全屏背景视频、悬浮的胶囊形导航栏和错落排布的大号文字。 字体与全局样式 加载 Google 字体 "Readex Pro",字重为 300、400、500、600、700。 设置 body font-family: 'Readex Pro', system-ui, -apple-system, sans-serif;、background #000、color #fff、antialiased。 将 html、body、#root 的高度设为 100%。 添加 .hero-title 类,设置 letter-spacing: -0.04em; line-height: 0.95;。 区域容器 一个 <section>,使用以下类:relative h-screen w-full overflow-hidden bg-black。 背景视频 <video> 使用 className="absolute inset-0 w-full h-full object-cover"、autoPlay loop muted playsInline,以及 src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_063509_7d167302-4fd4-480b-8260-18ab572333d4.mp4"。 导航栏(absolute, z-20, px-6 md:px-10 pt-6, top-0 left-0 right-0) 一个 <nav>,使用 flex items-center justify-between gap-4。 左侧胶囊:flex items-center gap-2 bg-neutral-900/90 backdrop-blur rounded-full pl-4 pr-6 py-3,包含: 一个自定义白色 SVG 标志(viewBox 0 0 256 256,class h-5 w-5),path 为:M 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 128 L 64 128 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z M 128 64 L 128 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 Z M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 128 0 L 192 0 Z,填充色为 #ffffff。 品牌文字 "securify"(text-white text-sm font-normal tracking-tight)。 中间胶囊(在移动端隐藏):hidden md:flex items-center gap-1 bg-neutral-900/90 backdrop-blur rounded-full px-3 py-2,包含四个锚点链接:"平台"、"解决方案"、"公司"、"支持"——每个都使用 text-neutral-300 hover:text-white transition-colors text-sm px-5 py-2 rounded-full。 右侧按钮:"立即开始"——bg-white text-black text-sm font-normal rounded-full px-6 py-3 hover:bg-neutral-200 transition-colors。 前景内容容器:relative h-full w-full(在导航栏之后渲染,位于视频上方)。 三个错落排布的巨型标题词(每个都是一个 <h1>,使用 class hero-title absolute text-white font-medium text-[14vw] md:text-[13vw]): "保护"——left-4 md:left-10 top-[18%] "你的"——right-4 md:right-10 top-[38%] "数据"——left-[18%] md:left-[28%] top-[58%] 全部使用小写形式。 描述段落(absolute, left-6 md:left-10 top-[46%], max-w-[240px] text-[15px] leading-snug text-white/90): "我们以最谨慎的方式守护你的数据,让你随处都能拥有隐私保障" 数据块——右上角(absolute right-6 md:right-24 top-[14%]): 行:flex items-center gap-3 justify-end——一个斜向分隔线(hidden md:block h-px w-24 bg-white/40 rotate-[20deg]),然后是数字 "+65k"(text-4xl md:text-5xl font-medium tracking-tight)。 副标签:"初创企业使用"(text-xs md:text-sm text-white/70 mt-1 text-right)。 底部渐变叠层:pointer-events-none absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-b from-transparent to-black。 数据块——左下角(absolute left-6 md:left-20 bottom-20 md:bottom-24): 行:数字 "+1.5b",然后是分隔线 hidden md:block h-px w-24 bg-white/40 rotate-[-20deg]。 副标签:"gb 数据受到保护"(text-xs md:text-sm text-white/70 mt-1)。 数据块——右下角(absolute right-6 md:right-20 bottom-16 md:bottom-20): 行:斜向分隔线 rotate-[-20deg],然后是 "+300k"。 副标签:"下载量"(右对齐,text-white/70)。 备注 所有文字均为小写形式。 导航栏胶囊使用 bg-neutral-900/90 backdrop-blur。 仅使用以下过渡效果:导航链接的 hover:text-white,以及按钮的 hover:bg-neutral-200。 任何位置都不要使用紫色/靛蓝色;配色仅使用纯黑、纯白、neutral-900 和带不同透明度的白色(white/40、white/70、white/90)。 响应式:移动端隐藏导航链接和斜向分隔线;文字大小通过 vw 单位缩放。
适用模型与稳定度
建议模型
继续探索
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词:「设计一个机构网站,把服务以 3D 超市商品包装的形式呈现」 使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品 使用 Blender 制作包装模型,然后导出为 GLTF 以加载到 Three.js 中 使用 GSAP 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集,请保存这条 🛒
Aceternity UI 的 AI Coding (UI) 案例“3D Animated Pin”——GoodCase.ai 上提供完整提示词与原始来源。
提示语
// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…

提示语
// components/ui/3d-globe.tsx "use client"; import React, { useRef, useMemo, useState, useCallback, Suspense } from "react"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { OrbitControls, Html, useTexture } from "…