加载中…
创作者 · viktoroddy
查看原始来源 ↗复刻提示词保留原文,另附运行环境、素材与验收要求;附加说明不是原作者原话。
一键获取所有令人惊艳动效网站的提示词:
提示词:电影感 Hero 区域,带循环视频背景
用 React + Vite + Tailwind CSS + TypeScript 创建一个全屏单页 Hero 区域,具体规格如下:
字体:
展示文字(标题、Logo):Instrument Serif
正文(导航、描述):Inter
在 /src/styles/fonts.css 中引入这两种字体
视频背景:
URL:
位置:`top: '300px'`,`inset: 'auto 0 0 0'`
用 React 的 useEffect 和 useRef 实现自定义的淡入淡出循环逻辑:
用 requestAnimationFrame 持续监控 currentTime 和 duration
开头 0.5 秒内淡入(opacity 0 到 1)
结尾前 0.5 秒内淡出(opacity 1 到 0)
在 ended 事件时:将 opacity 设为 0,等待 100ms,重置 currentTime = 0,然后再次 play()
这样就能实现无缝的手动循环,并带平滑的淡入淡出过渡
加入渐变叠加层:absolute inset-0 bg-gradient-to-b from-background via-transparent to-background,覆盖在视频之上
导航栏:
Logo:「Aethera®」(注册商标符号为上标)
Logo 样式:text-3xl,字间距收紧,Instrument Serif,颜色 #000000
菜单项:Home(颜色 #000000),Studio、About、Journal、Reach Us(其余均为 #6F6F6F)
菜单项:text-sm,带颜色过渡
CTA 按钮:「Begin Journey」,圆角,px-6 py-2.5,text-sm,黑色背景(#000000),白色文字,悬停缩放 1.03
布局:flex justify-between,px-8 py-6,max-w-7xl mx-auto
Hero 区域:
定位:paddingTop: 'calc(8rem - 75px)',pb-40
布局:居中(flex flex-col items-center justify-center text-center),px-6
标题:
文字:「Beyond silence, we build the eternal.」
样式:text-5xl sm:text-7xl md:text-8xl,max-w-7xl,font-normal
字体:Instrument Serif
行高:0.95
字间距:-2.46px
颜色:主文字为 #000000,斜体强调词(「silence,」和「the eternal.」)为 #6F6F6F
动画:animate-fade-rise
描述:
文字:「Building platforms for brilliant minds, fearless makers, and thoughtful souls. Through the noise, we craft digital havens for deep work and pure flows.」
样式:text-base sm:text-lg,max-w-2xl,mt-8,leading-relaxed
颜色:#6F6F6F
动画:animate-fade-rise-delay
Hero CTA 按钮:
文字:「Begin Journey」
样式:圆角,px-14 py-5,text-base,mt-12
颜色:黑色背景(#000000),白色文字(#FFFFFF)
悬停:缩放 1.03
动画:animate-fade-rise-delay-2
配色:
背景:白色(#FFFFFF)
标题 / Logo / 按钮:黑色(#000000)
描述 / 菜单项:灰色(#6F6F6F)
按钮文字:白色(#FFFFFF)
动画(写在 /src/styles/theme.css 中):
fade-rise:opacity 0 到 1,translateY 20px 到 0,时长 0.8 秒,缓动 ease-out
fade-rise-delay:与 fade-rise 相同,但延迟 0.2 秒
fade-rise-delay-2:与 fade-rise 相同,但延迟 0.4 秒
布局结构:
容器:relative min-h-screen w-full overflow-hidden
背景视频层(z-0)
视频上的渐变叠加层
导航栏(z-10)
Hero 区域(z-10)
所有元素都应具备响应式,并保持指定的内边距、定位和平滑动画所构成的玻璃拟态美学。适用模型与稳定度
建议模型
独立复测证据
2026年8月9日
多人复现

同款 Prompt 自动聚类归并(相似度 0.98,原独立 Case aethera-studio)
复现出处 ↗继续探索
@viktoroddy 使用 Grok Imagine · Grok Build完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
❤️🔥 一键获取令人惊艳动效网站的完整提示词: 用 React、Tailwind CSS 和 Lucide React 图标为一个名为「Veldara」的产品创建一个全视口 Hero 区域。页面应是单屏落地页,不需要滚动。 > **视频背景:** > - 使用这个确切的视频 URL,不要替换成任何其他地址:`` > - 视频容器为 `position: absolute; inset: 0; z-index: 0`(不是负 z-index,也不是 fixed),作为根
@viktoroddy 使用 Claude Mythos完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
❤️🔥 一键获取所有令人惊艳的动效网站提示词: http:// 用 React 18 + TypeScript + Vite + Tailwind CSS 和 lucide-react 图标,为一个名为 Lithos 的地质品牌构建一个全屏深色主题 Hero 区域。招牌功能是一个跟随光标的聚光灯效果,通过一个柔和的圆形遮罩,在底图之上揭示出第二张图片。请精确匹配以下每一处细节。 ### 字体 在 `src/index.css` 顶部加入以下内容,然后写 `@tailw
@viktoroddy 使用 React · Vite · TypeScript完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
无限量的动画 AI Hero —— 这是我使用的确切提示词: 用 React、Vite、TypeScript、Tailwind CSS 和 motion/react(Framer Motion)库为一个太空旅行网站构建一个全屏电影感 Hero 区域。严格按照下面的每一处细节还原。 1. 字体 从 Google Fonts 引入 Instrument Serif(斜体)和 Barlow(300、400、500、600 字重): @import url(''); 在 ta
Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。