创作者viktoroddy →@viktoroddy 使用 React · Vite · TypeScript完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
查看原始来源 ↗Prompt · 原文 / 翻译
Unlimited Aniamted AI Heros -
Here’s the exact prompt I used:
Build a full-screen cinematic hero section for a space travel website using React, Vite, TypeScript, Tailwind CSS, and the motion/react (Framer Motion) library. Recreate every detail exactly as described below.
1. Fonts
Import Instrument Serif (italic) and Barlow (weights 300, 400, 500, 600) from Google Fonts:
@import url('');
Register them in tailwind.config.ts:
fontFamily: {
heading: ["'Instrument Serif'", "serif"],
body: ["'Barlow'", "sans-serif"],
}
Set --radius: 9999px for fully rounded elements. Use an HSL-based color system where --background: 213 45% 67% (muted sky blue) and --foreground: 0 0% 100% (white).
2. Background Video
Use a full-screen <video> element positioned absolute inset-0 with object-cover, z-0, and these attributes: autoPlay loop muted playsInline preload="auto".
Video URL:
Poster image: /images/hero_bg.jpeg
Overlay: A div with absolute inset-0 bg-black/5 z-0 on top of the video.
In index.html, add preload hints in <head>:
<link rel="preload" as="image" href="/images/hero_bg.jpeg" type="image/jpeg" />
<link rel="preload" as="video" href="" type="video/mp4" />
3. Liquid Glass CSS
Define two utility classes in index.css under @layer components:
.liquid-glass (light):
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.liquid-glass-strong (heavy, for CTA buttons):
.liquid-glass-strong {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
border: none;
box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);
position: relative;
overflow: hidden;
}
Same ::before pseudo-element as .liquid-glass but with 0.5 and 0.2 alpha values instead of 0.45 and 0.15.
4. Navbar
Fixed position: fixed top-4 left-0 right-0 z-50, with px-8 lg:px-16. Contains:
Left: A logo image (h-12 w-12).
Center (desktop only): A liquid-glass rounded-full pill containing nav links: "Home", "Voyages", "Worlds", "Innovation", "Plan Launch" — each styled px-3 py-2 text-sm font-medium text-foreground/90 font-body.
Inside pill, last item: A solid white button bg-white text-black rounded-full px-3.5 py-1.5 text-sm font-medium font-body with text "Claim a Spot" and an ArrowUpRight icon (lucide-react, h-4 w-4).
5. Hero Content (centered)
Wrapper: flex-1 flex flex-col items-center justify-center text-center px-4 pt-24.
a) Badge:
A liquid-glass rounded-full px-1 py-1 container with:
A solid white pill: bg-white text-black rounded-full px-3 py-1 text-xs font-semibold font-body with text "New".
Adjacent text: text-sm text-foreground/90 pr-3 font-body — "Maiden Crewed Voyage to Mars Arrives 2026".
mb-2 bottom margin.
b) Heading:
Use a custom BlurText component (word-by-word blur-in animation from bottom). Props:
text="Venture Past Our Sky Across the Universe"
className="text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-foreground leading-[0.8] max-w-2xl justify-center tracking-[-4px]"
delay={100}
animateBy="words"
direction="bottom"
The BlurText component splits text by words, uses IntersectionObserver to trigger, and animates each word with motion.span from {filter: 'blur(10px)', opacity: 0, y: 50} through {filter: 'blur(5px)', opacity: 0.5, y: -5} to {filter: 'blur(0px)', opacity: 1, y: 0} with stepDuration: 0.35 and staggered delay of 100ms per word.
c) Subheading:
A motion.p with classes mt-1 text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight. Text: "Discover the universe in ways once unimaginable. Our pioneering vessels and breakthrough engineering bring deep-space exploration within reach—secure and extraordinary."
Animation: initial={{ filter: 'blur(10px)', opacity: 0, y: 20 }} → animate={{ filter: 'blur(0px)', opacity: 1, y: 0 }}, duration: 0.6, delay: 0.8.
d) CTA Buttons:
A motion.div with flex items-center gap-6 mt-4, same blur-in animation with delay: 1.1.
Primary: liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-medium text-foreground font-body — "Start Your Voyage" + ArrowUpRight icon (h-5 w-5).
Secondary: Plain text button — "View Liftoff" + Play icon (h-4 w-4 fill-current).
6. Partners Bar (bottom)
Positioned at bottom: flex flex-col items-center gap-4 pb-8.
A liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body label: "Collaborating with top aerospace pioneers globally".
A row of 5 partner names: "Aeon", "Vela", "Apex", "Orbit", "Zeno" — each styled text-2xl md:text-3xl font-heading italic text-white tracking-tight, spaced gap-12 md:gap-16.
7. Z-Index Layering
Video + overlay: z-0
All content (navbar, hero, partners): wrapped in a relative z-10 container.
Navbar: z-50.复用方法
可复用结构
把“目标结果 → 产品名称、目标用户、页面模块和主按钮 → 约束条件”抽成模板，后续可复用到同类任务。
复测标准
围绕 模块顺序、价值主张写法与 CTA 位置 做单变量对照，并记录模型、成本和失败结果；重复成立后再沉淀为 Skill。
建议模型
Derived Skill
Skill 只从多个已发布 Case 的重复模式中派生，不是另一套投稿内容。
创作者
viktoroddy 在X上持续输出 UI 工程化实践，《应式3D角色轮播动画UI》常搭 Claude Sonnet 出方案，方法都带可复现代码。
继续探索
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵 Here Is How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render al
@uxsweta 使用 AI UI Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
Few people asked for the prompt, so here it is 👇 PS: Tweak it based on your use case. Create a modern, minimal 3D Invoice Generator Machine component with a premium SaaS-style aesthetic. Visual Design - Design a wid
@shushant_l 使用 AI Website Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
Here's how to create your website in minimalist design style with AI. Use this prompt: Design a modern minimalist portfolio website for a digital creator and AI consultant. Use a clean black, white, and neutral color pa