提示词
一键获取所有令人惊艳动效网站的提示词：
提示词：电影感 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）
所有元素都应具备响应式，并保持指定的内边距、定位和平滑动画所构成的玻璃拟态美学。原文提示词（English）
Access ALL prompts for stunning animated websites in one click:
Prompt: Cinematic Hero Section with Looping Video Background
Create a fullscreen single-page hero section using React + Vite + Tailwind CSS + TypeScript with the following specifications:
Fonts:
Display text (headings, logo): Instrument Serif
Body text (navigation, descriptions): Inter
Import both fonts in /src/styles/fonts.css
Video Background:
URL:
Position: top: '300px' with inset: 'auto 0 0 0'
Implement custom fade-in/fade-out loop logic using React useEffect and useRef:
Use requestAnimationFrame to continuously monitor currentTime and duration
Fade in over 0.5s at the start (opacity 0 to 1)
Fade out over 0.5s before the end (opacity 1 to 0)
On ended event: set opacity to 0, wait 100ms, reset currentTime = 0, then play() again
This creates a seamless manual loop with smooth fade transitions
Add gradient overlays: absolute inset-0 bg-gradient-to-b from-background via-transparent to-background positioned over the video
Navigation Bar:
Logo: "Aethera®" (with registered trademark symbol as superscript)
Logo styling: text-3xl, tracking-tight, Instrument Serif, color #000000
Menu items: Home (color #000000), Studio, About, Journal, Reach Us (all others #6F6F6F)
Menu items: text-sm with transition-colors
CTA button: "Begin Journey", rounded-full, px-6 py-2.5, text-sm, black background (#000000), white text, hover scale 1.03
Layout: flex justify-between, px-8 py-6, max-w-7xl mx-auto
Hero Section:
Positioning: paddingTop: 'calc(8rem - 75px)', pb-40
Layout: centered (flex flex-col items-center justify-center text-center), px-6
Headline:
Text: "Beyond silence, we build the eternal."
Styling: text-5xl sm:text-7xl md:text-8xl, max-w-7xl, font-normal
Font: Instrument Serif
Line height: 0.95
Letter spacing: -2.46px
Color: #000000 for main text, #6F6F6F for italic emphasized words ("silence," and "the eternal.")
Animation: animate-fade-rise
Description:
Text: "Building platforms for brilliant minds, fearless makers, and thoughtful souls. Through the noise, we craft digital havens for deep work and pure flows."
Styling: text-base sm:text-lg, max-w-2xl, mt-8, leading-relaxed
Color: #6F6F6F
Animation: animate-fade-rise-delay
Hero CTA Button:
Text: "Begin Journey"
Styling: rounded-full, px-14 py-5, text-base, mt-12
Colors: black background (#000000), white text (#FFFFFF)
Hover: scale 1.03
Animation: animate-fade-rise-delay-2
Colors:
Background: white (#FFFFFF)
Headlines/logos/buttons: black (#000000)
Descriptions/menu items: gray (#6F6F6F)
Button text: white (#FFFFFF)
Animations (in /src/styles/theme.css):
fade-rise: opacity 0 to 1, translateY 20px to 0, duration 0.8s, ease-out
fade-rise-delay: same as fade-rise but with 0.2s delay
fade-rise-delay-2: same as fade-rise but with 0.4s delay
Layout Structure:
Container: relative min-h-screen w-full overflow-hidden
Background video layer (z-0)
Gradient overlay on video
Navigation bar (z-10)
Hero section (z-10)
All elements should be responsive and maintain the glassmorphic aesthetic with the specified padding, positioning, and smooth animations.建议模型
Nano Banana · Kling · Claude
视频地址
https://media.goodcase.ai/media/video/nano-banana-kling-claude-hero-9301b1057401.mp4
