共计 66 个 Prompt | 下载日期：2026-06-24
目录
AI Automation Hero / AI Automation Hero
文件名: AI_Automation_Hero.md
原始 Prompt 代码:
# AI Automation Hero
> **Category:** AI / SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a full-screen hero section with the following exact specifications:
Layout & Structure:
- Full viewport height (h-screen), full width, relative positioning with overflow-hidden
- Background color: #070612 (dark purple-black)
- Content aligned to the left side, vertically centered
- Max-width container (max-w-7xl) with horizontal padding (px-6 lg:px-12)
Background Video:
Video Source: HLS stream from https://stream.mux.com/s8pMcOvMQXc4GD6AX4e1o01xFogFxipmuKltNfSYza0200.m3u8
- Autoplaying, looping, muted video positioned absolutely behind content
- Video shifted 200px to the right (margin-left: 200px)
- Video scaled to 1.2x with origin-left, object-cover, full height
- Bottom fade gradient (h-40) from background color to transparent (z-10)
Badge (top element):
- Pill-shaped badge with rounded-full, border border-white/20, backdrop-blur-sm
- Contains a Sparkles icon (lucide-react, w-3 h-3, text-white/80)
- Text: "New AI Automation Ally" in text-sm font-medium text-white/80
- Animated with blur-in effect (0.6s duration, no delay)
Main Heading:
- Three lines of text:
- Line 1: "Unlock the Power of AI" (block display)
- Line 2: "for Your" (inline)
- Line 3: "Business." in serif italic font (inline)
- Font sizes: text-4xl md:text-5xl lg:text-6xl
- Font weight: font-medium
- Line height: leading-tight lg:leading-[1.2]
- Color: white (text-foreground)
- Each word animates in with staggered split-text animation (0.08s delay between words, 0.6s duration, y: 40px -> 0, opacity: 0 -> 1)
Subtitle:
- Text: "Our cutting-edge AI platform automates, analyzes, and accelerates your workflows so you can focus on what really matters."
- Styling: text-white/80, text-lg, font-normal, leading-relaxed, max-w-xl
- Animated with blur-in effect (0.4s delay, 0.6s duration)
CTA Buttons (bottom):
- Two buttons side by side with gap-4, flex-wrap
- Primary button "Book A Free Call":
- Solid white background (bg-foreground), dark text (text-background)
- Rounded-full, px-5 py-3
- Includes right arrow icon (ArrowRight from lucide-react)
- Links to /book-call
- Secondary button "Learn now":
- Semi-transparent background (bg-white/20), backdrop-blur-sm
- Rounded-full, px-8 py-3
- White text
- Both buttons animated with blur-in effect (0.6s delay, 0.6s duration)
Animations (using framer-motion):
- BlurIn component: opacity 0->1, blur 10px->0, y 20->0
- SplitText component: splits text by words, staggers each word's animation
Z-index layering:
- Video: z-0
- Bottom gradient: z-10
- Content: z-20
Spacing:
- 12-unit gap (gap-12) between badge/heading group and CTA buttons
- 6-unit gap (gap-6) between badge and heading, and between heading and subtitleGenerated by MotionSites Export Tool
---
## AI Designer Agency / AI Designer Agency
**文件名**: `AI_Designer_Agency.md`
**原始 Prompt 代码**:
```markdown
# AI Designer Agency
> **Category:** Landing Page
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Prompt to recreate this landing page:
Build a dark-themed, single-page landing page for an AI web design agency called "VIRALMEDIA". The design uses a pure black background (#000) with white text, a signature "liquid glass" glassmorphism effect, and two Google Fonts: Barlow (body/UI) and Instrument Serif (italic accent text). Use React, Tailwind CSS, Framer Motion, and hls.js. All buttons are rounded-full.
DESIGN SYSTEM (index.css)
Color tokens (all HSL, dark-only — no light mode):
--background: 0 0% 0% (pure black)
--foreground: 0 0% 100% (pure white)
--card: 0 0% 9%, --card-foreground: 0 0% 100%
--primary: 0 0% 97%, --primary-foreground: 0 0% 9%
--secondary: 0 0% 15%, --secondary-foreground: 0 0% 100%
--muted: 0 0% 15%, --muted-foreground: 0 0% 75%
--accent: 0 0% 15%, --accent-foreground: 0 0% 100%
--border: 0 0% 20%, --input: 0 0% 20%, --ring: 0 0% 100%
--radius: 2px
--font-body: 'Barlow', sans-serif
--font-accent: 'Instrument Serif', serif
Liquid Glass CSS classes:
.liquid-glass — subtle glassmorphism: background: rgba(255,255,255,0.01), background-blend-mode: luminosity, backdrop-filter: blur(4px), no border, box-shadow: inset 0 1px 1px rgba(255,255,255,0.1). Has a ::before pseudo-element for a gradient border effect using linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%) with mask-composite: exclude and padding: 1.4px.
.liquid-glass-strong — stronger variant: same as above but backdrop-filter: blur(50px), box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), and slightly higher gradient opacity values (0.5/0.2 instead of 0.45/0.15).
Tailwind config: Set fontFamily: { body: ['Barlow', 'sans-serif'], accent: ['Instrument Serif', 'serif'] } at the theme root level (not in extend).
SECTION 1: NAVBAR (fixed)
Fixed top, full-width, z-50, px-8 py-6, flex row with space-between
Left: Logo text "VIRALMEDIA" — text-xl font-semibold tracking-tight font-body text-foreground
Center (hidden on mobile): Nav links ['Work', 'Services', 'About', 'Blog', 'Contact'] — each px-4 py-2 text-sm font-medium text-foreground rounded-sm hover:bg-white/10
Right: "Get Started" button — liquid-glass-strong rounded-full px-6 py-2.5 text-sm font-medium text-foreground
SECTION 2: HERO (full viewport height)
Container: relative w-full h-screen overflow-hidden
Background video (behind everything): Absolutely positioned, object-cover object-bottom. On mobile: -translate-y-[100px], on md+: no translate. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260326_073936_8dd07fdb-4f6b-4220-a3f0-9dedfaab0c88.mp4 (autoPlay, loop, muted, playsInline)
Bottom gradient overlay: absolute inset-x-0 bottom-0 h-60 bg-gradient-to-t from-background to-transparent
Content (z-10, flex column, justify-end, pb-10 md:pb-20):
Avatar row: 3 overlapping circular avatars (pravatar.cc, w-8 h-8 rounded-full border-2 border-background, -space-x-2) + text "7,000+ brands already transformed" in text-muted-foreground text-sm
Heading: text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-medium tracking-[-1px] md:tracking-[-2px] — "Build Stunning with " + <span className="font-accent italic font-normal">AI Magic</span>
Subtitle: text-sm md:text-lg text-muted-foreground whitespace-normal md:whitespace-nowrap — "AI-powered websites crafted for beauty, speed, and lasting performance."
Email form: liquid-glass rounded-full p-1.5 md:p-2 max-w-lg w-full with transparent input and a solid white bg-foreground text-background rounded-full SUBSCRIBE button. Button uses motion.button with whileHover={{ scale: 1.03 }} and whileTap={{ scale: 0.98 }}
SECTION 3: ABOUT (scroll-reveal text)
bg-background py-32 px-8, max-w-4xl mx-auto text-center
Uses a ScrollRevealText component: splits text into individual words, each wrapped in a motion.span. Uses useScroll with offset: ["start 0.9", "start 0.3"] and useTransform to animate each word's opacity from 0.15 to 1 as user scrolls through
Text: "We blend artificial intelligence with human creativity to craft digital experiences that captivate, convert, and scale — building ambitious brands that truly thrive and lead in the modern web."
Typography: text-3xl md:text-4xl lg:text-5xl font-medium tracking-[-1px] leading-relaxed font-body
SECTION 4: SELECTED WORK (2×2 project grid)
bg-background py-32 pb-16 px-8, max-w-6xl mx-auto
Header: "Selected " + italic accent "Work" — text-4xl md:text-5xl font-medium tracking-[-2px] text-center mb-4
Subtitle: "A curated collection of projects where bold design meets intelligent technology." — text-muted-foreground text-lg text-center max-w-2xl mx-auto mb-16
Grid: grid-cols-1 md:grid-cols-2 gap-6
4 project cards, each with framer-motion fade-up (y: 40→0, staggered by i * 0.1):
Image container: aspect-[4/3] liquid-glass rounded-2xl overflow-hidden
Project title: text-xl font-medium text-foreground font-body
Category: text-sm text-muted-foreground font-body mt-1
Projects data:
"Nova Finance" / "Brand & Web Design" / https://motionsites.ai/assets/hero-grow-ai-preview-BlQ8tAQ-.gif
"Pulse Health" / "AI Web Development" / https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif
"Drift Studios" / "Website Optimization" / https://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif
"Arc Commerce" / "Brand & Development" / https://motionsites.ai/assets/hero-neuralyn-preview-Br4FRDQA.gif
SECTION 5: VIDEO SHOWCASE (parallax overlap)
h-[650px] overflow-hidden -mt-[325px] z-0 — overlaps upward into the previous section
Full-bleed autoplay video: https://media.cleanshot.cloud/media/21620/nKosRonaEKSufJVJ4VtouFhOPkqgJ3dPoQ8ZP52S.mp4
Top & bottom gradient fades: h-32 bg-gradient-to-b/t from-background to-transparent z-10
SECTION 6: CTA (full-screen with HLS video background)
w-full h-screen overflow-hidden flex items-center justify-center z-10
HLS video background using hls.js: Stream URL https://stream.mux.com/4IMYGcL01xjs7ek5ANO17JC4VQVUTsojZlnw4fXzwSxc.m3u8 (with Safari native HLS fallback)
Top/bottom gradient fades: h-40, plus a bg-black/30 overlay
Content (z-10, centered, max-w-3xl):
Heading: "Ready to " + italic accent "Transform" + " Your Brand?" — text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] mb-6
Subtitle: "Let's build something extraordinary together." — text-lg text-muted-foreground mb-10
Two buttons side by side: "START A PROJECT" (solid bg-foreground text-background rounded-full px-10 py-4) and "BOOK A CALL" (liquid-glass-strong rounded-full px-10 py-4)
All elements animate in with framer-motion y: 30/20→0 staggered
SECTION 7: FOOTER
bg-background border-t border-border px-8 py-16, max-w-6xl mx-auto
4-column grid (md:grid-cols-4):
Logo "VIRALMEDIA" + description "AI-powered web design agency crafting digital experiences that convert."
Services: Brand Design, AI Web Design, AI Web Development, Optimization
Company: About, Work, Blog, Careers
Connect: Twitter, LinkedIn, Instagram, Dribbble
Bottom bar: copyright "© 2026 VIRALMEDIA. All rights reserved." + Privacy/Terms links
All links: text-muted-foreground text-sm hover:text-foreground transition-colors
KEY DEPENDENCIES
framer-motion (animations)
hls.js (HLS video streaming in CTA)
Google Fonts: Barlow (400, 500, 600) and Instrument Serif (400 italic) — load via <link> in index.htmlGenerated by MotionSites Export Tool
---
## AI Designer Portfolio / AI Designer Portfolio
**文件名**: `AI_Designer_Portfolio.md`
**原始 Prompt 代码**:
```markdown
# AI Designer Portfolio
> **Category:** Landing Page
> **Type:** landing-page
> **License:** Free
---
## 🎬 Video Preview
_No video preview available for this prompt._
---
## 📋 Prompt
```text
Build a single-page creative studio portfolio landing page for "V Vortex" -- the studio of Sarah Vortex, a former Apple designer. Use React + TypeScript + Vite + Tailwind CSS. Use lucide-react for icons. No other UI libraries.
FONTS:
Body: "PP Neue Montreal" loaded via @font-face from these URLs:
Book (400): https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf
Medium (500): https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf
Display/Serif accent: "PP Mondwest" loaded from a local /PPMondwest-Regular.woff2 file. Applied inline via style={{ fontFamily: "'PP Mondwest', serif" }} on accent words like "next wave", "bold way", "builders", etc.
Set body font-family to: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
COLOR PALETTE:
Primary dark: #051A24
Dark: #0D212C
Muted dark: #273C46
Light text: #F6FCFF
Light muted: #E0EBF0
Background: white
No purple, indigo, or violet hues anywhere.
GLOBAL ANIMATIONS (in index.css):
marquee keyframe: translateX(0) to translateX(-50%), 30s linear infinite on desktop, 10s on mobile (max-width: 767px).
fadeInUp keyframe: from opacity: 0; translateY(30px) to opacity: 1; translateY(0), 0.8s ease-out forwards. Class: .animate-fade-in-up with initial opacity: 0.
CUSTOM HOOK: useInViewAnimation
IntersectionObserver-based hook. Returns { ref, isInView }. isInView flips to true once when the element enters viewport (threshold 0.1). Never resets. Used on every section for staggered animate-fade-in-up entrance animations with incremental animationDelay (0.1s, 0.2s, 0.3s, etc.).
REUSABLE BUTTON COMPONENT:
Three variants -- primary, secondary, tertiary. All use: px-7 py-3 rounded-full font-medium text-sm transition-colors whitespace-nowrap.
primary: bg-[#051A24] text-white hover:bg-[#0D212C] with multi-layer shadow
secondary: bg-white text-[#051A24] with shadow
tertiary: Same as secondary but adds inset shadow
Renders as <a> if href is provided, otherwise <button>.
PAGE SECTIONS (top to bottom):
1. HERO SECTION (max-width 440px, centered, px-6, pt-12 md:pt-16)
Logo: "V Vortex" in PP Mondwest, text-[32px] md:text-[40px] lg:text-[44px], font-semibold, color #051A24
Tagline: "The creative studio of Sarah Vortex" -- font-mono, text-xs md:text-sm, color #051A24
Heading: "Build the next wave, the bold way." with "next wave" and "bold way." in PP Mondwest serif.
Description: Three paragraphs about Apple background, studio philosophy, and "$25,000/month" pricing.
Two buttons: "Start a chat" (primary) and "View projects" (secondary).
2. INFINITE IMAGE MARQUEE (full width, mt-16 md:mt-20, mb-16)
Uses 8 GIF URLs from motionsites.ai, duplicated for seamless looping.
Each image: h-[280px] md:h-[500px] object-cover mx-3 rounded-2xl shadow-lg
3. TESTIMONIAL QUOTE SECTION (centered, max-w-2xl)
Large quote with "Apple" in PP Mondwest serif.
Author: "Sarah Vortex" in italic.
Three brand names and a parallax-scrolling image.
4. PRICING SECTION (max-w-7xl, cards right-aligned)
Two cards: Monthly Partnership (dark) and Custom Project (white), both $25,000.
5. TESTIMONIAL CAROUSEL (max-w-7xl, auto-scrolling every 3s)
5 testimonial cards with avatars from Pexels.
Navigation arrows below carousel.
6. PROJECTS SECTION (max-w-[1200px])
3 project cards with GIF previews from motionsites.ai.
7. PARTNER CTA SECTION with mouse trail effect spawning preview images.
8. FOOTER with links and copyright bar.
9. FIXED BOTTOM NAV floating pill with "V" logo and "Start a chat" button.Generated by MotionSites Export Tool
---
## AKOR Security / AKOR Security
**文件名**: `AKOR_Security.md`
**原始 Prompt 代码**:
```markdown
# AKOR Security
> **Category:** Landing Page
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a dark-themed single-page landing site for "AKOR — Intelligent Security Systems" using React, Tailwind CSS, and the Sora font (Google Fonts: Sora:wght@300;400;500;600;700).
Design system (CSS custom properties, HSL):
--background: 0 0% 10%, --foreground: 0 0% 96%
--primary: 119 99% 46% (vivid green), --primary-foreground: 0 0% 4%
--muted-foreground: 0 0% 60%, --border: 0 0% 20%
--hero-bg: 0 0% 8%, --nav-button: 0 0% 18%
Body: bg-background text-foreground font-sora antialiased
Global animation: animate-fade-up — a keyframe that fades in from opacity:0 translateY(16px) to opacity:1 translateY(0) over ~600ms ease-out, with animation-fill-mode: forwards.
Section 1 — Fixed Navbar:
Fixed top, full-width, z-50, horizontal flex, px-8 lg:px-16 py-5.
Left: A small 32×32 rounded green (bg-primary) icon box with an inline SVG hexagon, plus the text "AKOR" in text-xl font-semibold tracking-tight text-foreground.
Center (hidden on mobile): Nav links — "Services", "About Us", "Projects", "Team", "Contacts" — styled text-sm text-muted-foreground uppercase tracking-widest, hover → text-foreground.
Right (hidden on mobile): "Get Quote" button with bg-nav-button text-foreground hover:bg-nav-button/80 active:scale-[0.97], rounded-lg uppercase text-xs tracking-widest px-6 h-11.
Section 2 — Hero (full viewport):
min-h-screen flex flex-col justify-end bg-hero-bg overflow-hidden.
Background: an autoplaying, looping, muted <video> covering the entire section via absolute inset-0 w-full h-full object-cover. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260322_013248_a74099a8-be2b-4164-a823-eddd5e149fa1.mp4
Content sits at the bottom-left: relative z-10 px-8 lg:px-16 pb-20 lg:pb-28 pt-32.
H1: "Intelligent\nSecurity Systems" (line break after "Intelligent"). Styled text-5xl sm:text-6xl lg:text-[5.5rem] font-light leading-[0.95] tracking-tight text-foreground. Animates in with animate-fade-up delay 0.2s.
Subtext: "Innovative security, automation, and AI solutions for businesses and smart cities". Styled text-muted-foreground text-base lg:text-lg max-w-xl mb-10. Delay 0.45s.
Two CTAs side by side (flex flex-wrap gap-8, delay 0.65s):
"Get Consultation" — green button: bg-primary text-primary-foreground font-semibold hover:bg-primary/90 active:scale-[0.97] rounded-lg px-8 uppercase text-xs tracking-widest h-11.
"Learn More" — plain text link: uppercase text-xs tracking-widest text-foreground border-b border-primary pb-1 hover:text-primary transition-colors active:scale-[0.97].
Section 3 — Services (dark foreground background):
bg-foreground (white/light background inverted — since foreground = 0 0% 96%, this section has a near-white bg with dark text via text-background).
Top: label "Services" in text-muted-foreground/60 text-xs uppercase tracking-[0.25em] mb-8, then a full-width 1px divider bg-muted-foreground/20 mb-16.
Two-column layout: flex flex-col lg:flex-row gap-16 lg:gap-24.
Left column (38%): vertically centered heading "Security, automation, and AI, helping businesses enhance efficiency" in text-3xl sm:text-4xl leading-[1.15] tracking-tight text-background font-normal. Below it, a "Get Consultation" green button (same style as hero).
Right column (62%): 4 service cards in a 2×2 grid (grid-cols-1 sm:grid-cols-2), split into two rows with a horizontal 1px divider between them. Each card has pl-8 border-l border-border/20 and contains:
A 64×64 icon image (object-contain)
A number label in text-muted-foreground/40 text-xs
Title in text-xl font-medium leading-tight text-background whitespace-pre-line
Description in text-muted-foreground/50 text-sm leading-relaxed
Card data:
Card 1: "AI-Driven\nSecurity Solutions" — icon: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260322_015134_c80a3c98-609e-4526-b79e-94dc96cd34e8.png
Card 2: "Smart Building\nAutomation" — icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260322_014934_6e2804d7-d219-461d-98d5-36140fc90c4c.png&w=1280&q=85
Card 3: "AI Consulting\nand Integration" — icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260322_014626_97cccc38-534a-4c9d-a801-68a449da9d0c.png&w=1920&q=85
Card 4: "Training\nand Support" — icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260322_014849_570d4eeb-9613-4b19-a084-46c7a2665243.png&w=1280&q=85
Section 4 — About Us (black background):
bg-black pt-12 lg:pt-16 pb-24 lg:pb-32 px-8 lg:px-16.
Top: "About Us" label + divider (same style as Services).
Two-column layout (flex-col lg:flex-row gap-12 lg:gap-0 items-stretch):
Left (45%): an autoplaying, looping, muted video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260322_011532_86f9b93a-2ffc-42fd-8735-12a4c55ab536.mp4, styled w-full h-auto rounded-sm.
Vertical 1px divider between columns (hidden on mobile): w-px bg-muted-foreground/20 mx-10 mt-8.
Right (flex-1, min-h-[500px] lg:min-h-[600px], flex flex-col justify-between):
Top: heading "AI-powered security, automation for businesses and smart infrastructures" in text-3xl sm:text-4xl leading-[1.15] tracking-tight text-foreground font-normal.
Bottom (mt-auto): paragraph about mission + "Get Quote" green button (px-10).Generated by MotionSites Export Tool
---
## Aethera Studio / Aethera Studio
**文件名**: `Aethera_Studio.md`
**原始 Prompt 代码**:
```markdown
# Aethera Studio
> **Category:** Hero Section
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
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: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_083109_283f3553-e28f-428b-a723-d639c617eb2b.mp4
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.Generated by MotionSites Export Tool
---
## Apex SaaS / Apex SaaS
**文件名**: `Apex_SaaS.md`
**原始 Prompt 代码**:
```markdown
# Apex SaaS
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a dark SaaS landing page with three sections: a floating glassmorphic navbar, a hero section, and a social proof section with a background video. Use React + Tailwind CSS + TypeScript.
Font: Install @fontsource/geist-sans (weights 400, 500, 600, 700). Set body font to 'Geist Sans', 'Inter', system-ui, sans-serif.
Color System (HSL, CSS variables in :root):
--background: 260 87% 3%
--foreground: 40 6% 95%
--primary: 262 83% 58%
--primary-foreground: 0 0% 100%
--secondary: 240 4% 16%
--secondary-foreground: 40 6% 95%
--muted: 240 4% 16%
--muted-foreground: 240 5% 65%
--border: 240 4% 20%
--hero-heading: 40 10% 96%
--hero-sub: 40 6% 82%
--card: 240 6% 9%
--ring: 262 83% 58%
--radius: 0.75rem
Register hero.heading and hero.sub as Tailwind colors mapped to these variables.
Liquid Glass Utility Class (.liquid-glass):
.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;
}
Section 1 — Navbar: A horizontally centered nav with py-5. Inside, a liquid-glass rounded-3xl p-2 container, max-w-[850px] w-full, using flex items-center justify-between gap-6. Contains:
Logo (left): A w-7 h-7 rounded-lg div with bg-gradient-to-b from-secondary to-muted border border-border, containing an inline SVG (circle + 4 crosshair lines, white strokes). Next to it, the text "APEX" styled text-foreground text-xl font-semibold tracking-tight.
Nav links (center): Four buttons — "Features" (with ChevronDown icon), "Solutions", "Plans", "Learning" (with ChevronDown icon). Each: px-3 py-2 text-foreground/90 text-base hover:text-foreground transition-colors.
CTA (right): A rounded-xl px-4 py-2 button using bg-primary text-primary-foreground, size sm, text "Sign Up".
Section 2 — Hero: A section with bg-background relative overflow-hidden. Contains the Navbar, then a flex flex-col items-center pt-20 px-4 div with:
Badge: A liquid-glass rounded-full pl-3 pr-1 py-1 flex items-center gap-2 mb-8 pill. Left text: "Nova+ Launched!" (text-foreground text-xs). Right: a nested rounded-full bg-white/5 px-3 py-0.5 span with "Explore" + a ChevronRight icon (w-3 h-3).
Heading: h1 with text-hero-heading text-center text-4xl sm:text-6xl lg:text-7xl font-semibold leading-[1.05] tracking-tight max-w-5xl. Text: "Accelerate Your" + br + "Revenue Growth Now".
Subheading: p with text-hero-sub text-center text-lg leading-8 max-w-md mt-4 opacity-80. Text: "Drive your funnel forward with clever workflows, analytics, and seamless lead management."
CTA Buttons: flex items-center gap-4 mt-8. Two buttons:
Primary: bg-primary text-primary-foreground rounded-full px-6 py-3 text-base font-medium — "Start Free Right Now"
Secondary: liquid-glass text-foreground rounded-full px-6 py-3 text-base font-normal hover:bg-white/5 — "Schedule a Consult"
Section 3 — Social Proof: A section with relative w-full overflow-hidden. Contains:
Background Video: <video> element: autoPlay muted playsInline, absolute inset-0 w-full h-full object-cover, initial style={{ opacity: 0 }}. Source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260308_114720_3dabeb9e-2c39-4907-b747-bc3544e2d5b7.mp4
Gradient overlay: absolute inset-0 bg-gradient-to-b from-background via-transparent to-background.
Content: relative z-10 flex flex-col items-center pt-16 pb-24 px-4 gap-20:
Stats row: flex items-center gap-8 flex-wrap justify-center. Three items: Clock/"3-5 week turnround", DollarSign/"Upfront cost clarity", ShieldCheck/"Full refund assurance". Each: flex items-center gap-3 text-foreground/80 text-sm with icon in a liquid-glass w-8 h-8 rounded-lg container, icon w-4 h-4 text-foreground/70, label font-medium.
Spacer: div for video visibility.
Logo Marquee: w-full max-w-5xl. Layout: flex items-center gap-12. Left: text-foreground/50 text-sm paragraph "Relied on by brands / across the globe" (with br), whitespace-nowrap shrink-0. Right: relative overflow-hidden flex-1 div containing a flex animate-marquee gap-16 items-center div. Logos: Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn — duplicated for seamless loop. Each logo: shrink-0 flex items-center gap-2 with a liquid-glass w-6 h-6 rounded-lg icon showing the first letter (text-xs font-bold text-foreground/70), and the name (text-base font-semibold whitespace-nowrap text-foreground).
Marquee Animation (Tailwind config):
keyframes: {
marquee: {
"0%": { transform: "translateX(0%)" },
"100%": { transform: "translateX(-50%)" },
},
},
animation: {
marquee: "marquee 20s linear infinite",
},
Icons: All from lucide-react — ChevronRight, ChevronDown, Clock, DollarSign, ShieldCheck.Generated by MotionSites Export Tool
---
## Asme / Asme
**文件名**: `Asme.md`
**原始 Prompt 代码**:
```markdown
# Asme
> **Category:** Hero Section
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a single-page hero section with a full-screen looping background video, liquid glass UI elements, and a dark cinematic aesthetic. Use React, TypeScript, Tailwind CSS, and Lucide React icons. Here are the exact specifications:
Background Video:
Full-screen muted autoplaying video covering the entire viewport, positioned absolutely with object-cover
Video source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_115001_bcdaa3b4-03de-47e7-ad63-ae3e392c32d4.mp4
The video is shifted down by 17% (translate-y-[17%]) so the top portion of the video is cropped -- the interesting content is in the lower portion of the frame
The video loops seamlessly with a custom JavaScript fade system (no CSS transitions): 500ms requestAnimationFrame-based fade-in on load/loop start, 500ms fade-out when 0.55 seconds remain before the video ends. A fadingOutRef boolean prevents re-triggering the fade-out from repeated timeUpdate events. On ended, opacity is set to 0, then after 100ms the video resets to currentTime = 0, plays, and fades back in. Each new fade cancels any running animation frame to prevent competing animations. Fades resume from the current opacity rather than snapping.
The outer container is min-h-screen bg-black with overflow-hidden
Font:
Import Google Font "Instrument Serif" (both regular and italic) via CSS @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap')
The heading uses fontFamily: "'Instrument Serif', serif" applied via inline style
Liquid Glass CSS (.liquid-glass class):
background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity
backdrop-filter: blur(4px) and -webkit-backdrop-filter: blur(4px)
border: none
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)
position: relative; overflow: hidden
A ::before pseudo-element creates the glass border effect:
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%)
Mask trick for border-only rendering: -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude
pointer-events: none
Layout (all inside one full-screen flex column):
Navigation bar (relative z-20, padding pl-6 pr-6 py-6):
Inner container: rounded-full px-6 py-3 flex items-center justify-between max-w-5xl mx-auto
Left side: Logo area with a Globe icon (size 24) and text "Asme" in white, font-semibold text-lg, with gap-2
Next to the logo (with gap-8): three nav links ("Features", "Pricing", "About") -- hidden on mobile, shown on md: -- styled text-white/80 hover:text-white transition-colors text-sm font-medium
Right side (gap-4): "Sign Up" as plain white text button, "Login" as a liquid-glass rounded-full px-6 py-2 button
Hero content area (relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 text-center -translate-y-[20%]):
Heading: "Built for the curious" -- text-5xl md:text-6xl lg:text-7xl text-white mb-8 tracking-tight whitespace-nowrap with Instrument Serif font
Below the heading, a max-w-xl w-full space-y-4 container:
Email input bar: liquid-glass rounded-full pl-6 pr-2 py-2 flex items-center gap-3. Inside: a transparent email input (placeholder: "Enter your email", text-white placeholder:text-white/40 text-base) and a white circular submit button (bg-white rounded-full p-3 text-black) containing an ArrowRight icon (size 20)
Subtitle text: text-white text-sm leading-relaxed px-4 -- "Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates."
Manifesto button: centered, liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium hover:bg-white/5 transition-colors
Social icons footer (relative z-10 flex justify-center gap-4 pb-12):
Three circular icon buttons, each liquid-glass rounded-full p-4 text-white/80 hover:text-white hover:bg-white/5 transition-all
Icons: Instagram, Twitter, Globe (all size 20) from lucide-react
Each has an aria-label
Tech stack: Vite + React 18 + TypeScript, Tailwind CSS 3, lucide-react for all icons. Default Tailwind config with no extensions. No other UI libraries.Generated by MotionSites Export Tool
---
## Automation Machines / Automation Machines
**文件名**: `Automation_Machines.md`
**原始 Prompt 代码**:
```markdown
# Automation Machines
> **Category:** Hero Section
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
_No video preview available for this prompt._
---
## 📋 Prompt
```text
PROMPT TO RECREATE THIS HERO SECTION
Build a full-screen dark hero section for a futuristic "Automation Machines" landing page using React, Vite, Tailwind CSS v4, Motion (framer-motion), Lucide React icons, and Spline 3D. The page should be a single full-viewport section with a black background, white text, and a 3D Spline scene behind all content.
DEPENDENCIES (exact versions)
react ^19.0.0
react-dom ^19.0.0
vite ^6.2.0
@vitejs/plugin-react ^5.0.4
tailwindcss ^4.1.14 (with @tailwindcss/vite ^4.1.14 plugin)
motion ^12.23.24 (import from motion/react)
lucide-react ^0.546.0
@splinetool/react-spline ^4.1.0
@splinetool/runtime ^1.12.72
FONTS (Google Fonts)
Import this exact Google Fonts URL in your CSS:
https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@1&display=swap
Font assignments via Tailwind @theme:
--font-sans: "Space Grotesk" (body text default)
--font-display: "Orbitron" (main heading)
--font-mono: "JetBrains Mono" (technical specs values, pill badges)
--font-loader: "Instrument Serif" (defined but not actively used in the hero)
TAILWIND CSS v4 CONFIGURATION (in index.css)
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@1&display=swap');
@import "tailwindcss";
@theme {
--font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--font-display: "Orbitron", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
--font-loader: "Instrument Serif", serif;
--color-brand-orange: #F27D26;
--color-bg: #0a0a0a;
--color-text: #f5f5f5;
--color-muted: #888888;
--color-stroke: #1f1f1f;
}
@layer base {
body {
@apply bg-black text-white antialiased;
font-family: var(--font-sans);
}
}
@layer utilities {
.text-glow {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
}
VITE CONFIG: Use @tailwindcss/vite plugin alongside @vitejs/plugin-react.
3D SPLINE BACKGROUND
Use @splinetool/react-spline with React lazy loading and Suspense
Scene URL: https://prod.spline.design/PIgTjpRFA03yfLyK/scene.splinecode
The Spline container is position: absolute, inset: 0, z-index: 0
It is shifted 15% to the right using inline style: transform: translateX(15%)
Suspense fallback is a full-size black div
PAGE LAYOUT
The root wrapper is: min-h-screen bg-black text-white overflow-x-hidden relative
Selection styling: selection:bg-white selection:text-black
The content sits above the Spline at z-10 with pointer-events-none (interactive elements get pointer-events-auto):
mx-auto px-4 md:px-6 pt-6 md:pt-10 min-h-screen md:h-screen flex flex-col justify-between pb-6 relative z-10 pointer-events-none
The layout uses a CSS Grid with 12 columns on desktop, 1 column on mobile.
TOP SECTION (upper-left content)
All in a single col-span-12 cell with space-y-6 md:space-y-8:
Main Heading: Font: font-display (Orbitron). Text: "Automation" on line 1, then line break, then "Machines •" (using the HTML bull entity). Size: text-[40px] sm:text-[56px] md:text-[72px]. Line height: leading-[1] md:leading-[0.9]. Weight: font-extralight. Tracking: tracking-tight. Transform: uppercase. Max width: max-w-xl. Gradient text effect: bg-gradient-to-r from-white/20 via-white/70 to-white bg-clip-text text-transparent. Animation: Motion div wrapping it, initial={{ opacity: 0, x: -20 }}, animate={{ opacity: 1, x: 0 }}, transition={{ duration: 0.8, ease: "easeOut" }}
Subtitle paragraph: Text: "Developed with high-end skills and a pixel-perfect frame for those who don't just browse the web—they build it. Code your dreams....". Classes: text-sm text-white max-w-md leading-relaxed font-light. Animation: initial={{ opacity: 0 }}, animate={{ opacity: 1 }}, transition={{ duration: 0.8, delay: 0.2 }}
Three circular icon buttons: Icons from Lucide: Snowflake, Maximize, Zap (in that order). Each in a flex row with gap-4. Each icon container: w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:border-white/60 transition-colors cursor-pointer pointer-events-auto. Icon: size={16}, className="text-white/80". Animation: initial={{ opacity: 0 }}, animate={{ opacity: 1 }}, transition={{ duration: 0.8, delay: 0.4 }}
BOTTOM SECTION (footer area, pinned to bottom via flex justify-between)
Wrapper: flex flex-col md:flex-row justify-between items-start md:items-end gap-12 md:gap-0 mt-16 md:mt-0
Left side -- Technical Specs card: Animation: initial={{ opacity: 0, y: 40 }}, animate={{ opacity: 1, y: 0 }}, transition={{ duration: 0.8, delay: 0.8 }}. Container: p-6 md:p-8 w-full md:max-w-md pointer-events-auto. Header: text "Technical Specs", classes: text-[10px] font-mono tracking-[0.3em] uppercase text-white/60 mb-5. Four spec rows in a space-y-4 div, each row is: flex justify-between items-end border-b border-white/10 pb-3 group cursor-default. Label (left): text-xs text-white/70 group-hover:text-white transition-colors. Value (right): text-xs font-mono tracking-tight text-white. Data: Stack: "React + Node + SQL", Logic: "V8 - Runtime Logic", Uptime: "99.9% High-Avail", Scale: "Responsive Modern Layout"
Right side -- Pill badge bar: Animation: initial={{ opacity: 0 }}, animate={{ opacity: 1 }}, transition={{ duration: 1, delay: 1 }}. Outer wrapper: flex items-center w-full md:w-auto. Pill container: flex flex-wrap gap-2 bg-white/10 backdrop-blur-md rounded-2xl md:rounded-full p-2 border border-white/5 w-full md:w-auto pointer-events-auto. Four pill badges: "TS/JS" -- ACTIVE/highlighted: px-4 py-2 text-[10px] font-mono tracking-widest bg-white text-black rounded-full. "V1" -- outline: px-3 py-2 text-[10px] font-mono tracking-widest border border-white/20 rounded-full. "Full-Stack" -- outline: px-4 py-2 text-[10px] font-mono tracking-widest border border-white/20 rounded-full. "Cloud-Ready" -- outline: px-4 py-2 text-[10px] font-mono tracking-widest border border-white/20 rounded-full
ANIMATION STAGGER SEQUENCE (Motion from motion/react)
All animations use initial + animate (not scroll-triggered):
Heading: delay 0s, slides in from left (x: -20), 0.8s duration, easeOut
Subtitle: delay 0.2s, fades in, 0.8s duration
Icon buttons: delay 0.4s, fade in, 0.8s duration
Technical specs card: delay 0.8s, slides up from y: 40, 0.8s duration
Pill badge bar: delay 1.0s, fades in, 1.0s duration
KEY DESIGN DETAILS
Color palette: Pure black (#000) background, white text with various opacity levels (white/80, white/70, white/60, white/20, white/10, white/5). No navigation bar -- the hero IS the full page. The 3D scene fills the entire viewport behind the content, offset 15% to the right. All text content is left-aligned on the upper-left. The technical specs and pill badges anchor to the bottom of the viewport. On mobile, layout stacks vertically; on desktop (md breakpoint), it stretches edge-to-edge. The gradient on the heading goes from nearly invisible white (20% opacity) on the left to full white on the right, creating a reveal/fade effect. The text selection color is inverted (white background, black text). pointer-events-none on main prevents accidental interaction with the Spline scene; individual interactive elements opt back in with pointer-events-autoGenerated by MotionSites Export Tool
---
## Bionova Biotech / Bionova Biotech
**文件名**: `Bionova_Biotech.md`
**原始 Prompt 代码**:
```markdown
# Bionova Biotech
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a "BIONOVA" biotech consulting hero section that spans exactly 100vh on desktop (scrollable on mobile). Use Poppins font (imported from Google Fonts) as the heading font family. Install hls.js for video streaming.
Design system:
Background: white (hsl(0 0% 100%))
Foreground/text: dark gray (hsl(0 0% 17%))
Hero button color: soft blue (hsl(213 90% 78%))
Font: Poppins (400, 500, 600, 700 weights)
Custom animation fade-up: translateY(20px) + opacity 0 + blur(4px) → translateY(0) + opacity 1 + blur(0), 700ms with cubic-bezier(0.16, 1, 0.3, 1) easing, forwards fill
Navigation:
Logo text "BIONOVA" (bold, tracking-tight, xl) on the left
Center links (hidden on mobile): About, Offerings, Pricing, Blog — semibold, text-sm, 70% opacity, hover to full
Right side (hidden on mobile): "Log in" text link + "Request a call" rounded-full pill button in hero-btn blue with white text
Layout:
Full section: min-h-screen lg:h-screen, flex column, lg:overflow-hidden
Content area: px-5 lg:px-16, pb-8 lg:pb-[82px], flex-1
Two-column grid (lg:grid-cols-2), items-stretch, gap-8
Left column (flex col, justify-between, fade-up animation):
Top group:
H1 with text sizes: text-[2rem] sm:text-5xl lg:text-[3.5rem] xl:text-7xl, leading-[1.08], tracking-tight, font-normal
First line: small rounded-full image pill (w-20 h-10 / sm:w-24 sm:h-12, bg-cover) inline next to "World-class"
Second line: "consultants that"
Third line: "empower" followed by an inline pill button with Play icon + "How do we work" (border-2, rounded-full, smaller text on mobile)
Fourth line: "biotech leaders"
CTAs directly under headline (pt-6): "Contact us" blue pill button with ArrowUpRight icon + "Request a call" underlined text link
Bottom group (hidden on mobile, hidden lg:block):
Description paragraph (text-sm, max-w-md)
Logo bar: "Headway", "brightline", "hazel", "G&STC" — bold text-2xl, flex-wrap
Right column (flex col, gap-4, fade-up with 150ms delay):
Card 1 (top, larger): rounded-[1.5rem] lg:rounded-[2.5rem], bg-black, flex-1, min-h-[200px] on mobile
Background: autoplay muted looping HLS video — https://stream.mux.com/1RdbcBtpEUK6501pc6yaIvwo9UfSnOg02k1uHxat00xR3w.m3u8 — object-cover, full size
White heading (text-2xl lg:text-3xl): "If you're ready to build your bioventure, let's get in touch."
Bottom: description text (white/85) + white circle arrow button (bg-background)
Cards 2 & 3 (bottom row): grid-cols-2, gap-3 lg:gap-4, flex-1
Card 2: rounded-[1.5rem] lg:rounded-[2.5rem], bg-black, p-5 lg:p-8, min-h-[180px]
Background: HLS video https://stream.mux.com/t1TbTB8M1VYHkhxBuap4A8Vm1x015HTHyuQxqchDBago.m3u8 — scaled to 150%, centered with top-1/2 left-1/2 -translate-x/y-1/2
Top: "locations" white pill badge + arrow circle button (both bg-background)
Bottom: "United bio-entrepreneurs" heading (text-lg lg:text-2xl, white) + description (text-xs lg:text-sm, white/80)
Card 3: same card style as Card 2
Background: HLS video https://stream.mux.com/6yvj9SR5bjmXq9N3ak7gy427RwUs8R2ZoH4ndA7Q1018.m3u8 — scaled to 280%, centered same way
Top: "scientists" white pill badge
Bottom: large "34" number (text-4xl lg:text-7xl, white) + description (text-xs lg:text-sm, white/80)
HLS video implementation:
Use hls.js library with useRef for each video element
Loop through all 3 streams in a single useEffect
Handle native HLS (Safari) with canPlayType fallback
All videos: autoPlay, muted, loop, playsInline, preload="auto"
All card content uses relative z-10 to sit above the video
Responsive (mobile only):
Section becomes min-h-screen (scrollable) instead of fixed h-screen
Nav links and right-side buttons hidden below md
Smaller padding (px-5), smaller border radius (rounded-[1.5rem]), smaller card padding (p-5/p-6)
Bottom description/logo bar hidden below lg
Headline button smaller on mobile (px-4 py-1.5 text-sm)
Card text sizes scale down on mobileGenerated by MotionSites Export Tool
---
## Bloom AI / Bloom AI
**文件名**: `Bloom_AI.md`
**原始 Prompt 代码**:
```markdown
# Bloom AI
> **Category:** Hero Section
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a full-screen hero landing page for "Bloom" — an AI-powered plant/floral design platform. The design uses a liquid glass morphism aesthetic over a looping video background.
Background
Full-screen autoplaying, looping, muted video background: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260315_073750_51473149-4350-4920-ae24-c8214286f323.mp4
Video covers entire viewport with object-cover, sits at z-0. All content floats above at z-10.
Fonts
Display/Body: Poppins (Google Fonts) — used for headings and body text
Serif accent: Source Serif 4 (Google Fonts) — used only for italic/emphasis text inside headings (e.g., <em>, <i>, .italic inside h1-h3)
Headings use font-weight: 500
Color Palette
Strict grayscale only — all CSS variables are 0 0% X% HSL values
Text is text-white, text-white/80, text-white/60, text-white/50 for hierarchy
No colored accents whatsoever
Liquid Glass CSS (two tiers)
Define under @layer components:
.liquid-glass (light)
background: rgba(255,255,255,0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
position: relative; overflow: hidden;
::before pseudo-element: gradient border using linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%) with padding: 1.4px, masked via -webkit-mask-composite: xor; mask-composite: exclude;
.liquid-glass-strong (heavy, for CTA/panels)
Same structure but backdrop-filter: blur(50px), box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), and ::before uses 0.5/0.2 alpha instead of 0.45/0.15.
Layout — Two-Panel Split
Flex row, min-h-screen. Left panel w-[52%], right panel w-[48%] (hidden on mobile lg:flex).
Left Panel
Has a liquid-glass-strong overlay (absolute inset-4 lg:inset-6 rounded-3xl)
Nav: Logo image (/logo.png, 32×32) + "bloom" text (semibold, 2xl, tracking-tighter, white) on left. "Menu" button with Menu icon on right, liquid-glass pill.
Hero center (flex-1, centered):
Logo image again (80×80)
h1: "Innovating the / spirit of bloom AI" — text-6xl lg:text-7xl, tracking-[-0.05em], white. The italic part uses font-serif text-white/80
CTA button: "Explore Now" with Download icon in a w-7 h-7 rounded-full bg-white/15 circle. Button is liquid-glass-strong, rounded-full, hover:scale-105 active:scale-95
Three pills: "Artistic Gallery", "AI Generation", "3D Structures" — liquid-glass, rounded-full, text-xs text-white/80
Bottom quote:
"VISIONARY DESIGN" label (text-xs tracking-widest uppercase text-white/50)
Quote: "We imagined a realm with no ending." — mixed font-display/font-serif italic spans
Author: "MARCUS AURELIO" with horizontal lines on each side
Right Panel (desktop only)
Top bar: Social icons (Twitter, LinkedIn, Instagram) in a liquid-glass pill with ArrowRight. Account button with Sparkles icon button, both liquid-glass.
Community card: Small liquid-glass card (w-56), "Enter our ecosystem" title + description
Bottom feature section (mt-auto): Outer liquid-glass container with rounded-[2.5rem]
Two side-by-side cards: "Processing" (Wand2 icon) and "Growth Archive" (BookOpen icon), each liquid-glass rounded-3xl
Bottom card: flower image thumbnail (from @/assets/hero-flowers.png, 96×64), "Advanced Plant Sculpting" title + description, and a "+" button. All liquid-glass.
Icons
All from lucide-react: Sparkles, Download, Wand2, BookOpen, ArrowRight, Twitter, Linkedin, Instagram, Menu
Key Details
All interactive elements: hover:scale-105 transition-transform
Social icon links: text-white hover:text-white/80 transition-colors
Icon containers: w-8 h-8 rounded-full bg-white/10 flex items-center justify-center
No border classes anywhere — glass effect handles all borders via ::before
border-radius token: --radius: 1remGenerated by MotionSites Export Tool
---
## Bold Portfolio Hero / Bold Portfolio Hero
**文件名**: `Bold_Portfolio_Hero.md`
**原始 Prompt 代码**:
```markdown
# Bold Portfolio Hero
> **Category:** Portfolio
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
_No video preview available for this prompt._
---
## 📋 Prompt
```text
Build a high-end, responsive Hero Section for a personal portfolio website using React and Tailwind CSS. The design should feel bold, modern, and energetic.
1. Global Styles & Theme:
Background: A vertical gradient from a vibrant red-orange [#fd2601] at the top to a lighter orange [#f37e1c] at the bottom.
Typography:
Headlines: Use the font "Anton" (or a similar heavy, condensed sans-serif). Text should be massive, uppercase, and tracking wide.
Body/UI: Use "Inter" or a clean sans-serif. Minimalist, uppercase, and legible.
Colors: All text and icons should be White.
Selection State: When user selects text, make the background White and text Orange [#fd2601].
2. Ambient Background Elements:
Place a large, faint SVG text or pattern (like the name "OLIVIA") in the absolute background. It should be centered, white, very low opacity (0.08), and blurred (4px).
Add glowing "blobs" behind the main content:
One bottom-right (300x300px, #F4791B, blur 80px).
One bottom-left (600x300px, #F4791B, blur 80px).
Use mix-blend-screen and opacity-60 for these blobs to make them blend beautifully.
3. Navigation Bar (Floating Top):
Position: Absolute top, full width, transparent background.
Left: Text logo "✱ VIKTORODDY" (Sans-serif, tracking wide).
Center (Desktop only): Links [PROJECTS, BLOG, ABOUT, RESUME]. Hover effect: opacity-80.
Right: A "HIRE ME" CTA.
Format: Text // HIRE ME followed by a circular button (white border) containing a diagonal arrow icon.
Hover: The circle fills white, icon turns orange.
4. Main Hero Content (Centered):
Headline: The text "NEW DESIGN ERA".
Desktop: Display on one line (or slightly wrapped), font size ~12vw (max 180px), z-index: 10.
Mobile: Stack vertically: "NEW" / "DESIGN" / "ERA".
Central Image: Place a portrait image of a person absolutely centered over the headline. CRITICAL: Apply a CSS Mask (paint brush stroke shape) to the image so it looks like a rough cutout, not a rectangle. The image should overlap the text, creating depth (z-index: 20).
Floating Elements (Desktop):
Bottom-Left: Intro text: "// I'm Olivia — a freelance UI/UX designer..." indented with a clean hierarchy.
Right-Middle: Tagline: "// DESIGN THAT [newline] SPEAKS YOUR BRAND". Text aligned right.
Mobile Layout: Move the floating elements below the main image/text stack so they don't overlap.
5. Footer / Brand Strip:
A row of white, semi-transparent (opacity-90) logos at the bottom (e.g., Gucci, Zara, Vogue, Sony, Zalora).
Desktop: Spread evenly across the width.
Mobile: Wrap them nicely in the center.
Technical Requirements:
Use flexbox for layout alignment.
Ensure the image is pointer-events-none so it doesn't block text selection.
Make it fully responsive: The massive text must scale down on mobile, and the layout must shift from absolute positioning (Desktop) to stacked block layout (Mobile).Generated by MotionSites Export Tool
---
## Buzzentic Agency / Buzzentic Agency
**文件名**: `Buzzentic_Agency.md`
**原始 Prompt 代码**:
```markdown
# Buzzentic Agency
> **Category:** Agency
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Project Requirements: Build a high-impact, full-screen React hero section using Tailwind CSS v4 and custom typography.
1. Background & Layout:
Full-Screen Video: Implement a background video that covers the entire viewport (object-cover).
Video Source: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260306_074215_04640ca7-042c-45d6-bb56-58b1e8a42489.mp4
Video Settings: Auto-play, loop, muted, and playsInline with no color overlays or filters.
Content Spacing: The main content block should have 250px of bottom padding to create breathing room above the fold.
2. Typography & Colors:
Primary Font: "Barlow" (sans-serif) for general UI and body text.
Accent Font: "Instrument Serif" (italic) for poetic emphasis.
Color Palette: Primary text is pure white (#FFFFFF) or white at 75% opacity. CTA buttons and badges use a neutral off-white (#f8f8f8).
3. Specific UI Elements:
Transparent Navigation: A floating navbar with no background fill and no border strokes. All navigation links and the brand logo must be white.
Featured Badge: A "Featured in Fortune" badge centered at the top. It features a "liquid glass" effect using a white/10 background with backdrop-blur-sm on the outer ring and white/90 with backdrop-blur-md on the inner pill.
Dynamic Headline:
Line 1: "Agency that makes your" (Barlow, font-light, text-white, 64px).
Line 2: "videos & reels viral" (Instrument Serif, italic, text-white, 64px).
Sub-headline: A max-width paragraph in Barlow font, white at 75% opacity, explaining the agency's value proposition.
Button Styling: Rectangular buttons with a very sharp 2px border radius, #f8f8f8 background, and #171717 medium Barlow text.
Corner Accents: Four 7px x 7px solid white squares positioned exactly at the four corners of the central hero content container.
4. Interactions & Animations:
All buttons and interactive badges should have smooth transition-colors on hover.
Buttons should shift from #f8f8f8 to pure white on hover.
Navigation items should have a subtle white/10 background highlight on hover.Generated by MotionSites Export Tool
---
## ClearInvoice SaaS Hero / ClearInvoice SaaS Hero
**文件名**: `ClearInvoice_SaaS_Hero.md`
**原始 Prompt 代码**:
```markdown
# ClearInvoice SaaS Hero
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a high-fidelity, dark-mode Hero section for a SaaS product called "ClearInvoice" using React and Tailwind CSS.
Tech Stack:
Framework: React (Vite)
Styling: Tailwind CSS
Animation: motion/react (Framer Motion)
Icons: lucide-react
Video: Native HTML5 <video> with hls.js for streaming (Do NOT use react-player).
1. Background Video (Crucial):
Source: https://stream.mux.com/hUT6X11m1Vkw1QMxPOLgI761x2cfpi9bHFbi5cNg4014.m3u8
Behavior: Autoplay, Loop, Muted, PlaysInline.
Opacity: 100% (No dark overlay).
Implementation: Create a memoized BackgroundVideo component using hls.js to handle the .m3u8 stream natively. Ensure it cleans up properly on unmount to prevent "AbortError".
Z-Index: It must sit behind all content (-z-10).
2. Layout & Styling:
Font Family:
Headings: "Switzer" (Medium weight, tight tracking).
Body: "Geist" (Clean, legible).
Top Bar: A 5px high gradient bar at the very top: from-[#ccf] via-[#e7d04c] to-[#31fb78].
Navbar:
Logo on left.
Links (Features, Pricing, Reviews) centered.
Auth buttons (Sign In, Sign Up) on right.
Mobile: Hamburger menu that opens a full-width dropdown.
3. Hero Content:
Headline: "Manage your online store while save 3x operating cost" (Large text: text-6xl, tight leading).
Subhead: "ClearInvoice takes the hassle out of billing with easy-to-use tools." (White/90).
Animations: Use motion/react to stagger the entrance of the Text, Buttons, and Social Proof (Fade Up + Slide).
4. Button Styles (Exact Recreation):
Primary Button:
Background: Gradient from-[#FF3300] to-[#EE7926].
Glow: An absolute positioned div behind the button with bg-orange-600 blur-lg opacity-20.
Inner Stroke: A 1.5px border overlay (border-white/20) inside the button for a "glassy" edge.
Hover: scale: 1.05, glow increases to opacity-60, and an Arrow icon slides in from the left.
Secondary Button:
Background: bg-white/90 backdrop blur.
Inner Stroke: 1.5px border (border-black/5).
Hover: scale: 1.05, background becomes solid white.
5. Social Proof:
Row of 3 user avatars (overlapping borders).
Text: "Trusted by 210k+ stores worldwide".Generated by MotionSites Export Tool
---
## ClubX Investors / ClubX Investors
**文件名**: `ClubX_Investors.md`
**原始 Prompt 代码**:
```markdown
# ClubX Investors
> **Category:** Landing Page
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a full-screen hero landing page for "ClubX" — a private tech investor club. The page should have:
Background: A looping, muted, autoplaying video covering the entire viewport using object-cover, sourced from https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260323_071151_38c3924f-c312-48af-a196-3fbb80e4226f.mp4. All content layers above it with z-10.
Fonts: Import Inter (400, 500) and Instrumental Serif via Google Fonts. Body uses Inter.
Navigation: Horizontally centered max-width container (max-w-7xl). Left: a small circular logo icon (10×10 / h-10 w-10). Center (hidden on mobile): links — Home (active/dark), Studio, About, Journal, Reach Us — in text-sm text-gray-600, hover to text-gray-900. Right: a black (bg-gray-900) pill button with white text saying "Begin Journey", px-6 py-2.5 text-sm, with hover:scale-[1.03] and active:scale-[0.97].
Hero content (centered, pt-32 pb-12):
Social proof badge: A pill (rounded-full) with bg-white/20 backdrop-blur-sm border border-gray-900/10. Contains 5 overlapping circular avatars (w-8 h-8 rounded-full, -space-x-2.5) followed by text: "400+ tech investors join the club. Join us!" in text-sm text-gray-800. Margin bottom mb-8.
Headline: "Finance. Freedom. Fellows." in Inter bold, text-5xl sm:text-6xl md:text-[4.9rem], leading-[0.95] tracking-[-1.5px], text-gray-900, max-w-5xl.
Subtext: "Private club of top tech investors." in text-base sm:text-lg text-gray-800, max-w-2xl mt-6 leading-relaxed.
CTA button: "Begin Journey" — black pill, px-12 py-4 text-sm text-white bg-gray-900 mt-9, hover:scale-[1.03], rounded-full.
Stats bar: Absolutely positioned at bottom-8, centered via left-1/2 -translate-x-1/2, max-w-4xl. A rounded-3xl container with bg-white/10 backdrop-blur-sm border border-gray-900/10, px-8 py-6. Four evenly spaced stat columns, each with a large white number (text-3xl sm:text-4xl font-light tracking-tight) and a label (text-white/70 text-sm):
410+ / Tech professionals
€11M / Invested
14 / Deals made
2.5 / Years on the market
Animations: Three staggered fade-rise keyframe animations (translate 24px up + fade in, 0.8s ease-out): badge at 0s delay, headline at 0s, description at 0.2s, button at 0.4s. Define in CSS:
@keyframes fade-rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-rise { animation: fade-rise 0.8s ease-out both; }
.animate-fade-rise-delay { animation: fade-rise 0.8s ease-out 0.2s both; }
.animate-fade-rise-delay-2 { animation: fade-rise 0.8s ease-out 0.4s both; }
Overall: min-h-screen, overflow-hidden, dark-blue background fallback (--background: 201 100% 13%). All interactive buttons have cursor-pointer and transition-transform. Generate 5 diverse professional avatar images and a circular orange-red logo icon with a white stylized letter.Generated by MotionSites Export Tool
---
## CodeNest Coding Platform / CodeNest Coding Platform
**文件名**: `CodeNest_Coding_Platform.md`
**原始 Prompt 代码**:
```markdown
# CodeNest Coding Platform
> **Category:** Landing Page
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a high-end, dark-themed hero section for a coding education platform called 'CodeNest' using React and Tailwind CSS. The design must be responsive and follow these precise specifications:
1. Background & Layout:
Background: Implement a full-screen background video using the HLS stream: https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8. Use hls.js and set enableWorker: false to ensure stability in sandboxed environments.
Overlays: Set the video to 60% opacity. Add a dark linear gradient from the left (#070b0a to transparent) and a bottom-up gradient for readability.
Grid System: Add three thin vertical grid lines (white/10 opacity) at the 25%, 50%, and 75% marks across the screen (visible on desktop).
Central Glow: Place a large horizontal SVG ellipse glow in the center-top area with a cyan/dark green hue, using a 25px Gaussian blur filter.
2. The Liquid Glass Card:
Component: Create a 200x200px floating card positioned above the main headline, shifted exactly 50px upwards using translate-y-[-50px].
CSS Styling (Liquid Glass):
background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity.
backdrop-filter: blur(4px).
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1).
Border Effect: A ::before pseudo-element with inset: 0, padding: 1.4px, and a 180-degree white linear gradient. Use -webkit-mask-composite: xor and mask-composite: exclude to create a sharp, high-end border frame.
Content: '[ 2025 ]' tag (14px), 'Taught by Industry Professionals' headline (18px, using Instrument Serif italic for 'Industry'), and a small description (11px).
3. Hero Content & Typography:
Eyebrow: 'Career-Ready Curriculum' in Plus Jakarta Sans, bold, 11px, color #5ed29c.
Main Headline: 'LAUNCH YOUR CODING CAREER.' in Inter Extra Bold, uppercase, tracking-tight. Scale from 40px (mobile) to 72px (desktop). The final period must be green (#5ed29c).
Description: 'Master in-demand coding skills...' in Inter, 14px, 70% white opacity, max-width 512px.
Primary CTA: 'Get Started' button with an ArrowRight icon. Rounded-full, background #5ed29c, text #070b0a, uppercase, bold.
4. Global Navigation:
Header: Sticky/Absolute header with a white minimalist logo.
Desktop Menu: Links for 'PROJECTS', 'BLOG', 'ABOUT', 'RESUME' in Inter, 16px. Hover state: #5ed29c.
Mobile Menu: A functional hamburger menu that toggles a full-screen dark overlay.
5. Required Imports:
Fonts: Inter, Plus Jakarta Sans, and Instrument Serif (italic).
Icons: lucide-react (ArrowRight, Menu, X).
Library: hls.js for video streaming.Generated by MotionSites Export Tool
---
## Dark Portfolio Hero / Dark Portfolio Hero
**文件名**: `Dark_Portfolio_Hero.md`
**原始 Prompt 代码**:
```markdown
# Dark Portfolio Hero
> **Category:** Portfolio
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a Next.js 14 portfolio landing page with a full-screen hero section and an animated loading screen. The entire site uses a dark theme. Here is the exact specification:
Tech Stack
Next.js 14 (App Router) + TypeScript
Tailwind CSS v3 with CSS custom properties for theming
GSAP for hero entrance animations
Framer Motion (AnimatePresence, motion) for the loading screen
Google Fonts: Inter (body, variable --font-body) and Instrument Serif (display/headings, variable --font-display, weight 400, italic)
Dark Theme — CSS Variables
Set on [data-theme="dark"] (force dark mode, no toggle):
--bg: #0a0a0a
--surface: #141414
--text: #f5f5f5
--muted: #888888
--accent: #f5f5f5
--stroke: #1f1f1f
Map these in Tailwind config as bg, surface, text, muted, accent, stroke color tokens. Font families: font-display → var(--font-display), font-body → var(--font-body).
Accent Gradient (used everywhere)
linear-gradient(90deg, #89AACC 0%, #4E85BF 100%)
This blue gradient is used for: the navbar logo ring, button hover borders, the "Say hi" hover ring, and the loading screen progress bar.
Component 1: Loading Screen
A full-screen loader (fixed inset-0 z-[9999]) with solid bg-bg background. It runs for 2.7 seconds, then fades out with Framer Motion exit={{ opacity: 0 }} over 0.6s.
Layout (3 elements):
Top-left: The word "Portfolio" — text-xs md:text-sm, text-muted, uppercase, tracking-[0.3em]. Positioned top-8 left-8 md:top-12 md:left-12. Animates in: y: -20 → 0, opacity: 0 → 1, duration 0.6s, delay 0.1s.
Center: Three words rotate in sequence — "Design" → "Create" → "Inspire" — one every 900ms. Styled text-4xl md:text-6xl lg:text-7xl font-display italic text-text/80. Uses AnimatePresence mode="wait", each word enters from y: 20, exits to y: -20, duration 0.4s, easing [0.4, 0, 0.2, 1].
Bottom-right: A counter that counts from 000 → 100 over 2.7s using requestAnimationFrame. Styled text-6xl md:text-8xl lg:text-9xl font-display text-text tabular-nums. Positioned bottom-8 right-8 md:bottom-12 md:right-12. Animates in from y: 20.
Progress bar: A thin 3px line at the very bottom. Background track is bg-stroke/50. The fill uses the accent gradient (#89AACC → #4E85BF) with a subtle glow (box-shadow: 0 0 8px rgba(137, 170, 204, 0.35)). Scales from scaleX(0) to scaleX(1) using transform-origin: left.
Behavior: After the counter hits 100, wait 400ms, then call onComplete(). The parent AppWrapper toggles isLoading to false, which fades the loader out and fades the page content in (opacity 0 → 1, transition 0.5s ease-out).
Component 2: Navbar (inside Hero, fixed)
A floating pill navbar, fixed top-0 left-0 right-0, centered with flex justify-center, z-50.
Pill container: inline-flex, rounded-full, backdrop-blur-md, border border-white/10, bg-surface, px-2 py-2. On scroll past 100px, adds shadow-md shadow-black/10.
Contents (left to right):
Logo — a 36x36px circle (w-9 h-9) with the accent gradient as a 2px ring (p-[2px]). The inside is bg-bg with the letters "JA" centered in text-[13px] font-display italic tracking-tighter. On hover the gradient rotates (from/to colors swap) and the text scales 110%.
Divider — w-px h-5 bg-stroke mx-1 (hidden on mobile)
Nav links: "Home", "Work", "Resume" — text-xs sm:text-sm, rounded-full, px-3 sm:px-4 py-1.5 sm:py-2. Active state: text-text bg-stroke/50. Hover: text-text bg-stroke/50.
Divider
"Say hi ↗" button — same pill styling, with a gradient border ring on hover.
Divider
Component 3: Hero Section
Full viewport height (min-h-screen), flex column, centered content.
Background video layer (absolute inset-0 z-0):
Video URL: https://stream.mux.com/Gs3wZfrtz6ZfqZqQ02c02Z7lugV00FGZvRpcqFTel66r3g.m3u8
An <video> element: autoPlay muted loop playsInline, with a .avif poster image as fallback.
The video is centered and covers the area: absolute top-1/2 left-1/2 min-w-full min-h-full -translate-x-1/2 -translate-y-1/2 object-cover.
A subtle overlay: absolute inset-0 bg-black/20.
A bottom fade gradient: absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-bg to-transparent.
Content (centered, z-10, text-center):
Eyebrow label: "COLLECTION '26" — text-xs text-muted uppercase tracking-[0.3em] mb-8. Class blur-in.
Name: "Michael Smith" — text-6xl md:text-8xl lg:text-9xl font-display italic leading-[0.9] tracking-tight text-text mb-6. Class name-reveal.
Role line: A [Role] lives in Chicago. — text-lg md:text-xl lg:text-2xl text-muted mb-10. The [Role] cycles through "Creative" → "Fullstack" → "Founder" → "Scholar" every 2 seconds, styled as font-display italic text-text with a CSS animate-fade-in animation.
Bio: "Designing seamless digital interactions by focusing on the unique nuances which bring systems to life." — text-sm md:text-base text-muted leading-relaxed max-w-md mb-12.
CTA buttons (side by side):
"See Works": px-7 py-3.5 bg-text text-bg text-sm rounded-full. On hover: scale-105, gradient border ring appears.
"Reach out...": px-7 py-3.5 bg-bg text-text text-sm rounded-full border-2 border-stroke. Same gradient hover border technique.
Scroll indicator (bottom center, absolute bottom-8):
The word "SCROLL" — text-xs text-muted uppercase tracking-[0.2em].
Below it, a thin vertical line (w-px h-10 bg-stroke) with an animated dot sliding down on a 1.5s infinite loop.
GSAP Entrance Animations (Hero)
On mount, a GSAP timeline (power3.out ease):
.name-reveal: opacity 0→1, y 50→0, duration 1.2s, starting at 0.1s.
.blur-in: opacity 0→1, filter blur(10px)→blur(0px), y 20→0, duration 1s, stagger 0.1s, starting at 0.3s.Generated by MotionSites Export Tool
---
## Datacore Booking / Datacore Booking
**文件名**: `Datacore_Booking.md`
**原始 Prompt 代码**:
```markdown
# Datacore Booking
> **Category:** SaaS
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a responsive, full-screen hero section for a web application using React and Tailwind CSS.
Design System & Assets:
Fonts: Load and use 'Manrope' (for UI/Nav), 'Cabin' (for buttons/tags), 'Instrument Serif' (for headlines), and 'Inter' (for body text).
Primary Color: Purple #7b39fc
Secondary/Dark Color: Dark Purple #2b2344
Background: Use a full-screen, absolute-positioned HTML5 video background. The video should autoplay, loop, mute, and play inline. Ensure it covers the viewport (min-h-screen, object-cover) without an overlay (keep it opaque).
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260210_031346_d87182fb-b0af-4273-84d1-c6fd17d6bf0f.mp4
1. Navbar Component (Top Overlay)
Layout: Full width, transparent background, z-20 relative positioning.
Padding: px-6 (mobile) to px-[120px] (desktop), py-[16px].
Logo (Left): Use this specific SVG path filled with white:
Path: M1.04356 6.35771L13.6437 0.666504... (Future logo shape).
Navigation Links (Center-Left, Desktop Only):
Items: "Home", "Services" (with a ChevronDown icon), "Reviews", "Contact us".
Style: Manrope font, Medium weight, 14px size, White.
Hover effect: opacity-80.
Action Buttons (Right, Desktop Only):
Sign In: White background, thin gray border (#d4d4d4), rounded 8px, Black text (#171717), Manrope Semibold 14px.
Get Started: Primary Purple background (#7b39fc), rounded 8px, White text (#fafafa), Manrope Semibold 14px, subtle shadow.
Mobile: Hide links/buttons and show a White Menu icon (hamburger) that toggles a full-screen black overlay menu.
2. Hero Content (Centered)
Container: Centered vertically and horizontally (flex-col items-center text-center), z-10 relative, top margin mt-32.
Tagline Pill:
Style: Glassmorphism effect (bg-[rgba(85,80,110,0.4)], backdrop-blur, border rgba(164,132,215,0.5)).
Shape: Rounded 10px, Height 38px.
Content: A small inner badge (#7b39fc bg, rounded 6px) saying "New" followed by text "Say Hello to Datacore v3.2".
Font: Cabin, Medium, 14px, White.
Headline:
Text: "Book your perfect stay instantly and hassle-free".
Typography: Instrument Serif font, White.
Size: 5xl (mobile) to 96px (desktop).
Styling: Line-height 1.1. The word "and" should be italicized with specific spacing.
Subtext:
Text: "Discover handpicked hotels, resorts, and stays across your favorite destinations. Enjoy exclusive deals, fast booking, and 24/7 support."
Typography: Inter font, Normal weight, 18px.
Color: White with 70% opacity (text-white/70).
Width: Max width 662px.
Call to Action Buttons (Row):
Button 1: "Book a Free Demo" — Primary Purple (#7b39fc), rounded 10px, Cabin Medium 16px, White.
Button 2: "Get Started Now" — Dark Purple (#2b2344), rounded 10px, Cabin Medium 16px, Off-white (#f6f7f9).
Hover effects: Slightly lighten backgrounds on hover.Generated by MotionSites Export Tool
---
## Datacore SaaS Hero / Datacore SaaS Hero
**文件名**: `Datacore_SaaS_Hero.md`
**原始 Prompt 代码**:
```markdown
# Datacore SaaS Hero
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a high-fidelity, production-ready Hero section for a SaaS product called "Datacore" using React, Tailwind CSS, and Lucide Icons.
### Design Style
- **Theme:** Dark mode, modern, clean, "Linear-style" aesthetic.
- **Background:** Full-screen background video with a black overlay (`bg-black/60`) for text readability.
- **Responsiveness:** Fully responsive for mobile (with a hamburger menu) and desktop.
### Tech Stack Requirements
- Use **React** with **Tailwind CSS**.
- Use **lucide-react** for icons.
- Use **hls.js** to handle the background video streaming (.m3u8) to ensure it works on Chrome/Firefox, while using native HLS for Safari.
- Import these Google Fonts via CSS: 'Inter', 'Manrope', 'Cabin', and 'Instrument Serif'.
### Assets
- **Video Source:** `https://stream.mux.com/4IMYGcL01xjs7ek5ANO17JC4VQVUTsojZlnw4fXzwSxc.m3u8`
- **Video Poster/Thumbnail:** `https://customer-cbeadsgr09pnsezs.cloudflarestream.com/257c7359efd4b4aaebcc03aa8fc78a36/thumbnails/thumbnail.jpg`
### Typography & Colors
- **Global Font:** 'Manrope'
- **Headings:** 'Inter'
- **Buttons/Badges:** 'Cabin'
- **Italic Accent:** 'Instrument Serif'
- **Colors:**
- Primary Purple: `#7b39fc` (Hover: `#6a2ce0`)
- Secondary Dark: `#2b2344` (Hover: `#352b54`)
- Accent Orange: `#f87b52`
- Glass Border: `rgba(164,132,215,0.5)`
- Glass Background: `rgba(85,80,110,0.4)`
### Layout & Components
1. **Background Video Component:**
- Create a robust component that handles HLS streams.
- It must auto-play, loop, mute, and play inline.
- It must handle the poster image fading out once the video actually starts playing to prevent black flashes.
2. **Navbar:**
- **Left:** Logo (Use a white square container with the `Command` icon inside).
- **Center (Desktop):** Links for "Home", "Services" (with a `ChevronDown` icon), "Reviews", "Contact us".
- **Right (Desktop):** "Sign In" (Glass effect button) and "Get Started" (Purple button).
- **Mobile:** Show a Menu toggle button that opens a full-screen black overlay with vertical links.
3. **Hero Content (Centered):**
- **Badge:** A glassmorphism pill shape containing:
- A small orange tag: "New"
- Text: "Say Hello to Datacore v3.2"
- **Headline (Large, ~76px on desktop):**
- Line 1: "Your Networks."
- Line 2: "One Rapid [Italic Serif Font: Interface]."
- **Subtext:** "Platform helps admins control access, logs, and servers with purpose."
- **CTA Buttons:**
- Primary: "Book a Free Demo" (Purple)
- Secondary: "Get Started Now" (Dark Navy)
Please ensure the code is production-ready, clean, and handles the video loading state gracefully.Generated by MotionSites Export Tool
---
## DesignPro Academy / DesignPro Academy
**文件名**: `DesignPro_Academy.md`
**原始 Prompt 代码**:
```markdown
# DesignPro Academy
> **Category:** Hero Section
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a full-screen hero section for a product design education platform called "DesignPro" with the following exact specifications:
Background:
Full-screen looping video background using this exact CloudFront URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_105406_16f4600d-7a92-4292-b96e-b19156c7830a.mp4
Video should autoplay, loop, be muted, and play inline
Background color: black (#000000)
Navigation Bar:
Logo: Circular design with a white border (2px), containing a smaller filled white circle inside, followed by "DesignPro" text
Navigation links in a rounded pill container with gray-700 border: Home, About Us, Courses, Instructors, Testimonials, Blog, Contact us (with arrow icon)
All nav links: white/80 opacity, hover to full white
Font size: text-sm
Mobile: Show hamburger menu icon on screens smaller than lg
Max width: 7xl container with proper padding
Content Layout:
Top Section (below nav):
Two-column layout on large screens, stacked on mobile
Left column: "We deliver transformative programs that empower emerging product designers with cutting-edge expertise and vision to thrive globally."
Right column (right-aligned on lg+): "8000+ Talented Designers Launched !"
Both paragraphs: white/80 opacity, text-sm on mobile, text-base on desktop
Hero Section (center):
Small uppercase text above heading: "Seats for Next Program Opening Soon" (white/80 opacity, text-xs on mobile, text-sm on desktop, tight tracking)
Main heading with these exact specifications:
Line 1: "Become" in white, font-medium
Line 2: "Product Leader." with animated shiny gradient effect
Font sizes: text-5xl (mobile) scaling up to text-9xl (xl screens)
Line height: 0.85
Letter spacing: tracking-tighter
ShinyText Component:
Use framer-motion for animation
Base color: #64CEFB (light blue)
Shine color: #ffffff (white)
Animation speed: 3 seconds
Gradient spread: 100 degrees
Gradient should sweep across text continuously from left to right
Use CSS gradient with backgroundClip: text and transparent text fill
CTA Button:
Text: "Apply for Next Enrollment" with arrow icon (from lucide-react)
Black background, hover: gray-900
Rounded-full shape
Padding: px-6 md:px-8, py-3 md:py-4
Arrow should translate right on hover
Group hover animation on arrow icon
Typography:
Font family: Inter (sans-serif)
All text colors: white/80 opacity for body text, full white for headings and hover states
Technical Stack:
React + TypeScript
Vite
Tailwind CSS
Framer Motion for animations
Lucide React for icons
Responsive Breakpoints:
Mobile-first design
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
Key CSS Details:
Container max-width: max-w-7xl with centered margins
Section height: h-screen
Video: absolute positioning, inset-0, object-cover
Content: relative z-10 positioning to appear above video
Smooth transitions on all interactive elements
Create the complete implementation including the ShinyText component with proper framer-motion animation logic.Generated by MotionSites Export Tool
---
## Digitwist AI Builder / Digitwist AI Builder
**文件名**: `Digitwist_AI_Builder.md`
**原始 Prompt 代码**:
```markdown
# Digitwist AI Builder
> **Category:** SaaS
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a dark mode hero section for an AI website builder with the following exact specifications:
## Technical Setup
### Required Packages
Install these packages:
- `motion` (version 12.23.24 or later) - for animations
- `hls.js` (version 1.6.15 or later) - for video streaming
- `lucide-react` (version 0.487.0 or later) - for icons
### Fonts
Import these Google Fonts:
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap');Layout Structure
Navbar Component
Create a fixed, transparent navbar with:
Position & Styling:
- Fixed to top, full width, z-index 50
- Background: fully transparent (bg-transparent)
- Padding: px-6 py-4
- Flexbox layout: items-center justify-between
Left Section:
- Sunburst icon (24x24px SVG) in white color
Center Section (hidden on mobile, visible md:flex):
- Navigation links: “Products” (with ChevronDown icon), “Customer Stories”, “Resources”, “Pricing”
- Font: Instrument Sans, text-sm, font-medium
- Color: text-white/80, hover:text-white
- Gap: gap-8
Right Section:
- “Book A Demo” link (hidden on small screens, sm:block)
- “Get Started” button: white background, black text, rounded-full, px-5 py-2.5, font-semibold
Hero Section Component
Container:
- Relative positioning, full width, min-h-screen
- Background color: #000000 (pure black)
- Text color: white
- Overflow hidden
Background Video Layer:
- Video URL: https://stream.mux.com/T6oQJQ02cQ6N01TR6iHwZkKFkbepS34dkkIc9iukgy400g.m3u8
- Video implementation using HLS.js with Safari fallback
- Video properties: muted, loop, playsInline
- Object-fit: cover, opacity: 60%
- Poster image fallback: https://images.unsplash.com/photo-1647356191320-d7a1f80ca777?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhYnN0cmFjdCUyMGRhcmslMjB0ZWNobm9sb2d5JTIwbmV1cmFsJTIwbmV0d29ya3xlbnwxfHx8fDE3Njg5NzIyNTV8MA&ixlib=rb-4.1.0&q=80&w=1080
Video Overlay:
- Black overlay: bg-black/60 with backdrop-blur-[2px]
Decorative Gradients:
- Top-left gradient: position top-[-20%] left-[20%], size 600x600px, bg-blue-900/20, blur-[120px], mix-blend-screen
- Bottom-right gradient: position bottom-[-10%] right-[20%], size 500x500px, bg-indigo-900/20, blur-[120px], mix-blend-screen
Content Container:
- Max-width: 5xl (max-w-5xl)
- Center aligned (mx-auto, items-center, text-center)
- Z-index: 10, top margin: mt-20
- Vertical spacing: space-y-12
Pre-headline:
- Text: “Design at the speed of thought”
- Font: Instrument Serif
- Size: text-3xl (mobile), sm:text-5xl, lg:text-[48px]
- Line height: leading-[1.1]
- Color: white
- Animation: Motion fade up (opacity 0→1, y 20→0, duration 0.6s)
Main Headline:
- Text: “Build Faster”
- Font: Instrument Sans, font-semibold
- Size: text-6xl (mobile), sm:text-8xl, lg:text-[136px]
- Line height: leading-[0.9], letter spacing: tracking-tighter
- Gradient: bg-gradient-to-b from-white via-white to-[#b4c0ff]
- Text effect: bg-clip-text text-transparent
- Animation: Motion scale (opacity 0→1, scale 0.9→1, delay 0.2s, duration 0.6s)
Subheadline:
- Text: “Create fully functional, SEO-optimized websites in seconds with our advanced AI engine.”
- Font: Instrument Sans
- Size: text-lg (mobile), sm:text-[20px]
- Line height: leading-[1.65]
- Color: white, opacity-70
- Max width: max-w-xl
- Animation: Motion fade (opacity 0→0.7, delay 0.4s, duration 0.6s)
CTA Buttons:
Primary Button:
- Style: White pill-shaped with blue arrow
- Layout: pl-6 pr-2 py-2, rounded-full
- Background: white
- Text: “Start Building Free” (font-medium, text-lg, Instrument Sans, color #0a0400)
- Arrow container: 40x40px circle, bg-[#3054ff], hover:bg-[#2040e0]
- Icon: ArrowRight (lucide-react), white, 20x20px
- Hover effect: shadow-[0_0_20px_rgba(255,255,255,0.3)], scale-105
Secondary Button:
- Text: “See Examples”
- Style: text link with arrow
- Color: text-white/70, hover:text-white
- Background: backdrop-blur-sm, hover:bg-white/5
- Padding: px-4 py-2, rounded-lg
- Icon: ArrowRight with group-hover:translate-x-1 transition
Button Container:
- Layout: flex-col (mobile), sm:flex-row
- Gap: gap-6, items centered
- Animation: Motion fade up (opacity 0→1, y 20→0, delay 0.6s, duration 0.5s)
HLS.js Video Implementation
import { useEffect, useRef } from "react";
import Hls from "hls.js";
const videoRef = useRef<HTMLVideoElement>(null);
const videoSrc = "https://stream.mux.com/T6oQJQ02cQ6N01TR6iHwZkKFkbepS34dkkIc9iukgy400g.m3u8";
useEffect(() => {
const video = videoRef.current;
if (!video) return;
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play().catch((e) => console.log("Auto-play prevented:", e));
});
return () => {
hls.destroy();
};
} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = videoSrc;
video.addEventListener("loadedmetadata", () => {
video.play().catch((e) => console.log("Auto-play prevented:", e));
});
}
}, []);Motion Animations
Import: import { motion } from "motion/react"
- Pre-headline: initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}
- Main headline: initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.2, duration: 0.6 }}
- Subheadline: initial={{ opacity: 0 }} animate={{ opacity: 0.7 }} transition={{ delay: 0.4, duration: 0.6 }}
- Buttons: initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.6, duration: 0.5 }}
Color Palette
- Background: #000000
- Primary text: white
- Secondary text: white/80, white/70
- Primary button background: white
- Primary button text: #0a0400
- Primary button accent: #3054ff, hover #2040e0
- Gradient end color: #b4c0ff
- Decorative gradients: blue-900/20, indigo-900/20
---
*Generated by MotionSites Export Tool*E-commerce Website / E-commerce Website
文件名: E-commerce_Website.md
原始 Prompt 代码:
# E-commerce Website
> **Category:** Landing Page
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
_No video preview available for this prompt._
---
## 📋 Prompt
```text
Prompt to recreate this landing page:
Build a health/wellness e-commerce landing page using React, Vite, Tailwind CSS, TypeScript, and shadcn/ui. The design is clean, minimal, and modern with a near-white background (hsl(0 0% 98%)), near-black foreground (hsl(11 6% 11%)), and fully rounded borders (border-radius: 9999px). No custom fonts — use system defaults. The page has the following sections in order:
1. Sticky Navbar — bg-gray-50, sticky top, z-50. Left: text logo ("Logo", text-xl font-semibold). Center: horizontal nav links (Weight Loss, Strength, Anti-Aging, Hair Growth, Mood, More) hidden on mobile, styled with text-sm font-medium and hover opacity transition. Right: a solid dark "Get started" button (hidden on mobile) + a gradient-border button with a User icon and "Login" text. The gradient button has a 2px border using bg-gradient-to-r from-[#84a9fa] via-[#fb6fec] via-[#fba69e] via-[#fdd4a3] via-[#fb6fec] to-[#84a9fa] with bg-[length:200%] and a hover animation that shifts the gradient (backgroundPosition 0%→200% over 0.8s). The inner button has a white/background fill and rounded-full.
2. Hero Section — Two-column grid (lg:grid-cols-2). Left column: a rating badge (green circle with star icon, "4.5 Average Rating • 453 Reviews" in a pill with subtle shadow), a large heading ("Compounded Semaglutide for Weight Loss", text-4xl md:text-5xl lg:text-6xl font-semibold), three feature items with icons (Syringe, DollarSign, Truck from lucide-react) and text, a divider line, a pricing row ("$296/mo" bold + "*No matter the dose" subtext + "Get Started" button), and an info card (image thumbnail + "Is This Right for You?" + arrow link). Right column (hidden on mobile): two vertical auto-scrolling image marquees side by side. Each column has 4 product images duplicated for seamless looping. Uses CSS @keyframes marquee (translateY 0→-50%) and marquee-reverse (translateY -50%→0) at 30s linear infinite. Top and bottom have fade gradients (bg-gradient-to-b/t from-background to-transparent, h-32) overlaying the marquee.
3. Products Grid Section — Centered header with uppercase small text "OUR MEDS" + large heading "Medication Made Affordable Without The Insurance". Below: 3-column grid (md:grid-cols-2 lg:grid-cols-3) of product cards. Each card: square image with rounded-2xl shadow-lg hover:shadow-xl, title (text-2xl font-semibold), price with "per month" suffix, and a full-width gradient-border "Get Started" button that links to /product/{handle}.
4. Weight Loss Section — bg-gray-50, two-column grid. Left: heading "Lose weight with a plan made just for you." (text-4xl md:text-5xl lg:text-6xl font-semibold), three bullet features with Calendar, Pill, CheckCircle icons, two buttons ("Get started" solid + gradient "See if you're eligible"), and a small disclaimer. Right: a single product image with rounded-2xl.
5. Product Carousel Section — bg-gray-100, two-column grid. Left: a static full-height card (h-[32rem] sm:h-[40rem] md:h-[48rem] rounded-3xl) with background image, overlay text (price label, price, title), and gradient "Get Started" button. Right: a horizontal carousel of similar cards with left/right chevron buttons (bg-neutral-100/80 rounded-full) and pagination dots at bottom. Cards have group-hover:scale-105 on the background image.
6. Science & Nature Section — bg-gray-50 py-28, centered heading "Discover the harmony of science and nature." + two buttons. Below: 6-column grid (grid-cols-2 md:grid-cols-3 lg:grid-cols-6) of feature badges — each is a white card (rounded-2xl p-8 shadow-[2px_4px_12px_rgba(0,0,0,0.08)]) with a large icon (Rabbit, TreePine, Leaf, FlaskConical, Atom, Wheat — all w-20 h-20 strokeWidth-1.5) and label text with line breaks.
7. FAQ Section — bg-gray-50, uses Radix accordion. Each item is a white card (rounded-3xl px-14 py-8 shadow-[2px_4px_12px_rgba(0,0,0,0.08)] border-none) with text-2xl font-semibold trigger and text-lg content. Items are spaced with space-y-4. 5 FAQ items about GLP-1 programs, insurance, medications, pricing guarantee, and plan inclusions.
8. Health Guide Section — bg-gray-50 py-28, centered heading "Your guide to health and wellness starts here." + two buttons. Below: 4-column grid of guide cards. Each card: white with rounded-3xl, image at top (h-48 object-cover rounded-3xl), description text, and a pill-shaped link button with category name + chevron icon, styled with border-2 border-zinc-900/[0.13] rounded-full.
9. Footer — bg-zinc-900 text-white. Two-column layout: left has logo + email signup (input with rounded-full + submit button) + privacy text. Right has 3-column link grid (Popular, Company, Legal). Below divider: social media SVG icons (Facebook, Instagram, X, TikTok, LinkedIn, YouTube) + LegitScript badge + compounded pharmacy badge. Bottom disclaimer text.
Design system: All colors via CSS custom properties in HSL. Semantic tokens: --background, --foreground, --primary, --card, --muted, --border, etc. Shadows use shadow-[2px_4px_12px_rgba(0,0,0,0.08)]. Border radius globally set to 9999px via --radius. The gradient button is a reusable component used throughout.Generated by MotionSites Export Tool
---
## EVR Ventures / EVR Ventures
**文件名**: `EVR_Ventures.md`
**原始 Prompt 代码**:
```markdown
# EVR Ventures
> **Category:** Hero Section
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a hero section with the following exact specifications:
Fonts:
Body/Sans: 'Geist', sans-serif
Display: 'Gilda Display', serif
Color Scheme (dark theme — black background, white foreground):
--background: 0 0% 0% (pure black)
--foreground: 0 0% 100% (pure white)
Video Background:
Full-screen looping muted video with autoPlay, muted, loop, playsInline
URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_024928_1efd0b0d-6c02-45a8-8847-1030900c4f63.mp4
object-cover with horizontal offset object-[37%_center] — no dark overlay
Positioned absolute inset-0 with z-0
Navigation Bar (z-10, relative):
Left: A "Menu" button — rounded-full pill with a border (border-foreground/30), uppercase tracking-widest text, and two horizontal lines (hamburger icon made of two <span> bars, w-7 h-[2px] bg-foreground, gap 4px)
Center: Logo text "EVR" — absolute left-1/2 -translate-x-1/2, text-2xl font-bold tracking-wider text-foreground
Right (hidden on mobile, visible md:flex): Two pill buttons ("About Us", "Services") with border border-foreground/30 rounded-full styling, plus a "Get Started" CTA button with bg-gradient-to-r from-[hsl(220,70%,78%)] to-[hsl(40,80%,82%)], black text, rounded-full, uppercase
Full-Screen Menu Overlay (AnimatePresence + framer-motion):
Triggered by Menu button, uses useState for menuOpen
Animated with clipPath: "circle(0% at 80px 40px)" → "circle(150% at 80px 40px)" on open, reverse on close
Duration 0.7s, ease [0.76, 0, 0.24, 1]
Background: bg-foreground (white), fixed inset-0 z-50
Close button: same pill style as Menu but with X icon, text-background (black text)
Center logo "EVR" in text-background
Menu links: Home, About Us, Services, Projects, Contact — each animated with opacity: 0, x: -60 → opacity: 1, x: 0, staggered delay 0.15 + i * 0.08, ease [0.25, 1, 0.5, 1]
Each link: text-[clamp(2rem,5vw,4.5rem)] font-light -tracking-[0.06em], with ArrowRight icon on right, separated by border-b border-background/10
Hover: text shifts right 4px, arrow shifts right 2px
Bottom: "Evolve Responsible Ventures" left, "© 2026" right, both text-background/40 text-xs tracking-[0.2em] uppercase
Body scroll locked when menu is open
Main Content Area (z-10, relative):
Container: flex-1 flex flex-col with justify-start pt-6 px-6 pb-2 on mobile, justify-end pt-0 px-10 pb-16 on md:
Subheading row: ArrowRight icon (w-4 h-4) + "Evolve Responsible Ventures" in text-xs font-medium tracking-[0.25em] uppercase
Below that, a flex container: column on mobile (heading top, stats bottom), row on lg: (side by side at bottom)
Heading:
Navigating the
route to impactful
regeneration
Each line: text-[clamp(2rem,6vw,5rem)], first two lines font-light, third line font-display (Gilda Display serif)
leading-[0.9] -tracking-[0.2em] on the <h1>
Stats/Progress Circle (right side on desktop, bottom on mobile):
lg:max-w-xs lg:pb-4, with mt-8 on mobile, mt-0 on md:
SVG circular progress: 120x120 viewBox, radius 54, strokeWidth 3
Background circle: stroke="hsl(var(--foreground) / 0.15)"
Progress circle: stroke="hsl(var(--foreground))", animated to 75% on mount (500ms delay), strokeLinecap="round", transition-all duration-1000 ease-out
Center text: "75%" in text-foreground text-lg font-medium
Below circle: paragraph text-foreground/70 text-sm leading-relaxed: "Guiding organizations toward lasting environmental performance through actionable strategy and measurable outcomes"
Clients/Partners Marquee Bar (bottom, z-10):
Top row: "Our Partners" left, "Backed by 30+ global brands" right (hidden on mobile)
Both text-xs font-medium tracking-[0.2em] uppercase text-foreground
Below: border-t border-foreground/10, overflow-hidden py-5
Marquee: CSS animate-marquee (keyframe translateX(0) → translateX(-50%), 20s linear infinite)
Brand names: Opensense, DKNY, Under Armour, LIU·JO, ATOM, ECCO, ORUM — duplicated twice for seamless loop
Each name: text-foreground/50 text-lg font-medium tracking-wide, gap-16
Responsive Layout Summary:
Mobile: heading at top of content area, stats/progress at bottom, nav right buttons hidden
Tablet/Desktop (md:+): content aligned to bottom, nav right buttons visible
Large (lg:): heading and stats side by side at bottomGenerated by MotionSites Export Tool
---
## Finlytic AI Agent / Finlytic AI Agent
**文件名**: `Finlytic_AI_Agent.md`
**原始 Prompt 代码**:
```markdown
# Finlytic AI Agent
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a hero section with the following exact specifications:
Overall Layout:
Full-width section with background: #000000 (pure black)
Overflow hidden
Background video playing behind all content (details below)
Background Video:
Source: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260215_121759_424f8e9c-d8bd-4974-9567-52709dfb6842.mp4
Autoplay, loop, muted, playsInline
Scaled to 120% of the container (width and height both 120%)
Horizontally centered, focal point anchored to the bottom
Sits behind all content (lowest z-index)
Blurred Background Element:
Absolute positioned, horizontally centered, top offset ~215px
Size: 801px wide × 384px tall, fully rounded (pill shape)
Color: pure black #000000
Blur: 77.5px
z-index: 1 (above video, below content)
All text and UI content sits at z-index: 2 (above everything)
Navbar (top):
Max width: 1440px, centered horizontally
Horizontal padding: 120px, vertical padding: 16px, height: 102px
Flexbox row, space-between alignment
Left side: Logo + nav links with 80px gap between them
Logo: "LOGOIPSUM" SVG mark, 134px × 25px, white fill
Nav links in a row with 10px gap between items
Each link: font Manrope, medium weight, 14px size, 22px line-height, white color, padding 10px horizontal / 4px vertical
Items: "Home", "Services" (with a 24×24 white chevron-down icon to the right, 3px gap), "Reviews", "Contact us"
Right side: Two buttons with 12px gap
"Sign In" button: white background, 16px horizontal / 8px vertical padding, 8px border-radius, Manrope semibold 14px/22px, color #171717, with a 1px #d4d4d4 border overlay
"Get Started" button: background #7b39fc (purple), 16px/8px padding, 8px border-radius, Manrope semibold 14px/22px, color #fafafa, subtle box-shadow 0px 4px 16px rgba(23,23,23,0.04)
Hero Content (centered below navbar):
Flex column, centered, max-width 871px, top margin 162px
24px gap between heading block and buttons
Heading block: flex column, 10px gap, center-aligned text
Line 1: "Automate repetitive." — font Inter, medium weight, 76px, white, letter-spacing -2px, line-height 1.15
Line 2: "Focus on growth." — font Instrument Serif, italic, 76px, white, letter-spacing -2px, line-height 1.15
Subtitle: "The next-generation AI agent platform that handles lead generation, customer support, and data entry while you build." — font Manrope, regular weight, 18px, 26px line-height, color #f6f7f9, opacity 90%, max-width 613px
CTA Buttons: flex row, 22px gap, vertically centered
"Get Started Free": background #7b39fc, padding 24px horizontal / 14px vertical, 10px border-radius, font Cabin medium 16px, line-height 1.7, white text
"Watch 2min Demo": background #2b2344 (dark purple), same padding/radius/font specs, color #f6f7f9
Dashboard Image (below hero content):
Centered, top margin 80px, bottom padding 40px
Outer container: 1163px wide (max 90% of viewport), 24px border-radius, backdrop-blur 10px, background rgba(255,255,255,0.05) (glassmorphic), transparent border 1.5px
Inner padding: 22.5px all sides
Image inside: full width, auto height, 8px border-radius, object-fit coverGenerated by MotionSites Export Tool
---
## Framelix 3D Studios / Framelix 3D Studios
**文件名**: `Framelix_3D_Studios.md`
**原始 Prompt 代码**:
```markdown
# Framelix 3D Studios
> **Category:** Agency
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a dark-themed landing page for "Framelix 3D" — a cinematic motion studio brand. The entire site uses a pure black background (#000) with white text. Use the Inter font (import from Google Fonts). The project uses React, Tailwind CSS, TypeScript, and framer-motion.
Global Theme (CSS variables):
Background: black (0 0% 0%), Foreground: white (0 0% 100%), Primary: white, Primary-foreground: black. Border radius: 9999px (fully rounded). No light mode — dark only.
1. Navbar:
Black background, horizontal padding 36px, top padding 32px, bottom padding 20px.
Left: Logo image (apply brightness-0 invert so it appears white), height 36px.
Center: 3 columns of nav links (hidden on mobile), each column has 2 stacked links: [Reels, Services], [Projects, Pipeline], [Careers, Get In Touch]. Gap between columns: 64px.
Right: A custom ticket/coupon-shaped SVG cart icon (27x30 viewBox with scalloped edges) with a "0" count overlaid centered on the icon.
2. Hero Section:
Full-width section, relative positioned, min-height screen, overflow hidden.
Background: an auto-playing, looped, muted, inline video taking full width (w-full h-auto object-cover). Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260223_060517_9feec9ab-18e4-477a-b034-de5903a67e91.mp4
Overlay text at top (absolute, top 50px, centered): "Framelix" with superscript "3D" (26px, medium weight), below it "Cinematic Motion Studios" heading (clamp 2rem–68px, medium weight). Animate in with framer-motion fade+slide down (0.8s).
Overlay CTA at bottom (absolute, bottom 12%, centered): "Explore Reel" button (white bg, black text, 22px, rounded-full, px-14 py-4). Below it "Ready in 24-48 hours" muted text. Animate in with framer-motion fade+slide up (0.8s, 0.3s delay).
3. Marquee Banner:
Background color: #A6A4FF (lavender/purple). Black text, 16px, medium weight.
Infinitely scrolling marquee text: "New! 3D^OS V1.2.1 out now!" repeated 6 times in a row, duplicated for seamless loop. Use CSS animation translateX(0) to translateX(-50%) over 20s linear infinite. Vertical padding 14px, gap 60px between items.
4. Shipping Section:
Background: #EAEAEA (light gray), with rounded bottom corners (40px radius). All text is black.
Top: Centered text — "Framelix" with superscript "3D" (20px) and "Shipping Now" heading (clamp 2rem–52px). Top padding 64px.
Center: Auto-playing, looped, muted video, 800x800px, object-contain, rounded-2xl, with -my-24 negative vertical margin to reduce whitespace. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260223_063954_03a5f7ec-5f10-4acb-ba8d-dce4815217db.mp4
Bottom: Centered "Buy Now" button (black bg, white text, 18px, rounded-full, px-46 py-3), below it "Explore now" text (20px, font-weight 450). Bottom padding 128px on the wrapper.
Tailwind config: Add a marquee keyframe and animation (translateX 0 to -50%, 20s linear infinite). Use tailwindcss-animate plugin.Generated by MotionSites Export Tool
---
## Glassmorphism Agency Hero / Glassmorphism Agency Hero
**文件名**: `Glassmorphism_Agency_Hero.md`
**原始 Prompt 代码**:
```markdown
# Glassmorphism Agency Hero
> **Category:** Agency
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
<video width="100%" controls autoplay muted loop>
<source src="https://customer-cbeadsgr09pnsezs.cloudflarestream.com/697945ca6b876878dba3b23fbd2f1561/manifest/video.m3u8" type="video/mp4">
Your browser does not support the video tag.
</video>
[Direct Video Link](https://customer-cbeadsgr09pnsezs.cloudflarestream.com/697945ca6b876878dba3b23fbd2f1561/manifest/video.m3u8)
---
## 📋 Prompt
```text
Build a production-ready, responsive landing page using React, Tailwind CSS v4, and Vite. The design should feature a high-end, dark-mode "glassmorphism" aesthetic with specific purple/pink gradients.
1. Tech Stack & Libraries:
Use hls.js for video streaming.
Use motion/react (formerly Framer Motion) for animations.
Use react-use-measure for sizing logic.
Use clsx and tailwind-merge for class management.
Use lucide-react for standard icons (if needed), but I will provide custom SVG paths for specific UI elements.
2. Global Styling:
Background: Dark/Black (#010101).
Primary Gradient: A diagonal gradient used for accents: from-[#FA93FA] via-[#C967E8] to-[#983AD6].
Typography: Modern sans-serif, center-aligned hero text.
3. Hero Section Components:
Announcement Pill:
A pill-shaped top badge.
Background: Semi-transparent dark (bg-[rgba(28,27,36,0.15)]) with a subtle border.
Icon: A "Zap" icon inside a gradient-filled box with a glow effect.
Text: "Used by founders. Loved by devs." in light grey.
Main Headline (H1):
Large text (responsive sizing: 48px mobile to 80px desktop).
Text: "Your Vision" on line 1, "Our Digital Reality." on line 2.
Style: Text should have a gradient fill (White to Purple/Pink).
Subheadline:
Text: "We turn bold ideas into modern designs that don't just look amazing, they grow your business fast."
Color: text-white/80.
CTA Button:
"Book a 15-min call" text.
Rounded full button with a white background and black text.
Includes a circle icon with an arrow inside, styled with the primary purple gradient.
Outer border wrapper with a glass effect.
4. Hero Video Integration (Critical Details):
Source: HLS Stream URL: https://customer-cbeadsgr09pnsezs.cloudflarestream.com/697945ca6b876878dba3b23fbd2f1561/manifest/video.m3u8
Fallback: If HLS fails, fallback to this MP4: /_videos/v1/f0c78f536d5f21a047fb7792723a36f9d647daa1
Implementation: Do NOT use react-player. Use a native <video> tag with a custom useEffect hook implementation of hls.js.
Styling:
Blend Mode: Use mix-blend-screen so the video black background blends into the page.
Positioning: The video should be at the bottom of the hero. Apply a negative top margin (-mt-[150px]) so it overlaps behind the text.
Z-Index: Ensure the text content is z-20 (above) and video is z-10 (below).
Layout: The video must be 100% width (w-full), auto height, and stretch edge-to-edge without being cropped (do not use object-contain or fixed heights).
Overlay: Add a gradient fade (from-[#010101] via-transparent to-[#010101]) over the video container.
5. Logo Cloud Section (Animated):
Place this section immediately below the video.
Background: Semi-transparent glass (bg-black/20 backdrop-blur-sm) with a top border (border-white/5).
Layout:
Desktop: "Powering the best teams" text on the left, separated by a vertical divider. Animated logo slider on the right.
Mobile: Stacked vertically.
Animation: Create an InfiniteSlider component using motion/react that scrolls logos horizontally forever.
Logos: Use these SVG URLs (OpenAI, Nvidia, GitHub, etc.) and apply brightness-0 invert to make them white.
https://html.tailus.io/blocks/customers/openai.svg
https://html.tailus.io/blocks/customers/nvidia.svg
(Include others similarly)
Please assemble these into a cohesive Hero.tsx, App.tsx, and components/ui/infinite-slider.tsx structure.Generated by MotionSites Export Tool
---
## Grow AI Talent Platform / Grow AI Talent Platform
**文件名**: `Grow_AI_Talent_Platform.md`
**原始 Prompt 代码**:
```markdown
# Grow AI Talent Platform
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a dark-themed landing page hero section with a navbar, headline, CTA button, background video with fade-in/out loop, and a logo marquee. Use React + Vite + Tailwind CSS + TypeScript with shadcn/ui. Install @fontsource/geist-sans.
1. Theme & Design Tokens (index.css)
Set up a single dark theme (no light mode toggle). All colors in HSL:
:root {
--background: 260 87% 3%;
--foreground: 40 6% 95%;
--card: 240 6% 9%;
--card-foreground: 40 6% 95%;
--popover: 240 6% 9%;
--popover-foreground: 40 6% 95%;
--primary: 262 83% 58%;
--primary-foreground: 0 0% 100%;
--secondary: 240 4% 16%;
--secondary-foreground: 40 6% 95%;
--muted: 240 4% 16%;
--muted-foreground: 240 5% 65%;
--accent: 262 83% 58%;
--accent-foreground: 0 0% 100%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 100%;
--border: 240 4% 20%;
--input: 240 4% 20%;
--ring: 262 83% 58%;
--radius: 0.75rem;
--hero-heading: 40 10% 96%;
--hero-sub: 40 6% 82%;
}
Body font: 'Geist Sans', 'Inter', system-ui, sans-serif
Import these font weights:
@import "@fontsource/geist-sans/400.css";
@import "@fontsource/geist-sans/500.css";
@import "@fontsource/geist-sans/600.css";
@import "@fontsource/geist-sans/700.css";
2. Liquid Glass Utility (index.css)
Add a .liquid-glass utility class in @layer utilities:
.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;
}
3. Tailwind Config
Add these to tailwind.config.ts:
All the semantic color tokens mapped to hsl(var(--token))
A hero color group: hero.heading and hero.sub
A marquee keyframe: 0% { transform: translateX(0%) } → 100% { transform: translateX(-50%) }
Animation: marquee: "marquee 20s linear infinite"
4. Button Variants
In the shadcn button.tsx, add two custom variants:
hero: "bg-primary text-primary-foreground rounded-full px-6 py-3 text-base font-medium hover:bg-primary/90"
heroSecondary: "liquid-glass text-foreground rounded-full px-6 py-3 text-base font-normal hover:bg-white/5"
5. Navbar Component
Full-width, py-5 px-8, flex row, justify-between
Left: A logo image (32px height). Use a logo.png from src/assets/logo.png
Center: Nav items as plain buttons: "Features" (with ChevronDown icon), "Solutions", "Plans", "Learning" (with ChevronDown icon). Text is text-foreground/90 text-base, gap-1 between items
Right: "Sign Up" button using heroSecondary variant, size="sm", rounded-full px-4 py-2
Below the navbar, add a full-width 1px gradient divider: mt-[3px] w-full h-px bg-gradient-to-r from-transparent via-foreground/20 to-transparent
6. Hero Section
Section with bg-background relative overflow-hidden
Contains the Navbar at the top
Below navbar + divider, centered content with pt-20 px-4
Headline "Grow": text-[230px] font-normal leading-[1.02] tracking-[-0.024em], font-family 'General Sans', sans-serif, bg-clip-text text-transparent with background-image: linear-gradient(223deg, #E8E8E9 0%, #3A7BBF 104.15%)
Subtext: text-hero-sub text-center text-lg leading-8 max-w-md mt-4 opacity-80, two lines: "The most powerful AI ever deployed" / "in talent acquisition" (split with <br/>)
CTA Button: heroSecondary variant, text "Schedule a Consult", px-[29px] py-[24px], wrapped in a div with mt-8 mb-[66px]
7. Social Proof / Video Section
Immediately below the hero, a separate <section> with relative w-full overflow-hidden.
Background Video: <video> element: autoPlay muted playsInline, absolute inset-0 w-full h-full object-cover, initial style={{ opacity: 0 }}
Source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260308_114720_3dabeb9e-2c39-4907-b747-bc3544e2d5b7.mp4
Fade logic (JavaScript): Use requestAnimationFrame to continuously read currentTime and duration. Fade in over 0.5s at the start, fade out over 0.5s at the end. On ended, set opacity to 0, wait 100ms, reset currentTime = 0, and play() again. This creates a seamless manual loop with fade transitions.
Gradient overlays: absolute inset-0 bg-gradient-to-b from-background via-transparent to-background
Content (z-10): flex flex-col items-center pt-16 pb-24 px-4 gap-20
A h-40 spacer div for video visibility
Logo Marquee at max-w-5xl:
Left side: text "Relied on by brands / across the globe" in text-foreground/50 text-sm, with <br/>, whitespace-nowrap shrink-0
Right side: horizontally scrolling marquee using animate-marquee (the 20s infinite animation)
Logos are placeholder brands: Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn — duplicated for seamless loop
Each logo: a small liquid-glass w-6 h-6 rounded-lg square with the first letter, plus the brand name in text-base font-semibold text-foreground
Gap between logos: gap-16
8. Page Composition
The Index page simply renders <HeroSection /> then <SocialProofSection /> sequentially with no wrapper styling.Generated by MotionSites Export Tool
---
## HR SaaS Hero / HR SaaS Hero
**文件名**: `HR_SaaS_Hero.md`
**原始 Prompt 代码**:
```markdown
# HR SaaS Hero
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a minimalist, high-end React hero section using Tailwind CSS v4 and the Motion library.
Layout & Spacing:
The section should have a min-h-screen height and be centered.
Apply a heavy top padding of exactly 290px to the main content container to create an editorial, spacious feel.
The content container should have a max-w-[1200px] and a vertical gap of 32px between elements.
Background:
Use this background video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260302_085640_276ea93b-d7da-4418-a09b-2aa5b490e838.mp4.
Critical: The video must be vertically flipped using scaleY(-1) and set to object-cover.
Apply a white gradient overlay on top of the video: from-[26.416%] from-[rgba(255,255,255,0)] to-[66.943%] to-white to seamlessly blend the video into the background.
Typography (Geist & Instrument Serif):
Main Heading: Use the 'Geist' font, medium weight, tracking -0.04em.
Text Content: 'Simple [management] for your remote team'.
Sizes: The main heading should be 80px (desktop), while the word 'management' should be in 'Instrument Serif' italic at 100px.
Description: Geist font, 18px, 80% opacity, slate color (#373a46), max-width 554px.
Interactive Components:
Email Navbar: Create a rounded (40px) input container with bg-[#fcfcfc], a thin border, and a soft shadow (0px 10px 40px 5px rgba(194,194,194,0.25)).
CTA Button: A dark, multi-layered gradient button ('Create Free Account') with a complex inner shadow for a high-gloss tactile effect: shadow-[inset_-4px_-6px_25px_0px_rgba(201,201,201,0.08),inset_4px_4px_10px_0px_rgba(29,29,29,0.24)].
Social Proof: Below the input, add a '1,020+ Reviews' badge with a row of star/brand icons.
Animations:
Use Motion to staggered 'fade and slide up' the heading, description, and the email input block for a smooth entrance.
Key Technical Specs for Implementation:
Video Class: className="w-full h-full object-cover [transform:scaleY(-1)]"
Gradient Class: className="absolute inset-0 bg-gradient-to-b from-[26.416%] from-[rgba(255,255,255,0)] to-[66.943%] to-white"
Button Shadow: shadow-[inset_-4px_-6px_25px_0px_rgba(201,201,201,0.08),inset_4px_4px_10px_0px_rgba(29,29,29,0.24)]Generated by MotionSites Export Tool
---
## Investor Deck / Investor Deck
**文件名**: `Investor_Deck.md`
**原始 Prompt 代码**:
```markdown
# Investor Deck
> **Category:** Investor Presentations
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a presentation-style slide deck web app with 5 slides using React, Tailwind CSS, hls.js for Mux HLS video playback, and motion (from motion/react) for animations. The font is Aeonik, sans-serif. The entire deck has a black background (bg-black) so transitions fade through black, never white.
Global Architecture
App container: Full-width/full-height, overflow-hidden, font-['Aeonik',sans-serif], bg-black.
All 5 slides are always mounted simultaneously (not conditionally rendered) so HLS videos preload in the background. Only opacity changes via Motion's animate={{ opacity: isActive ? 1 : 0 }} with duration: 0.35, ease: "easeInOut". The active slide gets zIndex: 10, inactive slides get zIndex: 0 and pointerEvents: "none".
Keyboard navigation: ArrowRight/ArrowDown/Spacebar = next slide, ArrowLeft/ArrowUp = previous slide.
Navigation dots: Centered at bottom (bottom-5, left-1/2, -translate-x-1/2, z-20), a row of clickable dots with gap-2. Active dot: bg-white w-6 h-2 rounded-full. Inactive dot: bg-white/40 w-2 h-2 rounded-full. All dots have transition-all duration-300.
Each slide receives an isActive prop. Internally tracks activationCount state that increments each time isActive becomes true. The content wrapper uses key={activationCount} to re-mount and re-trigger all animations fresh each time the slide becomes active, while the video stays persistently mounted outside this keyed wrapper.
Shared Components
Logo: A white SVG logo, 116px wide × 36px tall, rendered from imported SVG path data. Appears in the top-left of every slide.
AnimatedText components (reusable across all slides):
SlideUpLine: Clip-reveal slide-up for headings. Wraps children in overflow-hidden inline-block span. Inner motion.span animates from y: "100%" to y: "0%". Default duration 0.7s. Easing: [0.25, 0.1, 0.25, 1].
WordByWordReveal: Splits text by spaces. Each word is in an overflow-hidden inline-block span with mr-[0.27em]. Inner motion.span animates from y: "100%" to y: "0%" with stagger. Default stagger: 0.035s, duration: 0.55s. Same easing curve.
BlurReveal: motion.div animates from opacity: 0, filter: "blur(8px)" to opacity: 1, filter: "blur(0px)". Default duration: 0.9s. Same easing curve. Used for metadata, labels, and description paragraphs.
Common Slide Layout Pattern
Every slide follows this structure:
Full-size container (w-full h-full flex flex-col relative overflow-hidden)
Background video (absolutely positioned, persistently mounted outside the keyed wrapper)
relative z-10 content wrapper (keyed by activationCount)
Top bar: Logo (left) + slide number or metadata (right), wrapped in BlurReveal, with px-[5%] pt-[3.5%]
Divider: mt-6 px-[5%] container with a bg-white/15 h-px w-full line
Content area below
HLS Video Setup Pattern
Each background video uses hls.js:
Create a <video> element with autoPlay muted loop playsInline
In useEffect: if Hls.isSupported(), create new Hls({ autoStartLoad: true }), load source, attach media, play on MANIFEST_PARSED. Cleanup destroys HLS instance. Fallback for Safari: set video.src directly and play on loadedmetadata.
Slide 1 — Title Slide "Innovation and Growth"
Background: bg-black
Video URL: https://stream.mux.com/Aa02T7oM1wH5Mk5EEVDYhbZ1ChcdhRsS2m1NYyx4Ua1g.m3u8
Video styling: absolute inset-0 w-full h-full object-cover (full opacity, no transform)
Top bar (in BlurReveal delay={0.1}):
Left: Logo
Right: 4 metadata items in a flex gap-8 row. Each item is a flex-col with gap-[2px]: label in text-[#80838e] text-[13px], value in text-white text-[13px]. Items: Type→"Investor Deck", Investor→"BlackRock", Date→"February 2026", Industry→"Artificial Intelligence"
Divider: px-[5%] mt-6, bg-white/15 h-px w-full
Title text: Positioned at bottom-left using flex-1 flex items-end px-[5%] pb-[8%]. <h1> with text-white leading-[0.9] tracking-tight, fontSize: clamp(48px, 10vw, 140px). Two lines using SlideUpLine:
Line 1: "Innovation" with delay={0.3} duration={0.7}
<br />
Line 2: "and Growth" with delay={0.4} duration={0.7}
Slide 2 — Problem Statement with Stat Cards
Background: bg-black
Video URL: https://stream.mux.com/s8pMcOvMQXc4GD6AX4e1o01xFogFxipmuKltNfSYza0200.m3u8
Video styling: absolute inset-0 w-full h-full object-cover (full opacity, no transform)
Top bar (in BlurReveal delay={0.05}):
Left: Logo
Right: text-[#80838e] text-[20px] leading-[1.4] showing "02"
Content area: flex flex-col flex-1 justify-between pt-[4%] pb-[5%] inside px-[5%] wrapper
Upper section (max-w-[85%]):
Subtitle: BlurReveal delay={0.15}, text-[#80838e], fontSize: clamp(12px, 1.2vw, 18px), text "Problem Statement"
Heading: WordByWordReveal with text-white leading-[1.04], fontSize: clamp(22px, 3.5vw, 56px), text "In the realm of AI, businesses face challenges in data analysis, decision-making bottlenecks, and seamless integration of AI solutions", baseDelay={0.25} stagger={0.035} duration={0.55}
Stat cards (bottom, flex gap-4 w-full): 3 StatCard components, each flex flex-1 flex-col gap-3 min-w-0. Each card is a motion.div animating from y: 30, opacity: 0 to y: 0, opacity: 1 with duration: 0.6, delay: 0.6 + index * 0.1, ease: [0.25, 0.1, 0.25, 1].
Card 1: value "80%" / label "Face data complexity"
Card 2: value "63%" / label "Struggle with AI integration"
Card 3: value "47%" / label "Delay decisions due to bottlenecks"
Value styling: text-white leading-[0.96] tracking-tight, fontSize: clamp(32px, 6vw, 96px)
Label styling: text-white leading-[1.4], fontSize: clamp(13px, 1.2vw, 20px)
Slide 3 — Market Opportunity with Growth Chart
Background: bg-black
Video URL: https://stream.mux.com/Gs3wZfrtz6ZfqZqQ02c02Z7lugV00FGZvRpcqFTel66r3g.m3u8
Video styling: absolute inset-0 w-full h-full object-cover with transform: scale(-1, -1) (flipped both vertically and horizontally) and opacity: 0.5
Top bar (in BlurReveal delay={0.05}):
Left: Logo
Right: "03" in text-[#80838e] text-[20px] leading-[1.4]
Text content (max-w-[55%] px-[5%] pt-[3%]):
Subtitle: BlurReveal delay={0.15}, text "Market Opportunity", text-[#80838e], fontSize: clamp(12px, 1.2vw, 18px)
Heading: WordByWordReveal, text "At Viktory, we target a growing market for AI innovation, especially in cybersecurity and web3", text-white leading-[1.04], fontSize: clamp(20px, 3.2vw, 52px), baseDelay={0.25} stagger={0.035} duration={0.55}
Description: BlurReveal delay={0.8}, text "We strategically focus on AI innovation at the intersection of cybersecurity and web3, meeting the growing demand for advanced solutions. Positioned at the forefront, we drive transformative technology in the evolving digital landscape.", text-[#80838e] max-w-[90%], fontSize: clamp(12px, 1.1vw, 18px)
Chart: motion.div positioned absolute bottom-[3%] left-0 right-0 top-[40%], animates from opacity: 0, y: 30 to opacity: 1, y: 0 with duration: 0.8, delay: 0.7, ease: [0.25, 0.1, 0.25, 1]. Contains:
ChartArea (absolute bottom-0 right-0 w-[55%] h-[70%]): A purple-to-pink gradient growth curve composed of:
Gradient area fill image (imported PNG)
Opacity line: SVG path with strokeWidth: 24, gradient stroke from white/0.15 to white/0
Main gradient line: SVG path with strokeWidth: 4, linear gradient from #8238DC to #F75CB7
SectorMarker (absolute bottom-[22%] left-[44%]): Shows "32%" value, a 2px white vertical line (40px), and a 100x100px sector circle with white/0.08 fill and a centered gradient dot (#7FBAFF to #536EFB with white stroke)
TopValue (absolute top-[2%] right-[5%]): Shows "127%" in fontSize: clamp(32px, 4vw, 64px), a 2px white vertical line (50px), and a small gradient dot
MidDot (absolute top-[40%] right-[35%]): Small gradient dot only
XAxis (absolute bottom-0 left-0 right-0): Horizontal line in bg-[#1a2035], 8 tick marks, and year labels 2017-2024 in text-[#80838e], fontSize: clamp(11px, 1vw, 18px)
No teal arrow callout
Slide 4 — Sales and Distribution Channels
Background: bg-black
Video URL: https://stream.mux.com/PkFsoKeakRLgL01gjf02CRcSbsJ600Z00NvLr9eRZ92pLbA.m3u8
Video styling: absolute top-0 bottom-0 right-0 h-full object-cover with left: 400px (400px left padding offset)
Top bar: Absolutely positioned (absolute top-0 left-0 right-0 pt-[3.5%]), BlurReveal delay={0.05}:
Left: Logo
Right: "04" in text-[#80838e] text-[20px] leading-[1.4]
Divider: Absolutely positioned at top-[calc(3.5%+52px)], bg-white/15 h-px w-full
Content wrapper: flex flex-col w-full h-full justify-center (vertically centered)
Text content (max-w-[65%] px-[5%]):
Subtitle: BlurReveal delay={0.15}, text "Sales and Distribution Channels", text-[#80838e], fontSize: clamp(12px, 1.2vw, 26px)
Heading: WordByWordReveal, text "Our direct sales team engages with enterprises, while online platforms and strategic partnerships expand our outreach", text-white leading-[1.04], fontSize: clamp(20px, 4vw, 80px), baseDelay={0.25} stagger={0.035} duration={0.55}
Description: BlurReveal delay={1.2}, text "Our direct engagement with enterprises ensures tailored solutions through consultations. Meanwhile, the strategic utilization of online platforms and partnerships significantly broadens our reach, ensuring impactful and diverse distribution.", text-[#80838e] max-w-[784px], fontSize: clamp(12px, 1.1vw, 26px)
Slide 5 — Global Expansion
Background: bg-[#131318]
Video URL: https://stream.mux.com/BuGGTsiXq1T00WUb8qfURrHkTCbhrkfFLSv4uAOZzdhw.m3u8
Video styling: absolute object-cover with inline styles: width: "200%", height: "200%", bottom: 0, left: 0. This makes the video 200% of the slide size with its focal point anchored to the bottom-left corner.
Top bar (in BlurReveal delay={0.05}):
Left: Logo
Right: "05" in text-[#80838e] text-[20px] leading-[1.4]
Divider: mt-6 px-[5%], bg-white/15 h-px w-full
Spacer: flex-1 div pushes text content to the bottom
Text content (at bottom, max-w-[55%] px-[5%] pb-[5%]):
Subtitle: BlurReveal delay={0.15}, text "Global Expansion", text-[#80838e], fontSize: clamp(12px, 1.2vw, 26px)
Heading: WordByWordReveal, text "Opportunities across continents", text-white leading-[1.04], fontSize: clamp(20px, 4vw, 80px), baseDelay={0.25} stagger={0.035} duration={0.55}
Description: BlurReveal delay={0.6}, text "Our global break-even journey aligns revenue with expenses worldwide. Through strategic cost management and international growth initiatives, we target break-even within 18 months, fortifying a strong global financial foundation for success.", text-[#80838e] max-w-[680px], fontSize: clamp(12px, 1.1vw, 26px)
Dependencies
hls.js — HLS video streaming
motion — animations (import from motion/react)
Tailwind CSS v4
Color Palette
Backgrounds: black (slides 1-4), #131318 (slide 5)
Primary text: white
Secondary/muted text: #80838e
Dividers: white/15 (15% opacity white)
Chart gradient: #8238DC → #F75CB7 (purple to pink)
Chart dots gradient: #7FBAFF → #536EFB
X-axis elements: #1a2035Generated by MotionSites Export Tool
---
## Liquid Glass Agency / Liquid Glass Agency
**文件名**: `Liquid_Glass_Agency.md`
**原始 Prompt 代码**:
```markdown
# Liquid Glass Agency
> **Category:** Landing Page
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a single-page landing page for an AI-powered web design agency using React + Vite + TypeScript + Tailwind CSS + shadcn/ui. The aesthetic is dark, premium, Apple-inspired with a custom "liquid glass" morphism effect. Pure black background throughout.
FONTS & DESIGN SYSTEM
Google Fonts import:
Instrument Serif (italic) — headings
Barlow (300, 400, 500, 600) — body text
Tailwind config — extend fontFamily:
heading: ["'Instrument Serif'", "serif"]
body: ["'Barlow'", "sans-serif"]
CSS Variables (:root in index.css):
--background: 213 45% 67%;
--foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 213 45% 67%;
--border: 0 0% 100% / 0.2;
--radius: 9999px;
--font-heading: 'Instrument Serif', serif;
--font-body: 'Barlow', sans-serif;
All headings use: font-heading italic text-white tracking-tight leading-[0.9]
All body text uses: font-body font-light text-white/60 text-sm
All buttons use: font-body with rounded-full
LIQUID GLASS CSS (in @layer components)
Two variants — .liquid-glass (subtle) and .liquid-glass-strong (more visible):
.liquid-glass:
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
::before pseudo-element — a gradient border mask:
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: Same but backdrop-filter: blur(50px), stronger box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), and slightly higher gradient opacity (0.5 / 0.2).
SECTION 1 — NAVBAR (fixed)
Fixed at top-4, full-width, z-50. Left: logo image (48×48). Center: a liquid-glass rounded-full pill containing nav links ("Home", "Services", "Work", "Process", "Pricing") as text-sm font-medium text-foreground/90 + a solid white bg-white text-black rounded-full "Get Started" button with ArrowUpRight icon.
SECTION 2 — HERO (1000px height)
Container: relative overflow-visible, height 1000px, black background.
Background video:
src: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4
Position: absolute, top: 20%, w-full h-auto object-contain z-0
Autoplay, loop, muted, playsInline
Poster fallback image at /images/hero_bg.jpeg
Overlays:
absolute inset-0 bg-black/5 z-0 (light darkening)
Bottom gradient: absolute bottom-0 left-0 right-0 z-[1], height 300px, linear-gradient(to bottom, transparent, black)
Content (z-10, centered, paddingTop 150px):
Badge pill: liquid-glass rounded-full containing a white bg-white text-black rounded-full "New" tag + "Introducing AI-powered web design." text
Heading: Use a BlurText animation component — text: "The Website Your Brand Deserves" — text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-foreground leading-[0.8] tracking-[-4px] — animates word-by-word from bottom with blur-to-clear effect (delay 100ms per word)
Subtext (motion.p): "Stunning design. Blazing performance. Built by AI, refined by experts. This is web design, wildly reimagined." — fades in with blur at 0.8s delay
CTA buttons (motion.div, 1.1s delay): liquid-glass-strong rounded-full "Get Started" + ArrowUpRight icon, and a text-only "Watch the Film" + Play icon
Partners bar at bottom (mt-auto pb-8 pt-16)
BlurText component: Uses motion/react (framer-motion). Splits text by words, each word animates via IntersectionObserver with filter: blur(10px) → blur(5px) → blur(0px), opacity: 0 → 0.5 → 1, y: 50 → -5 → 0. Step duration 0.35s.
SECTION 3 — PARTNERS BAR
Centered column. Top: liquid-glass rounded-full badge "Trusted by the teams behind". Below: horizontal row of partner names ("Stripe", "Vercel", "Linear", "Notion", "Figma") rendered as text-2xl md:text-3xl font-heading italic text-white, gap-12.
SECTION 4 — START SECTION ("How It Works")
Full-width section, min-height: 700px, py-32 px-6 md:px-16 lg:px-24.
Background HLS video:
src: https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8
Use hls.js library. Absolute, full cover, z-0. Top + bottom fade gradients (200px each, black ↔ transparent).
Content (z-10, centered, min-height 500px):
Badge: liquid-glass rounded-full — "How It Works"
Heading: "You dream it. We ship it." — text-4xl md:text-5xl lg:text-6xl font-heading italic
Subtext: "Share your vision. Our AI handles the rest—wireframes, design, code, launch. All in days, not quarters."
Button: liquid-glass-strong rounded-full "Get Started" + ArrowUpRight
SECTION 5 — FEATURES CHESS (alternating rows)
py-24 px-6 md:px-16 lg:px-24. Header: badge "Capabilities", heading "Pro features. Zero complexity."
Row 1 (text left, image right):
H3: "Designed to convert. Built to perform."
P: "Every pixel is intentional. Our AI studies what works across thousands of top sites—then builds yours to outperform them all."
Button: liquid-glass-strong rounded-full "Learn more"
Image: GIF in liquid-glass rounded-2xl overflow-hidden container
Row 2 (image left, text right — using lg:flex-row-reverse):
H3: "It gets smarter. Automatically."
P: "Your site evolves on its own. AI monitors every click, scroll, and conversion—then optimizes in real time. No manual updates. Ever."
Button: "See how it works"
SECTION 6 — FEATURES GRID (4 columns)
Badge "Why Us", heading "The difference is everything."
4 cards in grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6. Each card: liquid-glass rounded-2xl p-6. Contains:
Icon in liquid-glass-strong rounded-full w-10 h-10 circle
Title: text-lg font-heading italic text-white
Description: text-white/60 font-body font-light text-sm
Cards:
⚡ Zap — "Days, Not Months" — "Concept to launch at a pace that redefines fast."
🎨 Palette — "Obsessively Crafted" — "Every detail considered. Every element refined."
📊 BarChart3 — "Built to Convert" — "Layouts informed by data. Decisions backed by performance."
🛡️ Shield — "Secure by Default" — "Enterprise-grade protection comes standard."
SECTION 7 — STATS
Background HLS video:
src: https://stream.mux.com/NcU3HlHeF7CUL86azTTzpy3Tlb00d6iF3BmCdFslMJYM.m3u8
Desaturated: style={{ filter: 'saturate(0)' }}. Top + bottom black fades (200px).
Content (z-10): liquid-glass rounded-3xl p-12 md:p-16, grid grid-cols-2 lg:grid-cols-4 gap-8 text-center:
"200+" — "Sites launched"
"98%" — "Client satisfaction"
"3.2x" — "More conversions"
"5 days" — "Average delivery"
Values: text-4xl md:text-5xl lg:text-6xl font-heading italic text-white
Labels: text-white/60 font-body font-light text-sm
SECTION 8 — TESTIMONIALS
Badge "What They Say", heading "Don't take our word for it."
3-column grid. Each: liquid-glass rounded-2xl p-8. Quote in text-white/80 font-body font-light text-sm italic. Name: text-white font-body font-medium text-sm. Role: text-white/50 font-body font-light text-xs.
Testimonials:
Sarah Chen, CEO Luminary — "A complete rebuild in five days..."
Marcus Webb, Head of Growth Arcline — "Conversions up 4x..."
Elena Voss, Brand Director Helix — "They didn't just design our site..."
SECTION 9 — CTA FOOTER
Background HLS video:
src: https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8
Top + bottom black fades (200px).
Content (z-10, centered):
Heading: "Your next website starts here." — text-5xl md:text-6xl lg:text-7xl
Subtext: "Book a free strategy call. See what AI-powered design can do."
Two buttons: liquid-glass-strong "Book a Call" + solid bg-white text-black "View Pricing"
Footer: mt-32 pt-8 border-t border-white/10, copyright "© 2026 Studio" + links (Privacy, Terms, Contact) in text-white/40 text-xs
DEPENDENCIES
hls.js, motion (framer-motion), lucide-react, tailwindcss-animate
KEY PATTERNS
All section badges use: liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body inline-block mb-4
All section headings use: text-4xl md:text-5xl lg:text-6xl font-heading italic text-white tracking-tight leading-[0.9]
All video sections use HLS via hls.js with Safari fallback (canPlayType)
All video fades: 200px height, linear-gradient(to bottom/top, black, transparent)
Outer page wrapper: bg-black overflow-visibleGenerated by MotionSites Export Tool
---
## Loader Animation / Loader Animation
**文件名**: `Loader_Animation.md`
**原始 Prompt 代码**:
```markdown
# Loader Animation
> **Category:** Component
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
_No video preview available for this prompt._
---
## 📋 Prompt
```text
Build a fullscreen loading screen component in React (Next.js 14, TypeScript). Uses Framer Motion for animations. Here is the exact specification:
Theme
css
--bg: #0a0a0a;
--text: #f5f5f5;
--muted: #888888;
--stroke: #1f1f1f;
Fonts: font-display → Instrument Serif (Google Fonts, italic, weight 400).
Component: LoadingScreen
Receives one prop: onComplete: () => void.
Container: <motion.div> — fixed inset-0 z-[9999] bg-bg. Exit animation: exit={{ opacity: 0 }}, duration 0.6s, ease [0.4, 0, 0.2, 1]. Wrap in <AnimatePresence mode="wait"> from the parent.
Element 1: "Portfolio" Label (Top-Left)
<motion.div> — absolute top-8 left-8 md:top-12 md:left-12.
Text: "Portfolio"
Class: text-xs md:text-sm text-muted uppercase tracking-[0.3em]
Entrance animation: initial={{ opacity: 0, y: -20 }}, animate={{ opacity: 1, y: 0 }}, duration 0.6s, delay 0.1s
Element 2: Rotating Words (Center)
absolute inset-0 flex items-center justify-center.
Three words cycle in sequence: "Design" → "Create" → "Inspire". A new word appears every 900ms. The word index increments via setInterval and stops at the last word (doesn't loop).
Each word is a <motion.span> inside <AnimatePresence mode="wait">, keyed by wordIndex:
Class: text-4xl md:text-6xl lg:text-7xl font-display italic text-text/80
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
Element 3: Counter (Bottom-Right)
<motion.div> — absolute bottom-8 right-8 md:bottom-12 md:right-12.
A number that counts from 000 → 100 over exactly 2.7 seconds using requestAnimationFrame. Each frame calculates elapsed / 2700 * 100. The number is displayed zero-padded to 3 digits (e.g. 007, 042, 100):
{Math.round(progress).toString().padStart(3, '0')}
Class: text-6xl md:text-8xl lg:text-9xl font-display text-text tabular-nums
Entrance animation: initial={{ opacity: 0, y: 20 }}, animate={{ opacity: 1, y: 0 }}, duration 0.6s, delay 0.1s
When progress reaches 100: Wait 400ms, then call onComplete(). Use a ref for onComplete to avoid stale closures.
Element 4: Progress Bar (Bottom Edge)
absolute bottom-0 left-0 right-0. A 3px tall track:
Track: h-[3px] bg-stroke/50 (full width)
Fill: <motion.div> inside the track:
h-full origin-left
Background: linear-gradient(90deg, #89AACC 0%, #4E85BF 100%)
Glow: boxShadow: "0 0 8px rgba(137, 170, 204, 0.35)"
initial={{ scaleX: 0 }}
animate={{ scaleX: progress / 100 }}
transition={{ duration: 0.1, ease: "linear" }}
Parent Wrapper Behavior
The parent component (AppWrapper) controls visibility:
State: isLoading starts true
Renders <LoadingScreen onComplete={() => setIsLoading(false)} /> inside <AnimatePresence mode="wait"> only when isLoading is true
Main page content sits below with: style={{ opacity: isLoading ? 0 : 1, transition: "opacity 0.5s ease-out" }}
When the loader calls onComplete, it triggers: loader fades out (0.6s) → page fades in (0.5s)
Timing Summary
0.0s — Loader appears, "Portfolio" slides in, counter starts at 000
0.0s — "Design" appears
0.9s — "Create" replaces "Design"
1.8s — "Inspire" replaces "Create"
2.7s — Counter hits 100, progress bar full
3.1s — onComplete fires (400ms delay)
3.1s — Loader fades out (0.6s exit animation)
3.7s — Page content fades in (0.5s opacity transition)Generated by MotionSites Export Tool
---
## Logoisum Video Agency / Logoisum Video Agency
**文件名**: `Logoisum_Video_Agency.md`
**原始 Prompt 代码**:
```markdown
# Logoisum Video Agency
> **Category:** Agency
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a premium, high-end hero section for a video editing agency named 'Logoisum' with the following specifications:
Background: Implement a full-screen, looping video background using this URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260228_065522_522e2295-ba22-457e-8fdb-fbcd68109c73.mp4. The video must be muted, autoplaying, and set to object-cover to fill the section without any color overlays.
Navigation Bar: A floating white navigation bar with rounded-[16px] and a subtle shadow.
Left: The agency logo.
Center: A menu with links for 'About', 'Works', 'Services', and 'Testimonial' using 14px Barlow Medium font.
Right: A dark (#222) primary CTA button labeled 'Book A Free Meeting' featuring a unique 45-degree arrow icon in a circular housing.
Typography & Hero Content:
Primary Headline: Centered layout. The first line 'Agency that makes your' should use a bold/medium Barlow font with tight tracking (tracking-[-4px]). The second line 'videos & reels viral' must use a large, elegant 'Instrument Serif' italic font (text-[84px]).
Subtext: Below the headline, add the text 'Short-form video editing for Influencers, Creators and Brands' in Barlow Medium, 18px, centered.
Secondary CTA: A large white pill-shaped button below the subtext labeled 'See Our Workreel' with a small play icon on the left.
Overall Aesthetic: The design should be minimal, ultra-modern, and responsive. Ensure all text and buttons are layered on top of the video background with clear visibility and proper spacing (min-h-[90vh]).Generated by MotionSites Export Tool
---
## Mindloop / Mindloop
**文件名**: `Mindloop.md`
**原始 Prompt 代码**:
```markdown
# Mindloop
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a full-screen hero section with a background video, navbar, and centered content. Use a dark theme with all white text.
Background Video:
Full-screen <video> element with autoPlay loop muted playsInline
Positioned absolute inset-0 w-full h-full object-cover z-0
Source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_151826_c7218672-6e92-402c-9e45-f1e0f454bdc4.mp4
Font:
Import Google Font: Instrument Serif (display) and Inter (body)
All headings use font-family: 'Instrument Serif', serif
Body text uses Inter, sans-serif
Navbar (relative z-10):
Flex row, justify-between, px-8 py-6, max-w-7xl mx-auto
Left: Brand name "Velorah®" — text-3xl tracking-tight, white, Instrument Serif. The ® is wrapped in <sup className="text-xs">
Center: Hidden on mobile (hidden md:flex), links: Home, Studio, About, Journal, Reach Us — text-sm text-white, gap-10, hover:opacity-80 transition-opacity
Right: "Begin Journey" button with liquid-glass effect, rounded-full px-6 py-2.5 text-sm, hover:scale-[1.03]
Hero Content (relative z-10):
Flex column, centered (items-center justify-center text-center), px-6 pt-32 pb-40
H1: "Focus in a Distracted World" — text-5xl sm:text-7xl md:text-8xl, leading-[0.95], tracking-[-2.46px], max-w-7xl, white, Instrument Serif, animate-fade-rise
Paragraph: "We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work." — text-base sm:text-lg, max-w-2xl mt-8 leading-relaxed, white, animate-fade-rise-delay
CTA Button: "Begin Journey" — liquid-glass, rounded-full px-14 py-5 text-base, white, mt-12, hover:scale-[1.03], animate-fade-rise-delay-2
Liquid Glass CSS (.liquid-glass):
.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;
}
Animations:
@keyframes fade-rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-rise { animation: fade-rise 0.8s ease-out both; }
.animate-fade-rise-delay { animation: fade-rise 0.8s ease-out 0.2s both; }
.animate-fade-rise-delay-2 { animation: fade-rise 0.8s ease-out 0.4s both; }
Page background: bg-black (hsl(0,0%,0%)), section is min-h-screen overflow-hidden.Generated by MotionSites Export Tool
---
## Mindloop Landing / Mindloop Landing
**文件名**: `Mindloop_Landing.md`
**原始 Prompt 代码**:
```markdown
# Mindloop Landing
> **Category:** Landing Page
> **Type:** landing-page
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a dark monochrome landing page called Mindloop — a newsletter/content platform. Use React + Vite + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion. Fonts: Inter (sans) and Instrument Serif (serif, used for italic accent words). The entire theme is pure black (#000) background with white foreground — no colors or gradients beyond monochrome. Install hls.js and framer-motion.
Design System (index.css)
All CSS variables in HSL (no hsl() wrapper in the variable, just the values):
--background: 0 0% 0%
--foreground: 0 0% 100%
--card: 0 0% 5%
--card-foreground: 0 0% 100%
--primary: 0 0% 100%
--primary-foreground: 0 0% 0%
--secondary: 0 0% 12%
--secondary-foreground: 0 0% 85%
--muted: 0 0% 15%
--muted-foreground: 0 0% 65%
--accent: 170 15% 45%
--accent-foreground: 0 0% 100%
--border: 0 0% 20%
--input: 0 0% 18%
--ring: 0 0% 40%
--hero-subtitle: 210 17% 95%
Liquid Glass Effect (global CSS class .liquid-glass)
.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;
}
Animation Pattern
All sections use a reusable fadeUp helper with staggered delays:
const fadeUp = (delay: number) => ({
initial: { opacity: 0, y: 20 },
whileInView: { opacity: 1, y: 0 },
viewport: { once: true, margin: "-100px" },
transition: { duration: 0.6, delay, ease: "easeOut" },
});
Page Structure (top to bottom)
1. Navbar (fixed, transparent)
Left: Logo (concentric circles icon — outer w-7 h-7 with border-2 border-foreground/60, inner w-3 h-3 with border border-foreground/60) + "Mindloop" bold text.
Center-left: Nav links ["Home", "How It Works", "Philosophy", "Use Cases"] separated by • dots. Links are text-muted-foreground hover:text-foreground.
Right: 3 social icons (Instagram, Linkedin, Twitter from lucide-react) in liquid-glass circular buttons (w-10 h-10 rounded-full).
No background — fully transparent, fixed top-0 z-50, padding px-8 md:px-28 py-4.
2. Hero Section (full viewport height)
Background: autoplaying looping muted MP4 video covering the entire section.
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_120549_0cd82c36-56b3-4dd9-b190-069cfc3a623f.mp4
Bottom gradient: h-64 bg-gradient-to-t from-background to-transparent for smooth fade to black.
Content (centered, z-10, pt-28 md:pt-32):
Avatar row: 3 overlapping circular avatars (-space-x-2, w-8 h-8 rounded-full border-2 border-background) + "7,000+ people already subscribed" in text-muted-foreground text-sm.
Heading: text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] — "Get Inspired with Us" where "Inspired" is font-serif italic font-normal.
Subtitle: text-lg in hsl(var(--hero-subtitle)) color — "Join our feed for meaningful updates, news around technology and a shared journey toward depth and direction."
Email form: liquid-glass rounded-full p-2 max-w-lg container with email input and a white bg-foreground text-background rounded-full px-8 py-3 "SUBSCRIBE" button with whileHover scale 1.03 and whileTap scale 0.98.
3. "Search has changed" Section
Top padding pt-52 md:pt-64, bottom padding pb-6 md:pb-9.
Heading: text-5xl md:text-7xl lg:text-8xl — "Search has changed. Have you?" with "changed." in serif italic.
Subtitle: text-muted-foreground text-lg max-w-2xl mx-auto mb-24.
3 platform cards (grid md:grid-cols-3 gap-12 md:gap-8 mb-20): Each card has a 200x200 icon image centered, platform name (font-semibold text-base), and description (text-muted-foreground text-sm).
ChatGPT icon: local asset icon-chatgpt.png
Perplexity icon: local asset icon-perplexity.png
Google AI icon: local asset icon-google.png
Bottom tagline: "If you don't answer the questions, someone else will." in text-muted-foreground text-sm text-center.
4. Mission Section
Padding pt-0 pb-32 md:pb-44.
Video: Large 800x800 looping autoplaying muted video centered.
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_132944_a0d124bb-eaa1-4082-aa30-2310efb42b4b.mp4
Scroll-driven word-by-word reveal using useScroll and useTransform from framer-motion:
Paragraph 1 (text-2xl md:text-4xl lg:text-5xl font-medium tracking-[-1px]): "We're building a space where curiosity meets clarity — where readers find depth, writers find reach, and every newsletter becomes a conversation worth having." Words "curiosity", "meets", "clarity" are highlighted in --foreground, rest in --hero-subtitle.
Paragraph 2 (text-xl md:text-2xl lg:text-3xl font-medium mt-10): "A platform where content, community, and insight flow together — with less noise, less friction, and more meaning for everyone involved."
Each word transitions opacity from 0.15 to 1 based on scroll progress.
5. Solution Section
Padding py-32 md:py-44, border-t border-border/30.
Label: "SOLUTION" in text-xs tracking-[3px] uppercase text-muted-foreground.
Heading: text-4xl md:text-6xl — "The platform for meaningful content" (serif italic on "meaningful").
Video: Rounded rounded-2xl, aspect-[3/1] object-cover.
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_125119_8e5ae31c-0021-4396-bc08-f7aebeb877a2.mp4
4-column feature grid (md:grid-cols-4 gap-8): Curated Feed, Writer Tools, Community, Distribution — each with title (font-semibold text-base) and description (text-muted-foreground text-sm).
6. CTA Section
Padding py-32 md:py-44, border-t border-border/30, overflow-hidden.
Background video (HLS via hls.js): absolute inset-0 object-cover z-0.
HLS URL: https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8
Uses Hls.isSupported() check with fallback to native HLS for Safari.
Overlay: absolute inset-0 bg-background/45 z-[1].
Content (z-10, centered):
Concentric circles logo icon (w-10 h-10 outer, w-5 h-5 inner).
Heading: "Start Your Journey" (serif italic).
Subtitle in text-muted-foreground.
Two buttons: "Subscribe Now" (bg-foreground text-background rounded-lg px-8 py-3.5) and "Start Writing" (liquid-glass rounded-lg).
7. Footer
Simple py-12 px-8 md:px-28 footer.
Left: "© 2026 Mindloop. All rights reserved." in text-muted-foreground text-sm.
Right: Privacy, Terms, Contact links in text-muted-foreground text-sm hover:text-foreground.
Key Dependencies
framer-motion for all animations
hls.js for the CTA background video streaming
@fontsource/inter (400, 500, 600, 700)
@fontsource/instrument-serif (400, 400-italic)
lucide-react for icons
tailwindcss-animate plugin
Assets Needed
3 avatar images (avatar-1.png, avatar-2.png, avatar-3.png)
3 platform icons (icon-chatgpt.png, icon-perplexity.png, icon-google.png)Generated by MotionSites Export Tool
---
## NOVA Space Systems / NOVA Space Systems
**文件名**: `NOVA_Space_Systems.md`
**原始 Prompt 代码**:
```markdown
# NOVA Space Systems
> **Category:** Landing Page
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a NOVA Space Launch Systems landing page — a dark, minimal aerospace website using React + Vite + Tailwind CSS + TypeScript + shadcn/ui. The aesthetic is brutally minimal with a pure black/white monochrome palette, no border-radius anywhere (--radius: 0rem), and a single font: Space Grotesk (loaded from Google Fonts, weights 400–700) used for both display and body text.
🎨 Design System (index.css + tailwind.config.ts)
Color Palette (all HSL, light mode only — dark mode is unused):
--background: 0 0% 0% (pure black)
--foreground: 0 0% 100% (pure white)
--muted-foreground: 0 0% 65% (gray for body text)
--nav-border: 0 0% 35% (subtle gray divider lines)
--border: 0 0% 25%
--radius: 0rem (no rounded corners anywhere)
All other tokens (card, popover, primary, secondary, accent, destructive, sidebar) follow the same black/white monochrome scheme.
Tailwind config:
fontFamily.display and fontFamily.body both map to "Space Grotesk", sans-serif
Custom color nav-border: hsl(var(--nav-border)) for decorative divider lines
tailwindcss-animate plugin installed
📐 Page Layout (Index.tsx)
The page is a single vertical scroll with 3 sections:
Hero fills exactly 100vh including navbar
🧭 Section 1: Navbar
A custom-built navigation bar (no shadcn component). Desktop (md+): 3-column layout using flex items-stretch h-16:
Left: Links "Programs", "Systems", "Discover" — text-sm font-body tracking-wide, separated by vertical 1px bg-nav-border divider lines (with mt-3 mb-3 ml-3 insets). Below the links, a horizontal h-px bg-nav-border line with px-4 mt-1.
Center: Logo "NOVA" — text-2xl font-display font-bold tracking-widest, centered with flex-1. Below it, two side-by-side horizontal divider lines (flex gap-4, each flex-1 h-px bg-nav-border).
Right: "Search" text + Search icon + Menu icon from lucide-react. Same vertical divider treatment as left side (mt-3 mb-3 mr-3).
Mobile: Simplified — logo left, menu icon right, full-width bottom border.
🚀 Section 2: HeroSection
Full viewport height (h-[calc(100vh-theme(spacing.16))]).
Background Video: Autoplaying, muted, looping video. URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_031824_0c85e1e9-fe2b-4d52-8cde-25b0c2b5e8a2.mp4
object-cover fills the container; focal point shifts right on smaller screens (85% mobile, 75% tablet, center on desktop)
No overlay/gradient — video is fully visible
Content overlay (relative z-10 px-8 pt-12 pb-24):
H1: "ROCKETS" — text-[4.5rem] md:text-[10rem] lg:text-[12rem] font-display font-black leading-[0.85] tracking-tighter text-foreground
Right-aligned description block (flex justify-end mt-4, inner flex flex-col items-end max-w-3xl):
Paragraph: "From precise orbital insertions to deep space trajectories, NOVA's launch systems deliver unmatched performance and dependability, backed by over five decades of proven spaceflight excellence." — text-base md:text-lg font-body text-foreground/90 leading-relaxed text-right
CTA Button: "View Our Fleet" — rectangular, no border-radius, bg-foreground text-background pl-5 pr-1.5 py-1.5 font-body text-sm tracking-wide. Contains text + a square icon container (w-10 h-10 bg-background) with ArrowUpRight icon from lucide-react. hover:opacity-90 transition-opacity.
🔬 Section 3: RocketScienceSection
Title block (px-8 pt-32 pb-16 flex justify-center):
"ROCKET" on line 1, "SCIENCE" on line 2 indented with ml-[1.5em] md:ml-[3.5em]
text-[2.5rem] md:text-[6rem] lg:text-[7rem] font-display font-extralight leading-[0.9] tracking-tighter uppercase
Grid area (px-8):
Top border: 4 equal h-px bg-nav-border lines in a flex gap-4
Decorative vertical dividers on left, center, and right edges (1px lines with gap-4 between segments, inset with ml-3/mr-3 py-3)
Desktop (lg+): A CSS Grid grid-cols-[auto_1fr_auto_1fr_auto] grid-rows-3 creating a staggered 2×3 layout:
Top-left: Text card — heading "How do we get to space?" (text-2xl md:text-3xl font-display font-normal) + body paragraph (font-body text-muted-foreground leading-relaxed text-lg). Padding p-12.
Top-right spanning 2 rows: Video (p-6, w-full h-full object-cover): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_032431_5e054107-51c0-4162-9f0f-3a40054761ef.mp4
Bottom-left spanning 2 rows: Video (p-6): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_032535_4ccc152e-0cc8-4ee5-a698-e1a98cea8a1e.mp4
Bottom-right: Text card — heading "Launch vehicles" + body paragraph. Same styling. p-12.
Horizontal dividers between rows (2 segments per divider, flex gap-4)
Mobile/Tablet: Stack cards vertically with horizontal dividers between each.
Tech Stack: React 18, TypeScript, Tailwind CSS v3, Vite with @vitejs/plugin-react-swc, shadcn/ui (installed but only used for design tokens, not for these sections).
Font Loading (index.html):
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">Generated by MotionSites Export Tool
---
## NeoVision / NeoVision
**文件名**: `NeoVision.md`
**原始 Prompt 代码**:
```markdown
# NeoVision
> **Category:** Landing Page
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a modern, futuristic landing page using React + Vite + TypeScript + Tailwind CSS. Use lucide-react for icons. The page has 3 sections: a Hero, an About section, and an Insights section. The overall page background is black (bg-black). No custom fonts -- use the Tailwind default (system sans-serif).
SECTION 1: HERO (full viewport height, light background)
The hero wrapper is a relative container. On mobile it has min-height: 100vh. On desktop (md: breakpoint) it has height: 100vh and min-height: auto. It has overflow: hidden.
Background layers (stacked with z-index):
z-index 0: A solid background fill #FBFDFD covering the entire wrapper (absolute inset-0).
z-index 1: A background video positioned absolute right-0 top-0 bottom-0. On mobile it is full width with opacity-30. On desktop it is w-[55%] with full opacity. The video element has object-cover object-top. The video URL is: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131232_feeda0b7-d00d-4bfa-a9d5-5d38648a4214.mp4 (autoPlay, loop, muted, playsInline). The video container and video both have a CSS class video-plus-darker with mix-blend-mode: normal !important.
z-index 2: The content layer. This is a relative div with min-h-screen md:h-screen flex flex-col. It contains the Navbar and HeroSection.
Navbar (inside content layer):
relative z-10, flex row, justify-between, padding px-5 py-4 md:px-12 md:py-6
Left side: Logo image (/image.png, height h-7 md:h-8), followed by hidden-on-mobile nav links: Home, About, Services, Contact. Links are text-sm text-neutral-500 hover:text-neutral-900. Gap between logo and links: gap-12.
Right side: A search input (hidden on mobile, shown on desktop). Rounded-full, w-72, placeholder "I am looking for...", with a Search icon from lucide-react positioned absolute right inside. Border border-neutral-300, text text-neutral-600.
Mobile: A hamburger button (Menu icon from lucide-react) in a 40px circle with border-neutral-300. When toggled, a dropdown shows the nav links vertically and a full-width search input.
HeroSection (inside content layer, flex-1):
relative z-10 flex-1 flex flex-col justify-between with padding px-5 pt-8 pb-20 md:px-12 md:pt-16 md:pb-36
Top: Label "Futuristic" -- text-xs font-medium tracking-[0.3em] text-neutral-500 uppercase
Main heading area: Flex row with a small "05" number on the left (text-sm text-neutral-400 mt-2 md:mt-4), then the heading: text-[2.75rem] md:text-[5.5rem] leading-[0.95] font-light tracking-tight text-neutral-900 reading "NEW DIGITAL" (line break) "UNIVERSE". Below the heading: a "Get Started" button (bg-neutral-900 text-white text-sm font-medium rounded, px-6 py-3 md:px-8 md:py-3.5) and a "Contact Us" text link.
Middle stat: "47.2%" with "Reality" label underneath. The stat group uses a custom CSS class hero-stat-group that on desktop has margin-right: 20% and justify-center. On mobile, margin-right: 0 and justify-start.
Bottom bar: Flex col on mobile, flex row on desktop with justify-between. Left side: "Trusted by Clients" label with 4 overlapping avatar circles (Pexels photos: 415829, 1222271, 1239291, 2379004 at w=100) using -space-x-2, each w-8 h-8 md:w-9 md:h-9 rounded-full border-2 border-neutral-100 object-cover, followed by "20+" text. Right side: A link icon (lucide Link) in a w-10 h-10 md:w-12 md:h-12 circle with border-neutral-300, next to a description paragraph "In this futuristic realm, users can explore hyper-realistic virtual environments, interact with AI-driven avatars." (text-xs md:text-sm text-neutral-500 max-w-[200px] md:max-w-sm). This group uses custom class hero-description-group which on desktop has margin-right: 50%.
Diagonal Section Divider (between Hero and About):
The SectionDivider is positioned absolute bottom-0 left-0 w-full with z-index: 3, inside the hero wrapper.
Contains an SVG with viewBox="0 0 1440 120", preserveAspectRatio="none", height h-[60px] md:h-[120px].
The SVG has a single polygon: points="0,0 0,120 1440,120 1440,80 920,80 680,0" filled with #0F0F0F. This creates a diagonal cut from the left side going down to the black About section.
SECTION 2: ABOUT (dark background #0F0F0F)
Full-width section, backgroundColor: '#0F0F0F'
Two-column layout on desktop (lg:flex-row), stacked on mobile. Min-height 600px (lg: 700px).
Left column: A video that fills the space (object-cover mix-blend-lighten). Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_132809_d6ea910f-d700-44f7-afea-27d517487177.mp4 (autoPlay, loop, muted, playsInline). On mobile the video area is h-[400px].
Right column: Padding px-8 py-16 md:px-16 lg:px-20 xl:px-28, vertically centered content with max-width max-w-lg:
Label: "About Us" (text-xs font-medium tracking-[0.3em] text-neutral-500 uppercase, mb-8 md:mb-10)
Heading: "THE DIGITAL FRONTIER" (text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light tracking-tight text-white leading-[1.05], mb-10 md:mb-12)
Three pill tags: "Digital", "Reality", "Next" -- px-5 py-2 rounded-full border border-neutral-700 text-sm text-neutral-300 hover:border-neutral-500
Paragraph: "Step into The Digital Frontier, where the boundaries between reality and virtual innovation disappear. This is the next era of immersive technology." (text-sm md:text-base text-neutral-400 leading-relaxed max-w-md)
Actions: "Learn More" button (bg-neutral-800 text-white text-sm font-medium rounded px-7 py-3.5 hover:bg-neutral-700) and a "Watch a Video" link with a Play icon (lucide Play) inside a w-10 h-10 bordered circle.
SECTION 3: INSIGHTS (dark background #0F0F0F, tabbed content)
Same backgroundColor: '#0F0F0F'. Padding px-8 md:px-16 lg:px-20 xl:px-28 pt-24 pb-32.
Large italic heading: "LIMITLESS POSSIBILITIES WITH NEOVISION" (text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-[5rem] font-light italic tracking-tight text-white leading-[1.05] max-w-5xl, mb-20 md:mb-28).
Below: a flex layout (col on mobile, row on desktop).
Left: Tab buttons (vertical list) for 3 tabs: "Innovation", "Technology", "Experience". Active tab is text-white font-medium, inactive is text-neutral-500 hover:text-neutral-300. Width lg:w-[160px] xl:w-[200px].
Right: Content area with an image and text side by side on desktop.
Image: lg:w-[420px] xl:w-[480px] aspect-[4/3] rounded-2xl overflow-hidden. Images are local files /Mask_group.jpg, /Mask_group-1.jpg, /Mask_group-2.jpg for the 3 tabs respectively.
Text side: Title (text-2xl md:text-3xl font-light text-white leading-snug max-w-sm), description (text-sm md:text-base text-neutral-400 leading-relaxed max-w-sm), "Learn More" underlined link (text-sm text-white font-medium underline underline-offset-4). At the bottom: date and author separated by a border-t border-neutral-800.
Tab data:
Innovation: "How VR is Transforming Our Digital World" / "Virtual Reality (VR) is no longer a concept of the future..." / 08 February 2025 / Henry Leonardo
Technology: "The Rise of Spatial Computing in Everyday Life" / "Spatial computing is bridging the gap..." / 15 March 2025 / Sarah Mitchell
Experience: "Designing Immersive Worlds That Feel Real" / "From haptic feedback to photorealistic rendering..." / 22 April 2025 / James Park
CUSTOM CSS (index.css):
.video-plus-darker {
mix-blend-mode: normal !important;
}
.app-hero-wrapper {
min-height: 100vh;
overflow: hidden;
}
@media (min-width: 768px) {
.app-hero-wrapper {
min-height: auto;
height: 100vh;
}
}
.hero-description-group {
margin-right: 0;
}
.hero-stat-group {
margin-right: 0;
}
@media (min-width: 768px) {
.hero-description-group {
margin-right: 50%;
}
.hero-stat-group {
margin-right: 20%;
}
}
KEY DETAILS:
Tech stack: React 18, Vite, TypeScript, Tailwind CSS 3, lucide-react for all icons
No custom fonts -- default Tailwind sans-serif stack
Color palette: White hero (#FBFDFD), dark sections (#0F0F0F), neutral grays from Tailwind for text
The diagonal divider SVG polygon creates an angled transition from the light hero to the dark about section. It is positioned absolutely at the bottom of the hero wrapper.
Both videos are autoPlay, loop, muted, playsInline
The hero section has pb-20 md:pb-36 bottom padding to prevent the diagonal divider from overlapping the "Trusted by Clients" content
The SectionDivider component is rendered inside the hero wrapper div (not between wrapper and AboutSection)
Logo image at /image.png in the public folder
Insight images at /Mask_group.jpg, /Mask_group-1.jpg, /Mask_group-2.jpg in the public folderGenerated by MotionSites Export Tool
---
## Neuralyn / Neuralyn
**文件名**: `Neuralyn.md`
**原始 Prompt 代码**:
```markdown
# Neuralyn
> **Category:** SaaS
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a dark landing page for "Neuralyn" — an analytics dashboard SaaS. Use React + Vite + Tailwind CSS + TypeScript + Framer Motion + shadcn/ui.
Fonts
Inter (400, 500, 600, 700) for body/UI via @fontsource/inter
Instrument Serif (400, 400-italic) for the italic accent word via @fontsource/instrument-serif
Color Theme (all HSL, dark mode by default in :root)
Background: 0 0% 0% (pure black)
Foreground: 0 0% 100% (pure white)
Muted foreground: 0 0% 65%
Card: 0 0% 5%
Border: 0 0% 20%
Hero subtitle: 210 17% 95%
Page Structure
Section 1: Hero (full viewport height, overflow-hidden)
Navbar — horizontal, padded px-8 md:px-28 py-4:
Left: Logo image + "Neuralyn" text (text-xl font-bold tracking-tight) + nav links (Home, Services with ChevronDown icon, Reviews, Contact us) — links hidden on mobile, gap-1 between links, gap-12 md:gap-20 between logo and links
Right: "Sign In" button — solid white background (bg-foreground), black text (text-background), rounded-lg text-sm font-semibold, hover opacity transition
Hero Content — centered column, mt-16 md:mt-20 px-4:
Tag pill: A "liquid glass" styled pill (liquid-glass class) with inner "New" badge (white bg, black text, rounded-md text-sm font-medium px-2 py-0.5) + "Say Hello to Corewave v3.2" in text-sm font-medium text-muted-foreground. Pill has px-3 py-2 rounded-lg mb-6.
Title: text-5xl md:text-7xl, tracking-[-2px], font-medium, leading-tight md:leading-[1.15] mb-3. Text: "Your Insights." / "One Clear Overview." — the word "Overview" is in Instrument Serif italic (font-serif italic font-normal)
Subtitle: text-lg font-normal leading-6 opacity-90 mb-8, color uses CSS variable --hero-subtitle. Text: "Neuralyn helps teams track metrics, goals, and progress with precision." with a <br/> after "goals,"
CTA Button: "Get Started for Free" — solid white (bg-foreground text-background), rounded-full px-8 py-3.5 text-base font-medium, whileHover: scale 1.03, whileTap: scale 0.98
Dashboard + Video Area — full viewport width using w-screen with marginLeft: calc(-50vw + 50%) trick, aspect-ratio: 16/9, positioned relative:
Background video: <video>, absolutely positioned inset-0 w-full h-full object-cover. URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4
Dashboard image: Absolutely positioned, centered, max-w-5xl w-[90%] rounded-2xl, mixBlendMode: "luminosity". Has parallax scroll (y: 0→-250).
Bottom gradient fade: Absolutely positioned at bottom of section, h-40, gradient from background to transparent, z-30, pointer-events-none.
Parallax Scroll Effects (Framer Motion useScroll({ target: sectionRef, offset: ["start start", "end start"] }) + useTransform):
Hero text content group: y: [0, -200] and opacity: [1, 0] (fades over first 50% of scroll)
Dashboard image: y: [0, -250]
Entrance Animations: Staggered initial={{ opacity: 0, y }} / animate={{ opacity: 1, y: 0 }}:
Tag pill: y: 10, duration 0.5s, delay 0
Title: y: 20, duration 0.6s, delay 0.1
Subtitle: y: 20, duration 0.6s, delay 0.2
CTA: y: 20, duration 0.6s, delay 0.3
Dashboard area: y: 40, duration 0.8s, delay 0.4
Liquid Glass CSS
.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;
}
Section 2: Testimonial (min-h-screen, centered, py-24 md:py-32 px-8 md:px-28)
Quote symbol image (w-14 h-10 object-contain)
Testimonial text (text-4xl md:text-5xl font-medium leading-[1.2], wrapped in flex flex-wrap): "Neuralyn revolutionized how we handle financial insights using smart analytics. We are now driving better outcomes quicker than we ever imagined! Neuralyn revolutionized how we handle financial insights using smart analytics."
Scroll-driven word reveal: Each word is a <motion.span> with mr-[0.3em]. Uses useScroll({ target: containerRef, offset: ["start end", "end center"] }). Each word maps to a sequential range [i/total, (i+1)/total] → opacity: [0.2, 1] and color: ["hsl(0 0% 35%)", "hsl(0 0% 100%)"].
Closing " quotation mark in text-muted-foreground ml-2
Author row (flex items-center gap-4): Avatar image (w-14 h-14 rounded-full border-[3px] border-foreground object-cover) + name "Brooklyn Simmons" (text-base font-semibold leading-7 text-foreground) + role "Product Manager" (text-sm font-normal leading-5 text-muted-foreground)
Layout: max-w-3xl mx-auto, content left-aligned (items-start), gap-10 between elements
Assets needed:
logo.png — small logo icon
hero-dashboard.png — dashboard screenshot
quote-symbol.png — decorative quote mark
testimonial-avatar.png — circular headshotGenerated by MotionSites Export Tool
---
## New Era Automotive Hero / New Era Automotive Hero
**文件名**: `New_Era_Automotive_Hero.md`
**原始 Prompt 代码**:
```markdown
# New Era Automotive Hero
> **Category:** Automotive
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a full-screen automotive hero section for a car dealership/marketplace website. Use Google Fonts: Inter (400, 500, 600) and Bebas Neue.
Background:
Full-viewport-height section (min 600px, max 965px) with a dark (#010101) fallback background.
Looping, muted, autoplaying background video covering the entire section using object-cover. Use this video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260213_051817_c7d8ccc6-bfaa-417c-8474-e5cefeea26b4.mp4
Add a subtle top gradient overlay (260px tall, from black/30 to transparent) and a matching bottom gradient overlay (260px tall, from black/30 to transparent) for text readability.
Large decorative text:
Centered horizontally, positioned about 15% from the top. Display the words "NEW ERA" as very large, bold, all-caps decorative typography spanning about 75% of the width (max 1073px).
Fill the text with a vertical linear gradient: white at 83% opacity at the top, fading to white at 12% opacity at the bottom. This text should be behind the content but above the video.
Top navbar (pinned to top, full width, horizontal padding 80px on desktop):
Left: A small abstract pinwheel/spinner logo icon (28x28, white) next to the brand name "Logoipsum" in white, Inter font, ~24px. Hide the brand name on small screens.
Center: Navigation links — "Home", "Shop", "Blog", "About Us", "Contact Us" — in Inter, light gray (#EEEFF2), with -0.32px letter-spacing. Hidden on screens below lg breakpoint.
Right: A "Sign In" text link in white (#FBFBFD), and a white rounded (8px) "Cart" button (48px tall) with a small shopping cart icon (18x18, dark #272835) and "Cart" label in Inter medium, dark text (#272835). The button has a subtle box-shadow. Hide "Sign In" on small screens.
Bottom CTA area (pinned to bottom of the section, same horizontal padding):
Left side: A paragraph in Inter, white, ~20px/30px line-height, max-width 414px: "Choose from thousands of certified cars you can trust, transparently priced, because buying a car should feel exciting." Next to it, a white rounded (8px) "Shop Now" button (48px tall) with an arrow-right icon (18x18, dark), Inter medium text, dark text (#272835), with a light border (#EEEFF2) and subtle shadow. On small screens, stack the paragraph and button vertically.
Right side: A large tagline in Bebas Neue, white, 64px on desktop (48px–60px on smaller screens), line-height 1, max-width 466px: "Find the perfect car that fits our journey".
On large screens, the left and right sides sit in a single row aligned to the bottom. On smaller screens they stack vertically.
Make the entire section fully responsive. Use Tailwind CSS and React.Generated by MotionSites Export Tool
---
## New Era Bold Hero / New Era Bold Hero
**文件名**: `New_Era_Bold_Hero.md`
**原始 Prompt 代码**:
```markdown
# New Era Bold Hero
> **Category:** Agency
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a responsive, full-screen Hero section using React and Tailwind CSS with the following specifications:
1. Layout & Positioning:
Set the container to at least screen height (min-h-screen) with a dark blue fallback background (#21346e).
Align the main content to the top of the page (not centered), adding significant top padding (approx pt-32 on mobile, pt-48 on desktop).
Use a standard container with horizontal padding.
2. Background Video:
Implement a full-screen, absolute-positioned background video.
The video must be set to autoPlay, loop, muted, and playsInline.
Use object-cover to ensure it fills the screen without distortion.
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260206_044704_dd33cb15-c23f-4cfc-aa09-a0465d4dcb54.mp4
3. Typography (Main Headline):
Font Family: Rubik (sans-serif).
Style: Bold, Uppercase, White text.
Layout: Display the text on three separate lines:
Line 1: "NEW ERA"
Line 2: "OF DESIGN"
Line 3: "STARTS NOW"
Sizing: Large and responsive (text-6xl mobile, text-8xl tablet, text-[100px] desktop).
Spacing: Very tight line height (0.98) and negative letter spacing (-2px to -4px).
4. Custom CTA Button:
Place a button below the headline with a fixed size of 184px wide by 65px high.
Interaction: Add a hover effect that slightly scales up (scale-105) and an active press effect (scale-95).
Background: Instead of a standard CSS background, use an SVG element that fills the button container (absolute inset-0). Use a custom path for the shape filled with white.
Text: Centered label "GET STARTED".
Text Style: Rubik, Bold, Uppercase, 20px size, dark text color (#161a20).Generated by MotionSites Export Tool
---
## Nexora Automation / Nexora Automation
**文件名**: `Nexora_Automation.md`
**原始 Prompt 代码**:
```markdown
# Nexora Automation
> **Category:** SaaS
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a SaaS landing page hero section with the following exact specifications:
Page Layout
The entire page is h-screen flex flex-col bg-background overflow-hidden — the Navbar + Hero fill exactly 100vh with no scroll.
The page uses two Google Fonts imported via CSS: Instrument Serif (display/headings, including italic) and Inter (body text).
Fonts & Design Tokens (index.css)
Import fonts:
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap');
CSS variables (:root):
--background: 0 0% 100% (white)
--foreground: 210 14% 17% (dark charcoal)
--primary: 210 14% 17% / --primary-foreground: 0 0% 100%
--secondary: 0 0% 96% / --secondary-foreground: 0 0% 9%
--muted: 0 0% 96% / --muted-foreground: 184 5% 55%
--accent: 239 84% 67% (indigo/blue) / --accent-foreground: 0 0% 100%
--border: 0 0% 90%
--ring: 239 84% 67%
--radius: 0.5rem
--font-display: 'Instrument Serif', serif
--font-body: 'Inter', sans-serif
--shadow-dashboard: 0 25px 80px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06)
Tailwind config extends fontFamily with display and body mapped to the CSS vars. All colors use hsl(var(--token)) pattern.
Navbar
flex items-center justify-between px-6 md:px-12 lg:px-20 py-5 font-body
Left: Logo text ✦ Nexora — text-xl font-semibold tracking-tight text-foreground
Right (hidden on mobile): Nav links "Home", "Pricing", "About", "Contact" — text-sm text-muted-foreground hover:text-foreground with gap-8
CTA button: rounded-full px-5 text-sm font-medium using primary styling
Hero Section
Background Video: Fullscreen muted autoplay loop video, absolute inset-0 w-full h-full object-cover z-0
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_015952_e1deeb12-8fb7-4071-a42a-60779fc64ab6.mp4
All content wrapped in relative z-10 flex flex-col items-center w-full
1. Badge (top)
Framer Motion: fade up from y:10, duration 0.5s
inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-4 py-1.5 text-sm text-muted-foreground font-body
Text: "Now with GPT-5 support ✨"
mb-6
2. Headline
Framer Motion: fade up from y:16, duration 0.6s, delay 0.1s
text-center font-display text-5xl md:text-6xl lg:text-[5rem] leading-[0.95] tracking-tight text-foreground max-w-xl
Content: The Future of Smarter Automation — the word "Smarter" renders in Instrument Serif italic
3. Subheadline
Framer Motion: fade up from y:16, duration 0.6s, delay 0.2s
mt-4 text-center text-base md:text-lg text-muted-foreground max-w-[650px] leading-relaxed font-body
Text: "Automate your busywork with intelligent agents that learn, adapt, and execute—so your team can focus on what matters most."
4. CTA Buttons
Framer Motion: fade up from y:16, duration 0.6s, delay 0.3s
mt-5 flex items-center gap-3
Primary button: rounded-full px-6 py-5 text-sm font-medium font-body — text "Book a demo"
Play button: ghost variant, h-11 w-11 rounded-full border-0 bg-background shadow-[0_2px_12px_rgba(0,0,0,0.08)] hover:bg-background/80 with a Play icon (lucide) h-4 w-4 fill-foreground
5. Dashboard Preview (custom coded, NOT an image)
Framer Motion: fade up from y:30, duration 0.8s, delay 0.5s
Container: mt-8 w-full max-w-5xl
Frosted glass wrapper: rounded-2xl overflow-hidden p-3 md:p-4 with inline styles:
background: rgba(255, 255, 255, 0.4)
border: 1px solid rgba(255, 255, 255, 0.5)
boxShadow: var(--shadow-dashboard)
Dashboard internals (all coded in React, text-[11px], select-none pointer-events-none):
Top bar: Logo "N" in rounded box + "Nexora" + chevron | Search bar with ⌘K shortcut | "Move Money" + bell + avatar "JB"
Sidebar (w-40): Items — Home (active), Tasks (badge "10"), Transactions, Payments (chevron), Cards, Capital, Accounts (chevron). Section "Workflows": Trake rutes, Payments, Notifications, Settings
Main content (bg-secondary/30):
Greeting: "Welcome, Jane" — text-sm font-semibold
Action buttons row: Send (primary/accent), Request, Transfer, Deposit, Pay Bill, Create Invoice — rounded-full pill buttons text-[10px], + "Customize" text
Two equal-width cards (flex-1 basis-0) side by side:
Balance card: "Mercury Balance" with checkmark, amount $8,450,190.32 (cents in text-xs text-muted-foreground), stats (Last 30 Days, +$1.8M green, -$900K red), SVG area chart (h-20) with smooth cubic Bézier curve, linear gradient fill from accent at 15% opacity to transparent, stroke in accent color strokeWidth="1.5"
Accounts card: Header "Accounts" with + and ⋮ icons. Three rows (py-3, no dividers, text-xs, justify-between): Credit $98,125.50, Treasury $6,750,200.00, Operations $1,592,864.82
Transactions table: "Recent Transactions" heading, table with columns Date/Description/Amount/Status. 4 rows: AWS -$5,200 Pending (amber), Client Payment +$125,000 Completed (green), Payroll -$85,450 Completed, Office Supplies -$1,200 Completed
Dependencies
framer-motion for all animations
lucide-react for all icons
shadcn/ui Button component
Tailwind CSS with tailwindcss-animate plugin
Key Design Decisions
The dashboard overflows toward the bottom of the viewport and is clipped by overflow-hidden on the parent
No dark mode — light only
All colors use semantic Tailwind tokens, never raw color values in components
The SVG chart uses a hand-crafted cubic Bézier path, not a charting libraryGenerated by MotionSites Export Tool
---
## Nexus IT Solutions / Nexus IT Solutions
**文件名**: `Nexus_IT_Solutions.md`
**原始 Prompt 代码**:
```markdown
# Nexus IT Solutions
> **Category:** Hero Section
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a full-viewport (100vh) hero landing page using React, Tailwind CSS, and TypeScript. Load Google Fonts: Akshar (400–700) and Inter (400–700) via <link> in index.html.
Structure: The page is a single div with min-h-screen bg-background containing a h-screen flex flex-col relative overflow-hidden wrapper. Inside: Background video absolutely positioned behind everything, Content wrapper (relative z-10 flex flex-col flex-1) containing Navbar, Hero content (flex-1, vertically centered), Trusted By section.
Background Video: <video className="absolute inset-0 w-full h-full object-fill" src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_065810_0098b193-498c-4d26-9abd-5db8bf4fb479.mp4" autoPlay muted loop playsInline /> object-fill stretches to fill the full viewport — no cropping, no overlay.
Navbar: Container flex items-center justify-between px-8 py-5 max-w-7xl mx-auto w-full gap-12. Logo: <NEXUS> styled font-akshar text-xl font-medium tracking-wider text-foreground. Nav links: HOME, SOLUTIONS, OUR TEAM, NEWS — text-lg tracking-[0.05em] text-muted-foreground hover:text-foreground font-akshar gap-8. CTA: "GET IN TOUCH" border border-foreground/10 text-muted-foreground hover:bg-muted-foreground hover:text-background uppercase tracking-[0.05em] text-xl rounded-none font-akshar.
Hero Content: H1 "We drive companies beyond their biggest obstacles" text-4xl md:text-5xl lg:text-6xl font-normal leading-tight max-w-3xl letterSpacing -0.06em heading-gradient. Subheading: "Accelerating Growth through IT Strategy, Digital Innovation, and Custom-Built Technology Platforms" mt-6 text-muted-foreground text-lg md:text-xl max-w-xl font-akshar. CTA: NotchedButton "START YOUR JOURNEY" with corner decorations (8 spans, 10px long x 1px, inset 4px from edges).
Trusted By: "Trusted by leading innovators worldwide" uppercase tracking-[0.12em]. Brand names: FedEx, amazon, McKESSON, pitney bowes — text-lg md:text-2xl font-bold tracking-wide opacity-40.
CSS tokens: --background: 0 0% 100%; --foreground: 220 20% 20%; --primary: 212 72% 18%; --muted-foreground: 220 10% 50%; --heading-gradient-from: 212 72% 10%; --heading-gradient-to: 205 65% 48%. heading-gradient class uses linear-gradient with background-clip text.Generated by MotionSites Export Tool
---
## Nickel Payments / Nickel Payments
**文件名**: `Nickel_Payments.md`
**原始 Prompt 代码**:
```markdown
# Nickel Payments
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a landing page hero section with a floating navbar. Use React, Tailwind CSS, and shadcn/ui.
Design System (index.css):
Background: 249 18% 95% (warm off-white)
Foreground: 240 10% 10% (near-black)
Primary: 24 90% 55% (warm orange)
Primary foreground: 0 0% 100% (white)
Secondary: 0 0% 100% (white)
Secondary foreground: 240 10% 10%
Muted foreground: 240 5% 46%
Border: 240 10% 88%
Nav background: 0 0% 100% (white)
Font family: Inter, system-ui, sans-serif
Navbar:
Full-width outer wrapper with px-6 lg:px-8 pt-4
Inner <nav> is max-w-7xl mx-auto, white background (bg-nav), rounded-xl, shadow-sm
Inner padding: px-8 py-5, flex row, items centered, space-between
Logo (left): Link with text-2xl font-bold tracking-tight. Icon is a w-7 h-7 black circle (bg-foreground rounded-full) containing a w-3 h-3 white rounded square (bg-white rounded-sm). Text: "nickel"
Center links (hidden on mobile, md:flex gap-6): "Products" and "Company" are buttons with a ChevronDown icon (h-3.5 w-3.5). "Pricing" and "For Accountants" are plain links. All use text-base font-medium text-foreground/80 hover:text-foreground transition-colors
Right side: "Log in" link (same style as nav links, hidden on sm down). "Get started" button using a hero variant with default size
Hero Button Variants (in button.tsx):
hero: bg-gradient-to-b from-[hsl(24,100%,72%)] to-[hsl(18,98%,53%)] text-primary-foreground hover:opacity-90 rounded-lg text-lg font-medium
hero-outline: bg-secondary text-secondary-foreground hover:bg-muted rounded-lg text-lg font-medium
Size xl: h-14 px-10 py-4
Hero Section:
<section> with bg-background min-h-[calc(100vh-4rem)] relative overflow-hidden
Content container: max-w-7xl mx-auto px-6 lg:px-8 min-h-[calc(100vh-4rem)] flex items-center w-full relative z-10
Text block: max-w-xl
H1: text-5xl sm:text-6xl lg:text-7xl font-medium tracking-tight text-foreground leading-[1.05] — "Unlock growth with every payment"
Paragraph: mt-6 text-lg sm:text-xl text-muted-foreground max-w-xl leading-relaxed — "Run payments, extend net terms and automate collections compliance."
Buttons row: mt-10 flex flex-wrap gap-4 — "Get started" (variant="hero" size="xl") and "Talk to a human" (variant="hero-outline" size="xl")
Video (right side): Absolutely positioned absolute top-0 right-0 w-[55%] h-full hidden lg:block. Video element: w-full h-full object-cover rounded-bl-2xl, autoPlay, loop, muted, playsInline. Source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_192508_4eecde4c-f835-4f4b-b255-eafd1156da99.mp4
Page layout: min-h-screen bg-background, renders <Navbar /> then <HeroSection />Generated by MotionSites Export Tool
---
## Orbis NFT / Orbis NFT
**文件名**: `Orbis_NFT.md`
**原始 Prompt 代码**:
```markdown
# Orbis NFT
> **Category:** Landing Page
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create an NFT landing page called "Orbis.Nft" with 4 sections, using a dark space theme. The page uses video backgrounds served from CloudFront, a liquid glass UI effect, and a specific color/font system. Recreate it exactly as described below.
FONTS (Google Fonts)
Anton - Used for all headings and navigation text (aliased as font-grotesk in Tailwind)
Condiment - A cursive script used for accent/overlay text (aliased as font-condiment in Tailwind)
System monospace font (font-mono) - Used for body/description paragraphs
Load via Google Fonts in index.html:
https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap
COLOR SYSTEM (Tailwind config)
Background: #010828 (deep dark navy blue)
cream: #EFF4FF (off-white, used for all text)
neon: #6FFF00 (bright green, used for accent cursive text and underline bars)
LIQUID GLASS CSS EFFECT
Applied via a .liquid-glass class. This is used on the navbar, social icon buttons, NFT cards, and card overlays:
.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;
}
TEXTURE OVERLAY
A full-screen fixed texture overlay sits on top of everything (z-50, pointer-events-none). It uses a /texture.png image with mix-blend-mode: lighten at opacity: 0.6, covering the entire viewport with background-size: cover.
SECTION 1: HERO (Full viewport)
Background: Full-bleed looping muted autoplaying video covering the entire section with object-cover
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_045634_e1c98c76-1265-4f5c-882a-4276f2080894.mp4
Container: max-w-[1831px] centered with responsive horizontal padding
Section has rounded-b-[32px] bottom corners, clipping the video
Header:
Left: "Orbis.Nft" logo text in Anton, 16px, uppercase
Center: Navigation bar with liquid-glass effect, rounded-[28px], px-[52px] py-[24px]. Contains 5 links: Homepage, Gallery, Buy NFT, FAQ, Contact. Each link is Anton 13px uppercase. Links have hover:text-neon transition. Nav is hidden on mobile (hidden lg:block).
Hero Content:
Large heading in Anton font, responsive sizing: 40px mobile / 60px sm / 75px md / 90px lg. Uppercase. leading-[1.05] mobile, leading-[1] tablet+. Max width 780px on desktop, offset with lg:ml-32.
Text reads:
Beyond earth
and ( its ) familiar boundaries
Overlaid cursive accent text "Nft collection" in Condiment font (24px-48px responsive), positioned absolute to the right side of the heading, slightly rotated (-rotate-1), in neon green (text-neon), with mix-blend-exclusion and opacity-90.
Social Icons (Desktop):
3 square buttons (56x56px) stacked vertically in top-right corner, each with liquid-glass and rounded-[1rem]. Icons: Mail, Twitter, Github from lucide-react (20x20px). hover:bg-white/10 transition.
Social Icons (Mobile):
Same 3 buttons but centered horizontally below the heading, shown only below lg breakpoint.
SECTION 2: ABOUT / INTRO (Full viewport)
Background: Full-bleed looping muted autoplaying video with object-cover
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4
Container: Same max-w-[1831px] centered, with generous vertical padding (64px-96px responsive)
Top Row (flex row on desktop, column on mobile):
Left: Heading in Anton, responsive 32px-60px, uppercase:
Hello!
I'm orbis
With an overlaid "Orbis" in Condiment cursive, neon green, mix-blend-exclusion, 36px-68px responsive, positioned absolute at bottom-right of heading, slightly rotated.
Right: Short paragraph in monospace 14px-16px, uppercase, cream color, max-width 266px: "A digital object fixed beyond time and place. An exploration of distance, form, and silence in space"
Bottom Row (flex row, space-between):
Two columns (left and right), each containing 2 identical paragraphs. Same monospace text as above but at opacity-10 (nearly invisible, decorative). Right column hidden below lg. On mobile, text uses text-[#010828] (dark) so it's effectively invisible against the video.
SECTION 3: NFT COLLECTION GRID
Background: Solid #010828 (no video)
Container: Same max-w-[1831px] centered
Header Row:
Left: Heading in Anton, 32px-60px responsive, uppercase:
Collection of
[indented] Space objects
Where "Space" is in Condiment cursive neon green, and "objects" is in Anton. The second line is indented with ml-12 / ml-24 / ml-32 responsive.
Right: A "SEE ALL CREATORS" button. "SEE" is large (32px-60px), "ALL" and "CREATORS" are stacked smaller (20px-36px) next to it. Below the text is a neon green bar (bg-neon, height 6px-10px responsive, full width of button).
NFT Card Grid:
3-column grid on desktop (lg:grid-cols-3), 2 on tablet, 1 on mobile. Gap 24px.
Each card: liquid-glass container with rounded-[32px], padding 18px, hover:bg-white/10 transition.
Inside each card: a square video container (pb-[100%] aspect ratio trick) with rounded-[24px] overflow hidden.
Video URLs:
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_053923_22c0a6a5-313c-474c-85ff-3b50d25e944a.mp4 (Score: 8.7/10)
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_054411_511c1b7a-fb2f-42ef-bf6c-32c0b1a06e79.mp4 (Score: 9/10)
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055427_ac7035b5-9f3b-4289-86fc-941b2432317d.mp4 (Score: 8.2/10)
Each card has an overlay bar at the bottom: a liquid-glass bar with rounded-[20px], px-5 py-4, showing "RARITY SCORE:" label (11px, cream/70% opacity) and score value (16px). On the right side of the bar is a circular purple gradient button (48x48px, bg-gradient-to-br from-[#b724ff] to-[#7c3aed]) with a right-arrow chevron SVG inside, with shadow-lg shadow-purple-500/50 and hover:scale-110 transition.
SECTION 4: CTA / FINAL SECTION
Background: Full-width video (NOT object-cover, instead w-full h-auto block so it displays at native aspect ratio)
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055729_72d66327-b59e-4ae9-bb70-de6ccb5ecdb0.mp4
Text Content (positioned absolute over the video):
Right-aligned block, offset with lg:pr-[20%] lg:pl-[15%]
Small "Go beyond" text in Condiment cursive, neon green, mix-blend-exclusion, positioned absolute at top-left of the heading block. Sizes: 17px-68px responsive.
Heading in Anton, responsive 16px-60px, uppercase:
JOIN US.
REVEAL WHAT'S HIDDEN.
DEFINE WHAT'S NEXT.
FOLLOW THE SIGNAL.
"JOIN US." has extra bottom margin (mb-4 to mb-12 responsive) before the remaining lines.
Social Icons (Bottom-left, absolute positioned):
Positioned at left-[8%], bottom-[12%] to bottom-[20%] with responsive breakpoints.
A vertical liquid-glass container with rounded-[0.5rem] to rounded-[1.25rem] responsive, containing 3 stacked icon buttons (Mail, Twitter, Github).
Buttons have responsive widths using viewport units and rem values (e.g., w-[14vw] sm:w-[14.375rem] md:w-[10.78125rem] lg:w-[16.77rem]) and similar responsive heights.
Buttons are separated by border-b border-white/10 dividers (except the last one).
KEY TECHNICAL DETAILS
Framework: React + TypeScript + Vite + Tailwind CSS
Icons: lucide-react (Mail, Twitter, Github)
No additional packages needed beyond what Vite + React + Tailwind provides
All videos: autoPlay loop muted playsInline attributes
Responsive: Mobile-first with sm:, md:, lg: breakpoints throughout
Max content width: 1831px across all sections
All text is uppercase except the Condiment cursive accents which are normal-caseGenerated by MotionSites Export Tool
---
## Orbit Engineers / Orbit Engineers
**文件名**: `Orbit_Engineers.md`
**原始 Prompt 代码**:
```markdown
# Orbit Engineers
> **Category:** Agency
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a single-page landing page for a fictional space engineering consultancy called "WE ARE ORBIT ENGINEERS". The page has 3 full-screen hero sections that the user navigates between using buttons (not scroll). Use React + Tailwind CSS + framer-motion + lucide-react icons (ChevronDown, ArrowRight).
Font & Color System
Font: Inter (Google Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap), set as font-sans in Tailwind config.
Color scheme (HSL in CSS variables):
--background: 210 33% 19% (dark blue-gray)
--foreground: 0 0% 100% (white)
--primary: 199 89% 60% (cyan accent)
--accent: 199 89% 60% (same cyan)
All text is white (text-foreground). Background is irrelevant since videos cover the full viewport.
Background Videos
Three elements are fixed, full-screen, layered behind content at -z-10. Each is autoPlay loop muted playsInline with object-cover. They crossfade using transition-opacity duration-700 — the active section's video is opacity-100, others are opacity-0.
Section 0: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_190803_f5595254-156c-4d10-ad09-51a56eb4bc1e.mp4
Section 1: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_204728_2dbcd1c4-63bc-4779-b06c-b7e2d5788ea7.mp4
Section 2: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_210050_14d4d9cf-782b-4f6f-9764-08d793cf427c.mp4
Navigation Bar (always visible, z-20)
Left: Small logo icon (8x8) + bold text stack: WE ARE / ORBIT / ENGINEERS (text-xl, font-bold, tracking-tight, line-height none, stacked with line breaks)
Center (hidden on mobile, hidden md:flex): Three links — Industries, Projects, Insights — uppercase, tracking-widest, text-sm, font-medium
Right: Geographic coordinates in monospace font: 51.50732 N / -0.12765 W (text-xs, tracking-widest, uppercase, font-mono, text-right, stacked with line breaks)
Horizontal padding: px-10, top padding: pt-8
Section Transitions (framer-motion AnimatePresence mode="wait")
All sections use cinematic framer-motion transitions:
Section 0 enter: opacity: 0 → 1, scale: 1.05 → 1, blur: 10px → 0px (duration 0.8s, ease [0.22, 1, 0.36, 1])
Section 0 exit: opacity → 0, scale → 0.92, blur → 12px, y → -60
Section 1 & 2 enter: opacity: 0 → 1, y: 80 → 0, scale: 1.08 → 1, blur: 14px → 0px (duration 0.9s)
Section 1 & 2 exit: opacity → 0, y → -80, scale → 0.95, blur → 10px
Section 0 — Hero Landing
Layout: Flex column, centered content
Decorative elements: Two vertical line images positioned absolutely on left and right edges (left-10, right-10), spanning nearly full height (h-[calc(100%-3rem)])
Headline: "Unlock Tactical / Excellence through Space / Engineering" — text-2xl sm:text-3xl md:text-4xl lg:text-5xl, font-normal, letter-spacing: -3px, centered, max-w-4xl, line breaks
Bottom bar: Left side has a "Scroll to explore" button with bouncing ChevronDown icon (navigates to section 1). Right side has a small logo icon at 60% opacity.
Section 1 — Mission Statement
Layout: Responsive — stacked vertically on mobile (flex-col items-center gap-10), horizontal row on desktop (md:flex-row md:items-center md:gap-16 md:justify-between)
Left: Large heading "Spatial Vision / at Your Command" — text-4xl sm:text-5xl md:text-5xl lg:text-6xl, font-light, letter-spacing: -2px, leading-[0.95]. Animates in from x: -60 with 0.3s delay.
Center: CTA button — "Begin Your Mission" with ArrowRight icon. White background, dark text (bg-foreground text-background), rounded-full, px-8 py-4, tracking 0.25em, uppercase. Hover scales to 105%. Animates in from y: 30 with 0.4s delay.
Right: A "Why We Are" label (text-xs, tracking 0.3em, uppercase) alongside 4 vertically stacked dots (first filled, rest outline — small 5w images). Animates in from x: 60 with 0.45s delay.
Bottom bar: Three elements — "Back to top" button (left, with rotated ChevronDown), centered tagline "Orbital Solutions is a key strategic / consulting firm in space engineering" (text-xs, tracking 0.25em, uppercase, animates from y: 30), and "Next" button (right, with bouncing ChevronDown).
Section 2 — Service Detail
Layout: Centered content with decorative vertical lines on left/right (same as section 0 but h-[calc(100%-1rem)])
Content stack (centered, gap-6):
Section number "01" — text-sm, tracking 0.3em, uppercase, 60% opacity foreground, font-mono. Animates from y: 20, delay 0.3s.
Heading "Operational Feasibility / Evaluation" — text-3xl sm:text-4xl md:text-5xl lg:text-6xl, font-light, letter-spacing: -2px, leading-[1.05]. Animates from y: 40, delay 0.4s.
Description paragraph — "We analyze engineering proposals against / strategic benchmarks to uncover growth paths / and highlight untapped market potential." — text-sm, tracking 0.15em, 70% opacity foreground, max-w-md, font-mono, leading-relaxed. Animates from y: 30, delay 0.55s.
Bottom bar: "Back" button (left), CTA button "Reach Out" with + symbol (center, same style as section 1 CTA), empty spacer div on right (w-20).
Key Design Patterns
All navigation between sections uses useState(0) with handleNext (min +1, max 2) and handlePrev (max -1, min 0)
The entire page is min-h-screen with overflow-hidden
All interactive elements use cursor-pointer
Navigation text uses tracking-widest uppercase consistently
Headlines use negative letter-spacing for a tight, architectural feel
Technical/data text uses font-mono
Buttons and links use hover:text-foreground/80 or hover:scale-105 transitionsGenerated by MotionSites Export Tool
---
## Orbit Web3 / Orbit Web3
**文件名**: `Orbit_Web3.md`
**原始 Prompt 代码**:
```markdown
# Orbit Web3
> **Category:** Web3
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a dark, cinematic hero landing page with these exact specifications:
Font: Google Font Instrument Serif (serif), loaded via <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap">. Used as the base font for the entire page (font-family: 'Instrument Serif', serif).
Color palette (HSL, CSS variables):
--background: 150 20% 5% (deep dark green-black)
--foreground: 45 30% 90% (warm off-white)
--accent: 45 70% 75% (warm amber/gold for button)
--accent-foreground: 150 20% 5% (dark text on accent)
Background video: Full-screen, absolutely positioned behind all content. Muted, autoplay, loop, playsInline.
URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_094440_a3592600-bd1e-49e5-9bce-a73662061d83.mp4
object-cover, fills entire viewport.
Navbar: Horizontal, top-left. Contains an SVG "W" logo (stroke-based zigzag path: M8 10L14 30L20 16L26 30L32 10, strokeWidth 3, rounded caps/joins, 40x40). Nav links: "Vault", "Send", "Receive", "Trade" — text-base tracking-wide, foreground color, hover to 80% opacity. Padding: px-8 py-6 md:px-16, gap-8 between logo and links, gap-6 between links.
Hero heading: Vertically centered in viewport (flex-1 flex flex-col justify-between, content wrapper with my-auto). Max-width max-w-3xl. Font sizes: text-6xl md:text-8xl lg:text-[7rem], leading-[0.95] tracking-tight, white text (text-foreground). Copy:
Own the future of
your assets.
The word "assets." has a neon glow effect: two absolutely-positioned duplicate <span>s layered on top, both white (hsl(0 0% 100%)), with gradient masks (linear-gradient(to bottom left, white 20%/25%, transparent 50%/55%)) creating a directional top-right glow. First span: blur-sm, second: blur-md opacity-60. The parent span has overflow-visible to allow glow to bleed out. The outer heading container and page root also use overflow-visible. Bottom margin on heading: mb-12.
CTA Button (GlowButton): px-10 py-4 rounded-[43px], background accent, text accent-foreground, text-xl. Box shadow: 0px 4px 95px 4px hsl(45 70% 50% / 0.6) (large amber glow). Contains an internal blurred blob: a w-48 h-10 rounded-full span, blur-xl, color hsl(45 60% 95%), positioned at top: -12px, centered horizontally, clipped by overflow-hidden on the button. Hover: scale-105 transition. Text: "Launch your orbit".
Logo marquee: Pinned to bottom of hero (mt-auto). Width: full on mobile, md:w-1/2 lg:w-1/2. Label: "Trusted by top builders" — text-foreground/50 text-base mb-5 text-left. Five logos using Lucide icons (Sun, Box, Star, Feather, Sparkles) with names: Nebulon, Prismify, Nova Labs, Zephyr, Ignite. Each: flex items-center gap-3 mx-6, icon w-6 h-6 text-foreground/60, name text-foreground/60 text-2xl tracking-wide whitespace-nowrap. Infinite horizontal scroll via CSS @keyframes marquee { 0% { translateX(0) } 100% { translateX(-50%) } }, animation: marquee 20s linear infinite. Logos rendered twice for seamless loop.
Layout structure: Root div min-h-screen bg-background flex flex-col relative overflow-visible. Video is z-0. Content wrapper is relative z-10 flex flex-col min-h-screen. Main area: flex-1 flex flex-col justify-between px-8 md:px-16 pb-10.Generated by MotionSites Export Tool
---
## Planet Orbit / Planet Orbit
**文件名**: `Planet_Orbit.md`
**原始 Prompt 代码**:
```markdown
# Planet Orbit
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a dark SaaS landing page hero section with the following exact specifications:
Font: Geist Sans (400, 500, 600, 700 weights) via @fontsource/geist-sans
Color System (HSL):
Background: 260 87% 3% (near-black with slight purple)
Foreground: 40 6% 95% (warm off-white)
Primary/Accent: 121 95% 76% (#87FB89 green)
Primary foreground: 0 0% 5% (dark text on green buttons)
Hero heading: 40 10% 96%
Hero sub: 40 6% 82%
Secondary/Muted: 240 4% 16%
Border: 240 4% 20%
Background Video: Full-screen background video covering the entire section (navbar through social proof). URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260309_042944_4a2205b7-b061-490a-852b-92d9e9955ce9.mp4 Set to autoPlay, loop, muted, playsInline with object-cover and absolute inset-0.
Liquid Glass Effect (reusable utility class .liquid-glass):
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
overflow: hidden;
Plus a ::before pseudo-element with a vertical gradient border using mask-composite:
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;
Layout (top to bottom, all centered over the video):
Navbar — Centered liquid-glass pill (rounded-3xl, max-w-[850px]) containing:
Logo: Small rounded-lg gradient square with a crosshair SVG icon + "APEX" text (xl, semibold)
Nav items: "Features" (with chevron-down), "Solutions", "Plans", "Learning" (with chevron-down) — text-base, foreground/90 opacity
CTA button: "Sign Up" — green primary, rounded-xl, small size
Announcement Badge — liquid-glass rounded-full pill: "Nova+ Launched!" text + "Explore" chip with ChevronRight icon, nested pill with bg-white/5
Heading — text-4xl sm:text-6xl lg:text-7xl, font-semibold, tracking-tight, leading-[1.05], max-w-5xl:
Accelerate Your
Revenue Growth Now
Subheading — text-lg, max-w-md, opacity-80, hero-sub color: "Drive your funnel forward with clever workflows, analytics, and seamless lead management."
Two CTA Buttons side by side:
"Start Free Right Now" — green primary, rounded-full, px-6 py-3
"Schedule a Consult" — liquid-glass, rounded-full, px-6 py-3, hover:bg-white/5
Social Proof Marquee at the bottom — "Relied on by brands across the globe" label (foreground/50, text-sm) on the left, then a horizontally scrolling marquee of brand names: Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn. Each has a small liquid-glass rounded-lg icon square with the first letter + the brand name (text-base, font-semibold). Duplicated array for seamless loop. Animation: translateX(0%) → translateX(-50%) over 20s linear infinite.
Button Variants (class-variance-authority):
hero: bg-primary text-primary-foreground rounded-full px-6 py-3 text-base font-medium hover:bg-primary/90
heroSecondary: liquid-glass text-foreground rounded-full px-6 py-3 text-base font-normal hover:bg-white/5Generated by MotionSites Export Tool
---
## Portfolio Cosmic / Portfolio Cosmic
**文件名**: `Portfolio_Cosmic.md`
**原始 Prompt 代码**:
```markdown
# Portfolio Cosmic
> **Category:** Portfolio
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
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) and Instrument Serif (italic, 400).
- --font-body: 'Inter', sans-serif → Tailwind font-body
- --font-display: 'Instrument Serif', serif → Tailwind font-display
### CSS Custom Properties (HSL, no hsl() wrapper — Tailwind adds it)
--bg: 0 0% 4%;
--surface: 0 0% 8%;
--text: 0 0% 96%;
--muted: 0 0% 53%;
--stroke: 0 0% 12%;
--accent: 0 0% 96%;
### Tailwind Custom Colors
bg: "hsl(var(--bg))",
surface: "hsl(var(--surface))",
"text-primary": "hsl(var(--text))",
muted: "hsl(var(--muted))",
stroke: "hsl(var(--stroke))",
### Accent Gradient
linear-gradient(90deg, #89AACC 0%, #4E85BF 100%) — used on logo ring, hover borders, progress bars. CSS utility class .accent-gradient.
### Custom Animations (in index.css)
- @keyframes scroll-down — translateY(-100%) → translateY(200%), 1.5s ease-in-out infinite
- @keyframes role-fade-in — opacity 0 + translateY(8px) → opacity 1 + translateY(0), 0.4s ease-out
- @keyframes gradient-shift — background-position 0% 50% → 100% 50% → 0% 50%, 6s ease infinite (for animated gradient borders)
### Forced dark theme — no light mode toggle. body gets bg-bg text-text-primary.
---
## Page Structure (Index.tsx)
{isLoading && <LoadingScreen onComplete={() => setIsLoading(false)} />}
---
## Section 1: Loading Screen
Full-screen overlay (fixed inset-0 z-[9999] bg-bg). Uses requestAnimationFrame counter from 000→100 over 2700ms.
- Top-left: "Portfolio" label — text-xs text-muted uppercase tracking-[0.3em]. Animates y:-20→0, opacity 0→1.
- Center: Rotating words ["Design", "Create", "Inspire"] cycling every 900ms. AnimatePresence mode="wait" with y:20→0→-20 transitions. text-4xl md:text-6xl lg:text-7xl font-display italic text-text-primary/80.
- Bottom-right: Counter display — text-6xl md:text-8xl lg:text-9xl font-display text-text-primary tabular-nums. Shows String(count).padStart(3, "0").
- Bottom progress bar: h-[3px] bg-stroke/50, inner div with .accent-gradient, scaleX(count/100) transform, box-shadow: 0 0 8px rgba(137, 170, 204, 0.35).
- On complete (count reaches 100): 400ms delay then calls onComplete.
---
## Section 2: Hero
Full-viewport section with background HLS video and centered content.
### Background Video
- HLS source: https://stream.mux.com/Aa02T7oM1wH5Mk5EEVDYhbZ1ChcdhRsS2m1NYyx4Ua1g.m3u8
- Uses hls.js — if Hls.isSupported(), create HLS instance; else if native HLS support, set video.src directly.
- Video: autoPlay muted loop playsInline, absolutely positioned and centered with min-w-full min-h-full object-cover -translate-x-1/2 -translate-y-1/2.
- Dark overlay: bg-black/20
- Bottom fade: h-48 bg-gradient-to-t from-bg to-transparent
### Navbar (fixed, floats at top center)
fixed top-0 left-0 right-0 z-50 flex justify-center pt-4 md:pt-6 px-4.
Inner pill: inline-flex items-center rounded-full backdrop-blur-md border border-white/10 bg-surface px-2 py-2. Gets shadow-md shadow-black/10 when scrollY > 100.
Contents (left to right):
1. Logo: 9×9 circle with accent gradient border (reverses direction on hover). Inner bg-bg circle with "JA" in font-display italic text-[13px]. Scales 110% on hover.
2. Divider: w-px h-5 bg-stroke mx-1 (hidden on mobile)
3. Nav links: ["Home", "Work", "Resume"] — text-xs sm:text-sm rounded-full px-3 sm:px-4 py-1.5 sm:py-2. Active: text-text-primary bg-stroke/50. Inactive: text-muted hover:text-text-primary hover:bg-stroke/50.
4. Divider
5. "Say hi" button: Same size as nav links. On hover, shows accent gradient border behind (using absolute span with inset: -2px). Inner content wrapped in bg-surface rounded-full backdrop-blur-md. Includes "↗" arrow.
### Hero Content (centered, z-10)
- Eyebrow: text-xs text-muted uppercase tracking-[0.3em] mb-8 — "COLLECTION '26". Class blur-in.
- Name: text-6xl md:text-8xl lg:text-9xl font-display italic leading-[0.9] tracking-tight text-text-primary mb-6 — "Michael Smith". Class name-reveal.
- Role line: "A {role} lives in Chicago." — roles cycle every 2s through ["Creative", "Fullstack", "Founder", "Scholar"]. Role word uses font-display italic text-text-primary animate-role-fade-in inline-block with key={roleIndex} for re-triggering animation.
- Description: text-sm md:text-base text-muted max-w-md mb-12 — "Designing seamless digital interactions by focusing on the unique nuances which bring systems to life."
- CTA Buttons (inline-flex gap-4):
- "See Works": Solid button. Default: bg-text-primary text-bg. Hover: bg-bg text-text-primary with accent gradient border ring.
- "Reach out...": Outlined button. Default: border-2 border-stroke bg-bg text-text-primary. Hover: border-transparent with accent gradient border ring.
- Both: rounded-full text-sm px-7 py-3.5 hover:scale-105.
### GSAP Entrance
Timeline with ease: "power3.out":
- .name-reveal: opacity 0→1, y 50→0, duration 1.2s, delay 0.1s
- .blur-in: opacity 0→1, filter blur(10px)→blur(0px), y 20→0, duration 1s, stagger 0.1, delay 0.3s
### Scroll Indicator
Bottom-center, text-xs text-muted uppercase tracking-[0.2em] "SCROLL" label above a w-px h-10 bg-stroke line with animated highlight using .animate-scroll-down.
---
## Section 3: Selected Works
bg-bg py-12 md:py-16. Inner: max-w-[1200px] mx-auto px-6 md:px-10 lg:px-16.
### Header
Framer Motion whileInView — opacity 0→1, y 30→0, duration 1s, ease [0.25,0.1,0.25,1], viewport once margin "-100px".
- Eyebrow: w-8 h-px bg-stroke + "Selected Work" text-xs text-muted uppercase tracking-[0.3em]
- Heading: "Featured *projects*" — italic word in font-display italic
- Subtext: "A selection of projects I've worked on, from concept to launch."
- "View all work" button (desktop only, hidden md:inline-flex) — rounded-full with gradient hover border ring + right arrow
### Bento Grid
grid grid-cols-1 md:grid-cols-12 gap-5 md:gap-6. Column spans alternate: 7/5/5/7.
4 project cards with titles: Automotive Motion, Urban Architecture, Human Perspective, Brand Identity.
Each card: bg-surface border border-stroke rounded-3xl with aspect ratios. Contains:
- Background image with object-cover group-hover:scale-105
- Halftone overlay: radial-gradient(circle, #000 1px, transparent 1px) at 4×4px, opacity-20 mix-blend-multiply
- Hover: bg-bg/70 opacity-0→1 + backdrop-blur-lg
- Hover label: pill with animated gradient border, white bg, "View — *Title*" (title in font-display italic)
---
## Section 4: Journal
bg-bg py-16 md:py-24. Same header pattern (eyebrow + "Recent *thoughts*" + subtext + "View all" button).
4 journal entries displayed as horizontal pills (rounded-[40px] sm:rounded-full) with titles, images, read times, and dates.
Each entry: flex items-center gap-6 p-4 bg-surface/30 hover:bg-surface border border-stroke.
---
## Section 5: Explorations (Parallax Gallery)
min-h-[300vh] section for scroll-driven parallax.
### Layer 1: Pinned Center (z-10)
h-screen div pinned with GSAP ScrollTrigger.create({ pin: contentRef, pinSpacing: false }).
- Eyebrow: "Explorations"
- Heading: "Visual *playground*"
- Subtext + Dribbble button
### Layer 2: Parallax Columns (z-20, absolute)
grid grid-cols-2 gap-12 md:gap-40 inside max-w-[1400px].
6 items split into 2 columns with GSAP scroll-driven parallax movement.
Cards: aspect-square max-w-[320px], with rotation and lightbox on click.
---
## Section 6: Stats
bg-bg py-16 md:py-24. 3-column grid with stats: 20+ Years Experience, 95+ Projects Done, 200% Satisfied Clients.
---
## Section 7: Contact / Footer
bg-bg pt-16 md:pt-20 pb-8 md:pb-12 overflow-hidden.
### Background Video
Same HLS source as hero, but flipped vertically (scale-y-[-1]). Heavier overlay: bg-black/60.
### GSAP Marquee
"BUILDING THE FUTURE • " repeated 10×. GSAP xPercent: -50, duration 40, ease "none", repeat -1.
### CTA
Email button: mailto:[email protected] with gradient hover border ring.
### Footer Bar
Social links [Twitter, LinkedIn, Dribbble, GitHub] + Green pulsing dot + "Available for projects"
---
## Dependencies
gsap, framer-motion, hls.js, react-router-dom, tailwindcss-animate
Add smooth scroll nav and page transitions.Generated by MotionSites Export Tool
---
## Power AI / Power AI
**文件名**: `Power_AI.md`
**原始 Prompt 代码**:
```markdown
# Power AI
> **Category:** Hero Section
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a full-screen dark hero section with a looping background video, navbar, headline, subtitle, CTA button, and a logo marquee at the bottom. Here are the exact specifications:
Theme & Colors (index.css CSS variables):
Background: 260 87% 3% (deep dark blue-purple)
Foreground: 40 6% 95% (off-white)
Hero sub text: 40 6% 82%
Body font: Geist Sans (via @fontsource/geist-sans)
Headline font: General Sans (loaded from Fontshare: https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap)
Background Video (Index page wrapper):
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_065045_c44942da-53c6-4804-b734-f9e07fc22e08.mp4
Positioned absolute inset-0 w-full h-full object-cover behind all content
Starts with opacity: 0
Custom JS-controlled fade loop: 0.5s fade-in at start, 0.5s fade-out at end, using requestAnimationFrame. On ended, opacity resets to 0, waits 100ms, then replays from 0
No gradient overlays on the video
The wrapper div has overflow-hidden, the hero content sits in a relative z-10 div above
Blurred overlay shape (centered behind content):
w-[984px] h-[527px] opacity-90 bg-gray-950 blur-[82px]
Absolutely positioned at top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
pointer-events-none
The hero section has overflow-visible so the blur is not clipped
Navbar:
Full width, py-5 px-8, flex row with justify-between
Left: logo image (src/assets/logo.png, height 32px)
Center: nav items — "Features" (with ChevronDown), "Solutions", "Plans", "Learning" (with ChevronDown). Each is a button with text-foreground/90 and hover transition
Right: "Sign Up" button using heroSecondary variant, rounded-full px-4 py-2
Below navbar: a 1px divider line with gradient from-transparent via-foreground/20 to-transparent, offset mt-[3px]
Hero content (vertically centered in remaining space via flex-1):
Headline: "Power AI" at text-[220px], font-normal, leading-[1.02], tracking-[-0.024em], font-family General Sans
"Power " is plain text-foreground
"AI" uses bg-clip-text text-transparent with backgroundImage: linear-gradient(to left, #6366f1, #a855f7, #fcd34d) (indigo → purple → amber)
Subtitle: "The most powerful AI ever deployed / in talent acquisition" — text-hero-sub, text-lg, leading-8, max-w-md, mt-[9px], opacity-80
CTA: "Schedule a Consult" button, heroSecondary variant, px-[29px] py-[24px], mt-[25px]
Logo marquee (pinned to bottom of hero, pb-10):
Container: max-w-5xl mx-auto
Left side: static text "Relied on by brands / across the globe" in text-foreground/50 text-sm
Right side: infinite scrolling marquee with logos: Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn (duplicated for seamless loop)
Each logo: a liquid-glass 24x24 rounded-lg icon showing the first letter, plus the name in text-base font-semibold text-foreground
Marquee animation: translateX(0%) → translateX(-50%), 20s linear infinite
gap-16 between logos, gap-12 between text and marquee
Liquid glass utility class (in index.css):
.liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; 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; }
Section structure: min-h-screen flex flex-col — navbar at top, content centered via flex-1 flex items-center justify-center, marquee at bottom.Generated by MotionSites Export Tool
---
## Price Calculator / Price Calculator
**文件名**: `Price_Calculator.md`
**原始 Prompt 代码**:
```markdown
# Price Calculator
> **Category:** SaaS
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
_No video preview available for this prompt._
---
## 📋 Prompt
```text
Recreate Project Estimation Calculator Section
Create a full-width dark calculator section with id calculator-section. Background: bg-background, padding py-16 md:py-28 px-4 md:px-16, max-width max-w-7xl centered.
Header: Centered. Small mono uppercase tracking-widest label "Try project estimation calculator" in text-muted-foreground. Below it, an h2: "Get premium website within your budget" — text-3xl md:text-4xl lg:text-5xl font-normal.
Layout: 2-column grid (grid-cols-1 lg:grid-cols-2), rounded-2xl overflow-hidden, no gap.
LEFT COLUMN (Calculator Form): Background #0D0D0D, padding p-8 lg:p-12, sections divided by divide-y divide-[#1E1E1E].
4 sections separated by horizontal dividers:
Service Type (radio buttons): h3 "What kind of service do you need?" — 3 options: "Only Design" (design), "Only Development" (development), "Design + Development" (both, default). Custom radio circles: w-5 h-5 rounded-full border-2, active = border-[#FF5656] with inner w-2 h-2 rounded-full bg-[#FF5656].
Number of Pages (slider): h3 with current value in #FF5656. Shadcn <Slider> min=1, max=30, step=1, default=5. Labels "1" and "30" below.
Add-ons (checkboxes): Two checkboxes with price labels on the right in #FF5656:
"I will need help with content" → +$50/pages
"I want to optimize my website for SEO" → +$50/pages Custom checkboxes: w-5 h-5 border-2 rounded, checked = border-[#FF5656] bg-[#FF5656] with white SVG checkmark.
Timeline (radio buttons): h3 "How fast do you need this?" — 3 options with prices:
"Within 7 Days" → +$100/pages
"Within 14 Days" → +$25/pages
"Regular Speed (Based on discussion)" → no extra cost (default)
RIGHT COLUMN (Cost Estimation): Padding p-8 lg:p-12, border border-white/10 rounded-r-2xl, min-height 717.98px.
h3 "Estimated Cost" + description paragraph.
3 stacked cards (rounded-2xl p-6 space-y-3):
Agency card: bg-muted/50. Title "Typical Agency charges minimum". Large price text-4xl font-bold. Subtitle: "+ Too much extra time & additional cost".
Freelancer card: bg-muted/50. Title "Regular Freelancer charges minimum". Large price text-4xl font-bold. Subtitle: "+ Too much headache & back-and-forth".
Your price card: bg-gradient-to-r from-pink-500 to-orange-500 text-white. Title "With Webfluin Studio". Price text-5xl font-bold. Subtitle: "Save your money, time & headache".
PRICING LOGIC:
calculatePrice():
Base prices by service:
design: base=399, perPage=100
development: base=199, perPage=100
both: base=499, perPage=200
total = max(base, base + (pages - 1) * perPage)
if needContent: total += pages * 50
if needSEO: total += pages * 50
if rush: total += pages * 100
if fast: total += pages * 25
calculateAgencyCost():
perPage = (both ? 1000 : 400)
return 8000 + (pages - 1) * perPage
calculateFreelancerCost():
perPage = (both ? 500 : 200)
return 3000 + (pages - 1) * perPage
All prices displayed with .toLocaleString() and $ prefix.
State: serviceType (design|development|both, default both), pages (number, default 5), needContent (bool), needSEO (bool), timeline (regular|fast|rush, default regular).
Dependencies: Shadcn Slider component, useToast hook.Generated by MotionSites Export Tool
---
## Railroad AI / Railroad.ai
**文件名**: `Railroad.ai.md`
**原始 Prompt 代码**:
```markdown
# Railroad.ai
> **Category:** Hero Section
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a landing page hero section with the following exact specifications:
Background:
Full-screen background video covering the entire viewport with object-cover, autoplaying, looping, muted, inline playback, and preloaded
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260317_100335_dc625816-c3c1-4b00-b93e-4cb301cf5ea5.mp4
A subtle bg-black/5 overlay on top of the video
Fonts:
Import: https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap
However, the actual font-family used is the system font stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif for both heading and body
Color Tokens (HSL, in CSS variables):
--background: 213 45% 67%
--foreground: 0 0% 100% (white)
--heading: 205 52% 5% (near-black)
--description: 180 9% 33% (muted dark gray)
--primary: 0 0% 100% (white)
--primary-foreground: 0 0% 0% (black)
--radius: 9999px (fully rounded)
Navbar (fixed, top 30px):
Fixed position, top-[30px], full width, z-50, horizontal padding px-8 lg:px-16, flex row with space-between
Left: Logo text "Railroad.ai" in heading font, text-2xl, white, tight tracking
Center: A liquid-glass pill with rounded-full containing 4 nav links: "Home", "Voyages", "Worlds", "Innovation" — each text-sm font-medium text-foreground/90, hidden on mobile (hidden md:flex)
Right: "Get Started" button with ArrowUpRight icon, bg-primary text-primary-foreground rounded-full px-4 py-2 text-sm font-medium
Hero Content (centered, vertically):
Container: flex-1 flex flex-col items-center justify-center text-center px-4 pt-24 pb-[200px]
Badge: A liquid-glass rounded-full pill with bg-black/10, containing text "10K+ already subscribed" in text-sm text-foreground/90 px-3 font-body
Heading: "Focus in a Constantly Distracted World" — uses a custom BlurText component that splits text into words and animates each word individually with framer-motion: blur(10px) → blur(0px), opacity 0→1, y 50→0, duration 0.35s, staggered delay of 100ms per word. Styled as text-6xl md:text-7xl lg:text-[5.5rem] font-heading text-heading leading-[0.85] tracking-[-4px] max-w-3xl
Subheading: "Cut through the noise of notifications, endless feeds, and constant interruptions. Learn how to reclaim your attention and do meaningful work that truly matters." — framer-motion animation: blur(10px)→blur(0px), opacity 0→1, y 20→0, duration 0.6s, delay 0.8s. Styled as text-[calc(1rem+3px)] md:text-[calc(1.125rem+3px)] text-description max-w-2xl leading-tight tracking-[-0.05em]
Email Input: framer-motion animated (same blur/fade pattern, delay 1.1s). A liquid-glass rounded-full container with inline styles: backdropFilter: blur(100px), background: rgba(0,0,0,0.25), padding p-1.5 pl-6. Inside: a transparent <input> with placeholder "Enter your email" and a white rounded-full "Join Waitlist" button with ArrowUpRight icon (bg-primary text-primary-foreground rounded-full px-5 py-2.5 text-sm font-medium)
Liquid Glass CSS (critical):
.liquid-glass {
background: rgba(255,255,255,0.01);
background-blend-mode: luminosity;
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;
}
Tech Stack: React, Vite, TypeScript, Tailwind CSS, framer-motion, lucide-react (ArrowUpRight icon), shadcn/ui design tokens.Generated by MotionSites Export Tool
---
## SkyElite Private Jets / SkyElite Private Jets
**文件名**: `SkyElite_Private_Jets.md`
**原始 Prompt 代码**:
```markdown
# SkyElite Private Jets
> **Category:** Landing Page
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a premium private jet landing page hero section with the following specifications:
Video Background:
Use this exact CloudFront video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_091828_e240eb17-6edc-4129-ad9d-98678e3fd238.mp4
Video should autoplay, be muted, loop continuously, and include playsInline attribute
Video covers entire viewport (100vh) using object-cover
Navigation Bar:
Brand name "SkyElite" on the left (text-2xl, font-semibold, text-gray-900)
Desktop menu items (hidden on mobile, visible md:flex): Start, Story, Rates, Benefits, FAQ
Navigation links in gray-900 with hover:text-gray-700 transition
Mobile hamburger menu button using Lucide React icons (Menu/X)
Mobile menu appears as dropdown with white/95 opacity background, backdrop blur, rounded corners, shadow
Max width 7xl, centered with px-8 py-6
Hero Content (centered, -mt-80 to pull up):
Small uppercase label: "PRIVATE JETS" (text-sm, font-semibold, gray-600, tracking-wider, mb-4)
Large two-line heading with overlapping effect:
Line 1: "Premium." (text-6xl md:text-7xl lg:text-8xl, font-normal, text-gray-500, leading-none, tracking-tighter)
Line 2: "Accessible." (same size, color: #202A36, negative margin-top: -12px for overlap)
Subtitle: "Your dedication deserves recognition." (text-lg md:text-xl, gray-600, mb-6, max-w-2xl)
Two call-to-action buttons (gap-4, centered):
"Discover" button: px-4 py-2, rounded-full, bg-gray-300, text-gray-800, font-medium, hover:bg-gray-400
"Book Now" button: px-4 py-2, rounded-full, white text, bg-color #202A36, hover color #1a2229 with smooth transitions
Typography:
Use Inter font (import from Google Fonts: 400, 500, 600, 700 weights)
Apply to entire body via CSS
Technical Setup:
React with TypeScript
Tailwind CSS for styling
Lucide React for icons
useState hook for mobile menu toggle
Full screen height container (h-screen)
Responsive breakpoints: mobile-first, md, lg
All transitions use transition-colors class
Layout Structure:
Outer container: min-h-screen, bg-gray-50
Hero section: relative, h-screen, overflow-hidden
Content wrapper: relative, h-full, flex flex-col
Main content area: flex-1, flex items-center justify-center
Make it clean, modern, and premium-looking with smooth interactions.Generated by MotionSites Export Tool
---
## Space Voyage / Space Voyage
**文件名**: `Space_Voyage.md`
**原始 Prompt 代码**:
```markdown
# Space Voyage
> **Category:** Landing Page
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
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('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap');
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: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260306_115329_5e00c9c5-4d69-49b7-94c3-9c31c60bb644.mp4
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="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260306_115329_5e00c9c5-4d69-49b7-94c3-9c31c60bb644.mp4" 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.Generated by MotionSites Export Tool
---
## Stellar AI / Stellar AI
**文件名**: `Stellar_AI.md`
**原始 Prompt 代码**:
```markdown
# Stellar AI
> **Category:** Hero Section
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a "Stellar.ai" landing page hero section using React, Tailwind CSS, and Lucide React icons. Use the Inter font (imported from Google Fonts). The page has a white background (bg-white), max-width max-w-7xl, and is centered with mx-auto.
Font: Import Inter (weights 400, 500, 600, 700) from Google Fonts. Set font-family: 'Inter', sans-serif on the body.
Custom CSS animations (in index.css):
@keyframes fadeInUp -- from opacity: 0; transform: translateY(30px) to opacity: 1; transform: translateY(0). Class .animate-fade-in-up uses this with 0.6s ease-out forwards.
@keyframes fadeInOverlay -- from opacity: 0 to opacity: 1. Class .animate-fade-in-overlay uses this with 0.4s ease-out forwards.
@keyframes fadeInDialog -- from opacity: 0 to opacity: 1. Class .animate-slide-up-overlay uses this with 0.5s ease-out forwards and has transform: translate(-50%, -50%).
Every major section uses .animate-fade-in-up with staggered animationDelay inline styles (starting at 0.1s and incrementing by 0.1s). Each element starts with opacity: 0 inline so the animation fills it to visible.
Tailwind config: Default config with no custom theme extensions. Uses standard content paths.
NAVIGATION (animationDelay: 0.1s):
px-6 py-4 flex items-center justify-between max-w-7xl mx-auto
Left: Lucide Star icon (w-5 h-5, fill-black) + "Stellar.ai" text (text-lg font-semibold)
Center (hidden on mobile, hidden md:flex items-center gap-8): "Solutions" with ChevronDown, "For Teams" with ChevronDown, "About Us", "Learn Hub" -- all text-sm text-gray-700 hover:text-black
Right: "Login" link (text-sm text-gray-700) + "Get started free" button (bg-black text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-gray-800 transition-colors)
HERO SECTION (px-6 pt-24 pb-32 max-w-7xl mx-auto text-center):
Reviews Badge (delay: 0.2s): inline-flex items-center gap-2 mb-8. Contains a bordered square (w-6 h-6 border border-gray-300 rounded) with a filled Star icon inside, plus "4.9 rating from 18.3K+ users" (text-sm font-medium text-black).
Main Heading (delay: 0.3s): text-6xl md:text-7xl lg:text-[80px] font-normal leading-[1.1] tracking-tight mb-5. First line: "Work Smarter. Move Faster." Second line: "AI Powers You Up." with gradient text (bg-gradient-to-r from-black via-gray-500 to-gray-400 bg-clip-text text-transparent).
Subheading (delay: 0.4s): text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto. Text: "Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time."
CTA Button (delay: 0.5s): bg-black text-white px-8 py-3 rounded-full text-base font-medium hover:bg-gray-800 transition-colors mb-12. Text: "Begin Free Trial".
Tab Bar (delay: 0.6s): Centered bg-gray-100 rounded-lg p-1 container.
Mobile (md:hidden): 2x2 grid with 4 buttons: Analyse (BarChart3), Train (BookOpen), Testing (Users), Deploy (Rocket). Active: bg-white text-black shadow-sm. Inactive: text-gray-600.
Desktop (hidden md:flex): Same 4 buttons in row with vertical dividers (w-px h-5 bg-gray-300).
Tabs auto-cycle every 4s using setInterval. State: useState('analyse').
Video + Overlay Section (delay: 0.7s):
Container: relative rounded-3xl overflow-hidden h-[400px] md:h-[500px]
Video: src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_165750_358b1e72-c921-48b7-aaac-f200994f32fb.mp4", autoPlay, loop, muted, playsInline, w-full h-full object-cover.
4 Conditional Overlays per tab with animate-fade-in-overlay outer and animate-slide-up-overlay inner card:
a. Analyse: "Set Up Your AI Workspace" wizard with purple progress bar at 25%, 4 steps
b. Train: "AI Model Training" with orange progress at 67%, 4 metrics
c. Testing: "Test Suite Results" with green success, 127/127 tests
d. Deploy: "Deploy to Production" with 4 checklist items, Deploy Now button
Company Logos (delay: 0.8s): mt-24 flex with INTERSCOPE, SPOTIFY, Nexera (dot grid), M3 (serif italic), LAURA COLE (LC circle), vertex (dots)Generated by MotionSites Export Tool
---
## Synapse Dark Hero / Synapse Dark Hero
**文件名**: `Synapse_Dark_Hero.md`
**原始 Prompt 代码**:
```markdown
# Synapse Dark Hero
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a high-fidelity, dark-themed Hero Section using React, Tailwind CSS, and Framer Motion. The background should be solid black (#000000).
1. Structure & Layout:
Navbar: Fixed at the top with a blurred glass effect.
Logo: Text "Synapse" (font-medium, tracking-tight, white).
Links: Features (active state with gradient border), Insights, About, Case Studies (strikethrough style), Contact.
CTA: "Get Started for Free" (White/Gray gradient button).
Hero Content: Centered text container (z-10, relative).
Badges: Row of 3 glass-effect badges "Integrated with" + Icon.
Headline: "Where Innovation Meets Execution" (Large ~80px font, tight tracking, fade-in animation).
Subtext: 2-line description about testing and deployment.
Buttons:
"Get Started for Free" (Solid Black background, White border).
"Let's Get Connected" (Transparent glass style).
Logo Marquee: A static row of grayscale, 40% opacity logos (use placeholder SVGs) at the bottom.
2. Background Video (Crucial):
Source: https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8
Implementation: Create a memoized VideoPlayer component using hls.js to handle the .m3u8 stream. Ensure proper cleanup on unmount.
Styling: 100% Opacity (no dark overlays), playing in loop/muted/autoplay.
Positioning: The video container should have a height of 80vh and be positioned absolute bottom-[35vh], sitting effectively "floating" behind the text content but pushed up from the bottom edge.
3. Animations:
Use motion/react to apply staggered fade-in-up animations to the badges, headline, subtitle, and buttons on load.Generated by MotionSites Export Tool
---
## Sync AI / Sync AI
**文件名**: `Sync_AI.md`
**原始 Prompt 代码**:
```markdown
# Sync AI
> **Category:** Hero Section
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a full-viewport hero section for a SaaS landing page called "Stellar.ai" using React, TypeScript, Tailwind CSS, and Lucide React icons. The design uses the Inter font (weights 400, 500, 600, 700) imported from Google Fonts. No other dependencies beyond lucide-react, react, and react-dom.
OVERALL STRUCTURE
The page is a full-screen (h-screen) white background container with overflow-hidden. Everything is contained in a single viewport. There is no scrolling. The layout stacks vertically: navbar at top, hero content in upper-center, and a partner logo bar pinned to the bottom.
BACKGROUND VIDEO
A looping, muted, autoplaying, inline video fills the entire viewport as an absolute-positioned background
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260330_153826_e9005cf7-a1c7-4c7d-886f-fea22d644a9c.mp4
CSS: absolute inset-0 w-full h-full object-cover
The video has top padding to push it down below the hero text: pt-[120px] on mobile, md:pt-[200px] on desktop
This creates the effect where the video content appears below the text area
VIDEO FADE-OUT OVERLAYS (White gradient masks)
Three absolute-positioned gradient overlays sit on top of the video (z-10) to fade the video into the white background at the top:
General overlay: top: 120px, height: 200px, gradient from white to transparent
Desktop-only overlay (hidden on mobile, hidden md:block): top: 200px, height: 300px, gradient from white to transparent
Mobile-only overlay (md:hidden): top: 120px, height: 200px, gradient from white to transparent
All overlays use pointer-events-none so they don't block interaction.
NAVBAR (z-20, relative)
Max width max-w-7xl, centered, horizontal padding px-4 sm:px-6, vertical padding py-4
Flex row, items-center justify-between
Animated with animate-fade-in-up at animationDelay: 0.1s, initial opacity: 0
Left side (logo):
Lucide Star icon, w-5 h-5 fill-black
Text "Stellar.ai", text-lg font-semibold
Center nav (hidden on mobile, hidden md:flex, gap-8):
"Solutions" button with ChevronDown icon (w-4 h-4), text-sm text-gray-700 hover:text-black
"For Teams" button with ChevronDown icon, same styling
"About Us" button, text-sm text-gray-700 hover:text-black
"Learn Hub" button, same styling
Right side (hidden on mobile hidden sm:flex, gap-4):
"Login" text button, text-sm text-gray-700 hover:text-black
"Get started free" button: bg-black text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-gray-800 transition-colors
Mobile hamburger (sm:hidden):
Toggles between Menu and X icons from Lucide (w-6 h-6)
MOBILE MENU (conditionally rendered when open)
Positioned absolute top-[60px] left-0 right-0 z-30
Background: bg-white/95 backdrop-blur-md border-b border-gray-200
Animated with animate-fade-in-overlay
Contains same nav items as desktop, stacked vertically with px-6 py-4 gap-4
Login and "Get started free" buttons separated by a border-t border-gray-200 pt-4
The CTA button is full width in mobile menu
HERO CONTENT (z-20, relative)
Container: px-4 sm:px-6 pt-6 sm:pt-12 pb-16 sm:pb-32 max-w-7xl mx-auto text-center
Rating badge (animationDelay: 0.2s):
inline-flex items-center gap-2 mb-5 sm:mb-8
Small box: w-6 h-6 border border-gray-300 rounded flex items-center justify-center containing a filled Star icon (w-4 h-4 fill-black)
Text: "4.9 rating from 18.3K+ users", text-xs sm:text-sm font-medium text-black
Heading (animationDelay: 0.3s):
Font sizes: text-[38px] sm:text-6xl md:text-7xl lg:text-[80px]
font-normal leading-[1.1] tracking-tight mb-4 sm:mb-5
Mobile layout (sm:hidden): Three lines -- "Work Smarter." / "Move Faster." / "AI Powers You Up."
Desktop layout (hidden sm:inline): Two lines -- "Work Smarter. Move Faster." / "AI Powers You Up."
"AI Powers You Up." uses a gradient text effect: bg-gradient-to-r from-black via-gray-500 to-gray-400 bg-clip-text text-transparent
Subheading (animationDelay: 0.4s):
text-base sm:text-lg md:text-xl text-gray-600 mb-6 sm:mb-8 max-w-2xl mx-auto px-2
Text: "Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time."
CTA button (animationDelay: 0.5s):
bg-black text-white px-6 sm:px-8 py-3 rounded-full text-sm sm:text-base font-medium hover:bg-gray-800 transition-colors
Text: "Begin Free Trial"
BOTTOM PARTNER BAR (z-20, absolute bottom-0)
Container: absolute bottom-0 left-0 right-0 z-20 flex flex-col items-center gap-3 sm:gap-4 pb-4 sm:pb-8 px-4
Animated: animate-fade-in-up at animationDelay: 0.6s, initial opacity: 0
Glass pill badge:
rounded-full px-3 sm:px-3.5 py-1
text-[10px] sm:text-xs font-medium text-white
Frosted glass effect: backdrop-blur-md bg-white/15 border border-white/20
Text: "Collaborating with top aerospace pioneers globally"
Partner logos (text-based, no images):
Flex row: gap-5 sm:gap-12 md:gap-16 flex-wrap justify-center
Five names: "Aeon", "Vela", "Apex", "Orbit", "Zeno"
Each: text-lg sm:text-2xl md:text-3xl italic text-white tracking-tight with inline style fontFamily: 'Georgia, serif'
ANIMATIONS (defined in index.css)
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
@keyframes fadeInOverlay {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in-overlay { animation: fadeInOverlay 0.4s ease-out forwards; }
Each element uses staggered delays (0.1s through 0.6s) applied via inline style={{ animationDelay: 'X.Xs', opacity: 0 }}.
FONT
Google Fonts import: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
Applied globally: body { font-family: 'Inter', sans-serif; }
KEY DESIGN NOTES
The "liquid glass" effect comes from the frosted-glass partner badge using backdrop-blur-md bg-white/15 border border-white/20
The mobile menu also uses glass: bg-white/95 backdrop-blur-md
No purple/indigo colors -- entire palette is black, white, and grays
The heading gradient goes from pure black through gray-500 to gray-400
The video is visible primarily in the lower half, with white gradients dissolving it into the clean white upper section
Color palette: strictly monochromeGenerated by MotionSites Export Tool
---
## Targo Logistics Hero / Targo Logistics Hero
**文件名**: `Targo_Logistics_Hero.md`
**原始 Prompt 代码**:
```markdown
# Targo Logistics Hero
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Design Prompt: Targo Hero Section
Brand Identity: Create a high-end, dark-themed hero section for a logistics brand called "targo". Use a color palette of deep black (#000000), a vibrant brand red (#EE3F2C), and crisp white for primary text. The typography should use the Rubik font family, with headlines in bold, uppercase, and slightly tight letter-spacing (approx. -4%).
Layout & Positioning:
Header: A clean top navigation bar with a white SVG logo (abstract symbol + "targo" wordmark) on the left. Include "Home", "About", and "Contact Us" links, plus a small red "Contact Us" button with clipped corners on the right.
Main Hero: The headline "Swift and Simple Transport" and a "Get Started" button should be left-aligned and positioned in the upper-third of the section (aligned toward the top rather than centered).
Bottom Widget: A "Book a Free Consultation" card positioned at the bottom-left.
Key Design Elements:
Video Background: An auto-looping, muted background video using URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260227_042027_c4b2f2ea-1c7c-4d6e-9e3d-81a78063703f.mp4. Ensure it has 100% opacity with no dark overlay.
Clipped-Corner Buttons: All primary buttons must feature a custom geometric shape using CSS clip-path (a 10-12px diagonal cut on the top-right and bottom-left corners). Use the brand red for "Get Started" and solid white for "Book a Call".
Liquid Glass Effect: The consultation card must use advanced glassmorphism: backdrop-filter: blur(40px) saturate(180%), a 1px white border with 12% opacity, a subtle diagonal white-to-transparent shine gradient across the surface, and an inner box-shadow for depth.
Scaled Proportions: The layout should feel refined and compact. Headlines should be roughly 64px on desktop, and the overall spacing should avoid excessive padding to maintain a "scaled-down" professional look.
Technical Details:
Frameworks: React & Tailwind CSS.
Icons: Use the Phone icon from lucide-react inside the consultation button.
Responsiveness: Ensure the headline scales down to ~42px on mobile and the padding adjusts from 64px (desktop) to 32px (mobile).Generated by MotionSites Export Tool
---
## Taskly / Taskly
**文件名**: `Taskly.md`
**原始 Prompt 代码**:
```markdown
# Taskly
> **Category:** Hero Section
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
System Prompt: High-Fidelity "Liquid Glass" Hero Section
Core Layout: Create a 1600px max-width landing page hero section. The background should be pure white with a subtle, layered gradient glow in the top-left (using blurred ellipses in light blue #60B1FF and #319AFF). The design must be fully responsive, transitioning from a single-column mobile view to a dual-column desktop layout.
Typography:
Headlines & Brand: Use Fustat (Bold).
Body & UI: Use Inter (Normal/Medium).
Hero Headline: "Work smarter, achieve faster" (75px, 1.05 line-height, -2px tracking).
The "Strong Liquid Glass" Navbar:
Position: Sticky at top-[30px], centered, w-fit.
Visuals: backdrop-blur-[50px], background rgba(255,255,255,0.3), rounded-[16px].
Fidelity Details:
Outer Stroke: 1px solid rgba(0,0,0,0.1).
Inner Highlight Shadow: inset 0px 4px 4px 0px rgba(255,255,255,0.25).
Items: Logo "Taskly" (Fustat), Nav links (Home, Features, Company, Pricing), and a glassy "SignUp" button with an arrow icon.
The Glassy Orb (Hero Right):
Source URL: https://future.co/images/homepage/glassy-orb/orb-purple.webm
Blending Mode: Must use mix-blend-screen to filter the black background.
Scaling: scale-125 to make it massive and bleed slightly off-center.
Exact Color Grade (CSS Filter): hue-rotate(-55deg) saturate(250%) brightness(1.2) contrast(1.1). This transforms the purple asset into a vibrant, high-end "Electric Brand Blue" that matches the primary CTA.
Hero Content (Hero Left):
Social Proof: A "Rated 4.9/5 by 2700+ customers" badge with five orange #FF801E stars.
Subheadline: "Effortlessly manage your projects, collaborate with your team, and achieve your goals with our intuitive task management tool." (18px, Inter, -1px tracking).
Primary CTA: "Get Started Now" button.
Color: rgba(0,132,255,0.8) with backdrop-blur-[2px].
Details: rounded-[16px], white text, inner highlight shadow inset 0px 4px 4px 0px rgba(255,255,255,0.35), and a white circular arrow icon.
Animation: Scale 1.02 on hover with a smooth transition.
Footer Logos: Include a "Trusted by Top-tier product companies" section at the bottom with 5 grayscale SVG logos (e.g., placeholder logos for tech companies) spaced at gap-[100px].
Key Technical Specs for the Developer:
Video Tag: autoPlay loop muted playsInline.
Container: Use a relative wrapper for the background glow and a z-10 main container for the content.
Smoothing: Apply -webkit-font-smoothing: antialiased for the sharpest typography.Generated by MotionSites Export Tool
---
## Taskora SaaS Hero / Taskora SaaS Hero
**文件名**: `Taskora_SaaS_Hero.md`
**原始 Prompt 代码**:
```markdown
# Taskora SaaS Hero
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a high-fidelity, responsive, dark-themed hero section for a SaaS product called "Taskora" using React, Tailwind CSS, and Framer Motion (for entrance animations).
1. Visual Style & Assets
Theme: Dark mode base (#050505) with white text.
Background Video: Use this video URL as a full-screen background loop. Set it to opacity-50 and add a gradient overlay (black/60 to #050505) so it fades seamlessly into the background at the bottom: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260201_052917_7fc4e418-3123-40bf-b5ba-394c28eb4b3a.mp4
Typography: Import and use these specific Google Fonts:
Instrument Serif (Italic) → Strictly for the word "Workflow" in the headline.
Manrope → For the "Trusted by" badge and subheadlines.
Cabin → For the main CTA button.
Inter / Inter Tight → For the Dashboard UI and Navbar links.
2. Component Layout
A. Floating Navbar
Create a fixed, floating "pill-shaped" navbar with a glassmorphism effect (bg-white/10 backdrop-blur-md).
Desktop: Logo on left, Links centered (Home, Features, Company, Contact), Auth buttons (Sign Up, White "Sign In" button) on right.
Mobile: Collapse links into a hamburger menu that opens a glassmorphism dropdown.
B. Hero Content (Centered)
Badge: A pill-shaped badge reading "Trusted by +30.000 of clients globally". Include a star icon with a blue gradient fill.
Headline: Massive scale (up to text-[80px] on desktop). Text: "Simplify Your Workflow. Stay Focused." (Italicize "Workflow" using the Serif font).
Subhead: Gray text (text-gray-400): "Taskora helps teams manage projects, tasks, and deadlines with clarity."
CTA: A large white button with black text: "Book a Free Demo". Add a subtle hover scale and shadow effect.
C. Dashboard Preview (The "Product Shot")
Build a detailed, non-functional mock dashboard interface container placed below the CTA.
Visuals: Light mode dashboard (bg-[#F9F9FA]) to contrast with the dark hero background.
Sidebar: Thin vertical rail with navigation icons (Home, Users, etc.).
Content Area:
Stats Cards: 3 cards (Total Sales, Operating Expenses, Gross Profit) showing a value, a percentage trend (green/red), and a mini bar chart at the bottom.
Revenue Chart: A section showing a bar chart visualization.
Deals Table: A detailed data table showing rows with "Deal Name", "Company" (Amazon.com with logo), "Amount", "Date", "Owner" (avatar), and "Stage" (New tag).
Header: Search bar, Notification bell, and User profile pictures.
3. Responsiveness
Ensure the Typography scales down significantly for mobile (text-5xl for headline).
The Dashboard preview should preserve its layout but become scrollable or stack vertically on smaller screens.
Navbar transforms from a horizontal row to a mobile drawer.Generated by MotionSites Export Tool
---
## Terra Geo Map / Terra Geo Map
**文件名**: `Terra_Geo_Map.md`
**原始 Prompt 代码**:
```markdown
# Terra Geo Map
> **Category:** SaaS
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a hero section for a geo-mapping SaaS landing page called "Terra" with these exact specifications:
Font: Inter (weights: 400, 500, 700)
Primary blue color: #2E7DF3 (HSL: 217 90% 57%)
Navigation bar:
- Logo: 32px circle with gradient from-primary to-blue-400, containing 🌍 emoji, followed by "Terra" in bold
- Desktop nav (visible at lg: breakpoint and up): "Product", "Solutions", "Resources" with dropdown chevron SVG arrows, "Examples", "Pricing" — all in muted-foreground, hover to foreground
- Right side: "Login" button (rounded-full, border, ghost style) and "Sign Up" button (rounded-full, primary bg)
- Mobile/tablet (< lg): Hamburger menu using lucide-react Menu/X icons, toggling a dropdown with all nav items and buttons
Hero content (centered, flex column):
1. Product Hunt badge — mt-10 top spacing, rounded-lg border with border-red-200 bg-red-50/50, contains 🏆 emoji, "PRODUCT HUNT" label (10px, uppercase, tracking-wider, red-400) and "#1 Product of the Day" (14px, semibold, red-500)
2. Heading — font-medium, letter-spacing: -0.2em (inline style), sizes text-5xl md:text-7xl:
- Line 1: "The ultimate geo" in primary color
- Line 2: "map " in primary color, followed by "builder" with:
- Gradient text: background-image: linear-gradient(135deg, #767676 0%, #D3D3D3 100%) with bg-clip-text text-transparent
- Dotted selection box SVG absolutely positioned around the word (-inset-3 md:-inset-4), rotated -0.5deg, containing:
- An irregular quadrilateral path: M5 5 L195 5 L195 88 L5 72 Z (bottom-right corner drops lower than bottom-left) — stroke #B0B0B0, strokeWidth 1.2, strokeDasharray 6 4
- 4 corner dots: circles at (5,5), (195,5), (5,72), (195,88) — radius 3.5, fill #B0B0B0
- 4 midpoint dots: circles at (100,5), (100,80), (5,38.5), (195,46.5) — radius 3, fill #B0B0B0
- SVG viewBox: 0 0 200 95, preserveAspectRatio="none"
3. Subtext — mt-8, muted-foreground, text-base md:text-lg, max-w-lg, centered:
Terra is how teams build maps and
run spatial intelligence together.
Design, collaborate, share — all in one place.
4. CTA button — mt-8, px-10 py-4, primary bg, primary-foreground text, font-semibold, rounded-full, shadow-lg shadow-primary/20
5. Video — mt-12, max-w-5xl, rounded-xl overflow-hidden, no drop shadow:
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_092310_5c71bab5-63cd-4a95-9390-cc6a1189d553.mp4"
muted autoPlay loop playsInline
Layout: min-h-screen flex flex-col bg-background, hero content area is flex-1 flex flex-col items-center justify-center px-4 pt-8Generated by MotionSites Export Tool
---
## Transform Data / Transform Data
**文件名**: `Transform_Data.md`
**原始 Prompt 代码**:
```markdown
# Transform Data
> **Category:** Hero Section
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
HERO SECTION CREATION PROMPT
Create a modern hero section with a looping video background and the following specifications:
Video Background:
URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260329_050842_be71947f-f16e-4a14-810c-06e83d23ddb5.mp4
Size: 115% width and height
Position: Centered horizontally, anchored to top with object-top focal point
Custom JavaScript fade system (NO CSS transitions):
250ms requestAnimationFrame-based fade-in on load/loop start
250ms fade-out when 0.55 seconds remain before video end
fadingOutRef boolean prevents re-triggering fade-out from repeated timeUpdate events
On ended: opacity set to 0, 100ms delay, reset to currentTime = 0, play, fade back in
Each new fade cancels running animation frames to prevent competing animations
Fades resume from current opacity (no snapping)
Fonts Required:
Schibsted Grotesk (weights: 400, 500, 600, 700)
Inter (weights: 400, 500, 600, 700)
Noto Sans (weights: 400, 500, 600, 700)
Fustat (weights: 400, 500, 600, 700)
Navigation Bar:
Logo: "Logoipsum" (Schibsted Grotesk SemiBold, 24px, -1.44px tracking)
Menu items (Schibsted Grotesk Medium, 16px, -0.2px tracking):
Platform
Features (with dropdown chevron icon)
Projects
Community
Contact
Right side buttons:
"Sign Up" (transparent background, 82px width)
"Log In" (black background, white text, 101px width)
Padding: 120px horizontal, 16px vertical
Hero Content (moved up 50px with -mt-[50px]):
Badge Component:
Dark badge with star icon + "New" text
Light background with text: "Discover what's possible"
Font: Inter Regular, 14px
Rounded corners with subtle shadow
Main Headline:
Text: "Transform Data Quickly"
Font: Fustat Bold, 80px, -4.8px tracking, line-height: none
Color: Black, center-aligned
Subtitle:
Text: "Upload your information and get powerful insights right away. Work smarter and achieve goals effortlessly."
Font: Fustat Medium, 20px, -0.4px tracking
Color: #505050
Max-width: 736px, width: 542px
Search Input Box:
Backdrop blur with dark transparent background (rgba(0,0,0,0.24))
Dimensions: 728px max-width, 200px height, rounded 18px
Top row: Credit info
Left: "60/450 credits" with green "Upgrade" button
Right: AI icon + "Powered by GPT-4o"
Font: Schibsted Grotesk Medium, 12px, white text
Main input area:
White background, rounded 12px, shadow
Placeholder: "Type question..." (16px, rgba(0,0,0,0.6))
Black circular submit button with up arrow icon (36px size)
Bottom row:
Left: Three action buttons (gray backgrounds, rounded 6px):
"Attach" with paperclip icon
"Voice" with microphone icon
"Prompts" with search icon
Right: Character counter "0/3,000" (12px, gray)
Icons (SVG paths from imported file):
Chevron down arrow
Up arrow
Star icon
AI sparkle icon
Attach/paperclip icon
Voice/microphone icon
Search icon
Spacing:
Gap between navigation and hero: 60px
Gap between header and search box: 44px
Gap within header elements: 34px (badge to title, title to subtitle)
Hero content moved up: 50px negative margin
Horizontal padding: 120px
Color Scheme:
Black text: #000000
Gray text: #505050
Light gray backgrounds: #f8f8f8
Green upgrade button: rgba(90,225,76,0.89)
Dark badge: #0e1311
White: #ffffff
Transparent overlay: rgba(0,0,0,0.24)
Component Structure:
VideoBackground component with custom fade logic
Navigation bar (fixed spacing, horizontal layout)
Hero content container (centered, max-width constraints)
Nested components for badge, header, and search input
All elements positioned over full-screen video backgroundGenerated by MotionSites Export Tool
---
## Velorah / Velorah
**文件名**: `Velorah.md`
**原始 Prompt 代码**:
```markdown
# Velorah
> **Category:** Agency
> **Type:** hero
> **License:** Free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a single-page hero section with a fullscreen looping background video, glassmorphic navigation, and cinematic typography. Use React + Vite + Tailwind CSS + TypeScript with shadcn/ui.
Video Background:
Fullscreen <video> element with autoPlay, loop, muted, playsInline
Source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4
Positioned absolute inset-0 w-full h-full object-cover z-0
Fonts:
Import from Google Fonts: Instrumental Serif (display) and Inter weights 400/500 (body)
CSS variables: --font-display: 'Instrument Serif', serif and --font-body: 'Inter', sans-serif
Body uses var(--font-body), headings use inline fontFamily: "'Instrument Serif', serif"
Color Theme (dark, HSL values for CSS variables):
--background: 201 100% 13% (deep navy blue)
--foreground: 0 0% 100% (white)
--muted-foreground: 240 4% 66% (muted gray)
--primary: 0 0% 100%, --primary-foreground: 0 0% 4%
--secondary: 0 0% 10%, --muted: 0 0% 10%, --accent: 0 0% 10%
--border: 0 0% 18%, --input: 0 0% 18%
Navigation Bar:
relative z-10, flex row, justify-between, px-8 py-6, max-w-7xl mx-auto
Logo: "Velorah®" (® as <sup className="text-xs">), text-3xl tracking-tight, Instrument Serif font, text-foreground
Nav links (hidden on mobile, md:flex): Home (active, text-foreground), Studio, About, Journal, Reach Us — all text-sm text-muted-foreground with hover:text-foreground transition-colors
CTA button: "Begin Journey", liquid-glass rounded-full px-6 py-2.5 text-sm text-foreground, hover:scale-[1.03]
Hero Section:
relative z-10, flex column, centered, text-center, px-6 pt-32 pb-40 py-[90px]
H1: "Where dreams rise through the silence." — text-5xl sm:text-7xl md:text-8xl, leading-[0.95], tracking-[-2.46px], max-w-7xl, font-normal, Instrument Serif. The words "dreams" and "through the silence." wrapped in <em className="not-italic text-muted-foreground"> for color contrast
Subtext: text-muted-foreground text-base sm:text-lg max-w-2xl mt-8 leading-relaxed — "We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work."
CTA button: "Begin Journey", liquid-glass rounded-full px-14 py-5 text-base text-foreground mt-12, hover:scale-[1.03] cursor-pointer
Liquid Glass Effect (CSS class .liquid-glass):
.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;
}
Animations (CSS keyframes + classes):
@keyframes fade-rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-rise { animation: fade-rise 0.8s ease-out both; }
.animate-fade-rise-delay { animation: fade-rise 0.8s ease-out 0.2s both; }
.animate-fade-rise-delay-2 { animation: fade-rise 0.8s ease-out 0.4s both; }
H1 gets animate-fade-rise
Subtext gets animate-fade-rise-delay
Hero CTA button gets animate-fade-rise-delay-2
Layout: No decorative blobs, radial gradients, or overlays. Minimalist, cinematic, vertically centered hero. The video provides all visual depth.Generated by MotionSites Export Tool
---
## Viktor Portfolio / Viktor Portfolio
**文件名**: `Viktor_Portfolio.md`
**原始 Prompt 代码**:
```markdown
# Viktor Portfolio
> **Category:** Portfolio
> **Type:** landing-page
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a high-end, cinematic 2-page architectural portfolio using React, Tailwind CSS, and Framer Motion (motion/react). The aesthetic is minimalist, dark-themed (black background, white text), and uses a sophisticated typographic hierarchy.
Global Configuration:
Fonts: Import and use 'Orbitron' for display headings, 'Space Grotesk' for body text, and 'JetBrains Mono' for technical/mono elements.
Selection: Custom selection color (white background, black text).
Icons: Use lucide-react (Snowflake, Maximize, Zap, ArrowLeft, ArrowRight).
Page 1: Hero (Modern Architect)
Background: Full-screen looping video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260304_101127_49ce07b7-f19a-4882-b19c-1d2a27d97ac3.mp4.
Settings: Muted, playsInline, loop, preload="auto".
Overlays: Radial vignette on desktop (70% transparent center to 70% black edges) and a bottom-fade gradient on mobile.
Top Nav: Right-aligned '1/01' counter with a progress line and a 'Next Project' button in mono font.
Main Content:
Large title: 'Viktor-O // MODERN ARCHITECT' (font-display, uppercase, tracking-tighter).
Description: Light-weight sans text with a max-width of 450px.
Technical Specs (Right Column): A list (Stack, Logic, Uptime, Scale) with labels and values separated by thin border-white/20.
Bottom Section:
A glass-morphism card (bg-white/5, backdrop-blur-xl) with a tech image (https://picsum.photos/seed/tech/200/200), project title 'VK-01: React Engine', and a 'View Project' button.
A row of pill-shaped tags (TS/JS, V1, Full-Stack, Cloud-Ready) at the bottom right.
Page 2: Project Details (Projecty Engine)
Background: Full-screen looping video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260304_102019_f84678ca-ffe7-49a5-895a-75ac1f71ad46.mp4.
Overlays: Subtle elliptical vignette to ensure text legibility.
Top Nav: 'Back Home' button with an arrow icon.
Main Content:
Massive display title on the left: 'PROJECTY ENGINE' (leading-0.85, uppercase).
Right-aligned description text about a flagship React engine, with a 'Read More' link featuring a minimalist underline.
Bottom Section:
Two structured info blocks: '01 // CORE ARCHITECTURE' and '02 // PERFORMANCE METRICS' with uppercase mono subtext.
Navigation arrows (Left/Right) in circular borders and a meta-info block (Date | Project) with an italicized caption.
Interactions & Responsiveness:
Use AnimatePresence for smooth opacity/exit transitions between pages.
Implement entrance animations for text and cards (opacity and y-offset).
On mobile: The video should occupy the top half (h-[50vh]) with a smooth gradient transition to the content below.Generated by MotionSites Export Tool
---
## Wealth Video Hero / Wealth Video Hero
**文件名**: `Wealth_Video_Hero.md`
**原始 Prompt 代码**:
```markdown
# Wealth Video Hero
> **Category:** Fintech
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a modern, high-impact hero section for a wealth management platform using React and Tailwind CSS.
Layout & Background:
The section must be full viewport height (min-h-screen) with a black background.
Background Video: Use this specific video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260207_050933_33e2620d-09cd-43a2-80ef-4cdbb42f4194.mp4. It should be autoplaying, looped, and muted.
Video Styling: The video must be scaled to 150% of its size (scale-150) with the focal point aligned to the top-left corner (object-left-top, origin-top-left).
Navbar:
Place a transparent navbar at the absolute top.
Include a white logo on the left.
Center navigation links: "Features" (with a chevron down icon), "Company", and "Blogs". These should be white with hover opacity effects.
Right side actions: A "Sign in" text link and a white "Get Started" pill-shaped button with black text.
Hero Content (Centered):
Tag: A glassmorphic pill at the top saying "Real-Time Budget Tracking" (white text, semi-transparent border/bg).
Headline: Huge, centered white text saying "Build Wealth That Lasts Generations" (responsive font size, up to ~100px on desktop).
Subtitle: "Transform today's earnings into tomorrow's family fortune with proven wealth-building strategies" (white text with slight transparency).
CTA: A prominent white pill button saying "Start Building Wealth" with black text and a hover scale effect.
Bottom Features Grid:
Place a floating card container near the bottom of the screen.
Style: Dark glassmorphism effect (bg-black/70, backdrop-blur-xl, white border).
Grid: 4 columns listing these steps:
Create Your Free Account: Sign up in seconds using your email address or mobile number.
Connect Your Bank Accounts: Securely link your bank accounts, cards, or digital wallets with.
Set Your Financial Goals: Customize your savings, spending, or investment goals with easy.
Track, Grow, and Optimize: Watch your money work for you in real time—get insights and tips.Generated by MotionSites Export Tool
---
## Web3 EOS Hero / Web3 EOS Hero
**文件名**: `Web3_EOS_Hero.md`
**原始 Prompt 代码**:
```markdown
# Web3 EOS Hero
> **Category:** Web3
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a full-screen hero section for a Web3 landing page. Use the font "General Sans" (from Fontshare) throughout. The entire section has a pure black (#000000) background with a fullscreen looping background video (muted, autoplay, playsInline) using this URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260217_030345_246c0224-10a4-422c-b324-070b7c0eceda.mp4. The video is covered by a 50% black overlay (bg-black/50) for readability. All content sits on top of the video.
Navbar:
Horizontally spread across the top with 120px horizontal padding and 20px vertical padding.
Left side: a placeholder logo wordmark (use "LOGOIPSUM" or similar) in white, 187px wide and 25px tall, followed by 4 nav links spaced 30px apart: "Get Started", "Developers", "Features", "Resources". Each nav link is white, 14px, font-medium, with a small white 14px chevron-down arrow icon to the right (14px gap between label and arrow). Nav links are hidden on mobile.
Right side: a "Join Waitlist" pill button. This button has a subtle layered construction — a fully rounded pill shape with a thin 0.6px solid white outer border, and inside that, a black-background pill with the text "Join Waitlist" in white, 14px, font-medium, centered with 29px horizontal and 11px vertical padding. There's also a subtle white glow/light streak effect along the top edge of the button (a blurred white-to-transparent gradient blob positioned at the top).
Hero Content (centered below the navbar):
Vertically centered in the remaining viewport space, pushed down with about 280px top padding on desktop (200px on mobile), 102px bottom padding.
All content is horizontally centered and stacked vertically with 40px gaps.
Badge/pill: A small rounded pill (20px border-radius) with 10% white background and a 1px white/20% border. Inside: a tiny 4px white dot, then text reading "Early access available from" in white at 60% opacity, followed by " May 1, 2026" in solid white. Font is 13px, font-medium.
Heading: Large text reading "Web3 at the Speed of Experience", max-width 613px, 56px on desktop / 36px on mobile, font-medium, line-height 1.28. The text has a gradient fill — a linear-gradient at ~144.5 degrees going from solid white (at ~28%) to fully transparent black (at ~115%), applied as a background-clip text effect so the text itself shows the gradient.
Subtitle: Below the heading with a 24px gap. Text reads: "Powering seamless experiences and real-time connections, EOS is the base for creators who move with purpose, leveraging resilience, speed, and scale to shape the future." — 15px, font-normal, white at 70% opacity, max-width 680px, centered.
CTA Button: A "Join Waitlist" pill button similar to the navbar button but with a white background and black text instead. Same layered construction: 0.6px white outer border, white glow streak on top, and inside the white pill the text is 14px font-medium black, with 29px horizontal and 11px vertical padding.
The entire layout is responsive — nav links collapse on screens below md breakpoint, heading scales down, and padding adjusts.Generated by MotionSites Export Tool
---
## Weblex Dark Hero / Weblex Dark Hero
**文件名**: `Weblex_Dark_Hero.md`
**原始 Prompt 代码**:
```markdown
# Weblex Dark Hero
> **Category:** Landing Page
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Create a dark, full-screen hero section with a background video and a transparent navbar.
Navbar:
Fixed at the top, fully transparent (no blur, no border, no background)
Left: Brand name "Weblex." with a green dot accent using the primary color
Center (desktop): Navigation links — Home, Features, Pricing, About — in muted foreground color, small text
Right (desktop): "Get Started" button — primary color background, dark text, rounded-full, small text
Mobile: Hamburger menu icon that toggles a dropdown with the same links and button
Hero Section:
Full viewport height (h-screen)
Background video playing on autoplay, loop, muted, playsInline, covering the full section with object-cover
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260221_085953_8463b46e-ba85-4bb7-912a-1feaf346e970.mp4
Video has a seamless loop transition: fades out to black starting 1.5 seconds before the end (reaching opacity 0 by 0.3s before the end), then fades back in over the first 1 second when the video restarts. Use requestAnimationFrame for smooth opacity updates.
No dark overlay on the video — full opacity
Content is aligned to the bottom of the screen with 100px bottom padding, centered horizontally, max-width 603px
Hero Content (bottom-aligned, centered):
Badge: A small pill/badge that says "Introducing Smart Website Builder" — styled with a border, rounded-full, small text, muted foreground color
Heading: "Turn your big idea into a stunning website" — 62px font size, font-medium, centered, line-height 1.1. Responsive: 48px on medium, 36px on small screens
Paragraph: "Fintech is its potential to promote financial inclusion. In many parts of the world, millions of people lack access to traditional banking services." — muted foreground color, centered, max-width 520px
Two buttons side by side:
"Get Started Now" — primary color background, dark text, rounded-full, with an ArrowUpRight icon on the left, 18px text, hover brightness effect
"See Pricing" — secondary (white) background, dark text, rounded-full, 18px text
Color Theme (dark mode only, HSL values in CSS variables):
--background: 240 67% 1% (near-black)
--foreground: 0 0% 100% (white)
--primary: 73 98% 57% (bright lime green)
--primary-foreground: 240 67% 1% (dark)
--secondary: 0 0% 100% (white)
--secondary-foreground: 240 67% 1% (dark)
--muted: 240 10% 12%
--muted-foreground: 0 0% 82% / 0.8
--border: 0 0% 100% / 0.1
Tech: React, TypeScript, Tailwind CSS, Lucide icons for ArrowUpRight and Menu/X icons.Generated by MotionSites Export Tool
---
## Zentry Premium / MotionZ Premium Landing Page
**文件名**: `Zentry_Premium.md`
**原始 Prompt 代码**:
```markdown
# MotionZ Premium Landing Page
Create a high-fidelity, premium landing page inspired by gaming universes and advanced design layers. The design should feel immersive, dynamic, and state-of-the-art.
## Design Aesthetic
- **Color Palette**: Sleek dark modes (Black, Deep Violet, Charcoal) contrasted with vibrant accents (Electric Blue, Radiant Yellow, Soft Lavender).
- **Typography**: Modern, bold sans-serif for headings (e.g., General Sans, Zentry Custom) and clean, readable fonts for body text (e.g., Circular Web, Robert).
- **Visual Elements**:
- Video backgrounds with smooth transitions.
- Glassmorphism effects (blurred backgrounds, subtle borders).
- Bento-style grids for feature showcases.
- Floating 3D-like elements and interactive scroll-driven animations.
- **Micro-animations**: Hover effects with radial gradients, tilting cards, and smooth GSAP-powered transitions.
## Key Sections
1. **Hero**: A cinematic entrance with a video-switching interaction. Clicking a preview mini-video should transition to the next full-screen video with a scale and clip-path animation.
2. **About**: A scroll-triggered clip-path animation that expands an image/video to full screen as the user scrolls, introducing the "Design Layer".
3. **Features (Bento Grid)**: A collection of interactive cards with tilting effects and radial gradient hover states. Each card showcases a unique product or feature in the ecosystem.
4. **Story**: A floating image section with a magnetic mouse-follow effect, creating a sense of depth and mystery.
5. **The Symbiotic World**: An accordion-style section showcasing governance, opportunity, and value sharing within the ecosystem, accompanied by a rotating 3D token visualization.
6. **Metrics & Backers**: High-impact statistics displayed in a modern grid, followed by a list of world-class partners and backers.
7. **Contact & Footer**: A final call to action with a "sword-man" clip-path design and a comprehensive footer with social links.
## Technical Requirements
- Use **React** for component-based structure.
- Use **GSAP** (GreenSock) for all complex animations and scroll-triggered effects.
- Use **Tailwind CSS** for responsive styling and layout.
- Ensure all videos are muted, looped, and optimized for web performance.
- Implement a floating navbar that transitions from transparent to solid on scroll.
## Tone & Voice
The copy should be epic, visionary, and forward-looking. Use terms like "The Future of Design", "Design Economy", "Universal Design Layer", and "Symbiotic World".xPortfolio Hero / xPortfolio Hero
文件名: xPortfolio_Hero.md
原始 Prompt 代码:
# xPortfolio Hero
> **Category:** Hero Section
> **Type:** hero
> **License:** free
---
## 🎬 Video Preview
## 📋 Prompt
```text
Build a single-page hero section for a brand design agency called "Brandly" using React, Tailwind CSS, and Lucide React icons. The entire page is one viewport-height screen with no scrolling. It uses a fullscreen background video with all content layered on top.
Fonts (loaded via Google Fonts in index.html):
Inter (weights: 300, 400, 500, 600, 700) -- used as the base font for the entire page
Anton (regular 400) -- used for all large uppercase headings
Page Container:
Full viewport height (h-screen), overflow-hidden, flex flex-col
Background color: #F5F3EE (warm off-white/cream)
Base font-family set via inline style: fontFamily: 'Inter, sans-serif'
Background Video:
A video element with autoPlay, loop, muted, playsInline
Positioned fixed top-0 left-0 w-full h-full object-cover pointer-events-none with zIndex: 0
Video source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_102305_3a7cab3b-7a86-46e8-a0f9-6937f035b087.mp4
Type: video/mp4
Header (zIndex: 10):
relative, padding px-6 lg:px-12 py-4 lg:py-6, flex-shrink-0
Nav: flex items-center justify-between
Left: Logo text "Brandly" -- text-2xl lg:text-3xl font-bold text-black
Center (hidden on mobile, shown md+): Navigation links "About", "Features", "Pricing", "FAQ", "Help" -- flex items-center gap-8 text-base lg:text-lg, color #080808
Right: Two buttons side by side (flex items-center gap-3):
"Sign Up" -- px-4 lg:px-6 py-2 text-base lg:text-lg hover:text-black transition, color #080808
"Log In" -- px-4 lg:px-6 py-2 bg-black text-white text-base lg:text-lg hover:bg-gray-800 transition
Main Content Area (zIndex: 10):
relative, padding px-6 lg:px-12 py-6 lg:py-8, flex-1 flex flex-col justify-between
Top Row -- 2 column grid (grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12):
Left column: Main heading (h1): "BUILDING / BRANDS THAT / RESONATE" in Anton font. text-5xl sm:text-6xl lg:text-6xl xl:text-7xl font-normal text-black leading-[0.80] tracking-tight mb-4 lg:mb-5.
Subheading: "Thoughtful design that captivates, empowers, and creates lasting impact." text-lg lg:text-xl mb-4 lg:mb-5 max-w-md color #080808
CTA button: "Start today" with ArrowRight icon in white circle. flex items-center gap-3 pl-8 pr-1.5 py-1.5 bg-black text-white rounded-full hover:bg-gray-800
Right column (text-right): "50+ BRANDS LAUNCHED" heading in Anton, with description paragraph below.
Middle Row -- 2 column grid:
Left: Brand designer bio paragraph with social icons (Facebook filled, Instagram, Youtube)
Right: "5+ YEARS IN THE INDUSTRY" heading in Anton with description
Bottom Row -- Brand Logo Bar:
6 brand cards in grid-cols-6: Frame Blox, Supa Blox, Hype Blox, Hype Blox, Ultra Blox, Ship Blox
Each with unique abstract icon and white bg rounded-lg card style
Key: No animations, all text black/#080808, default Tailwind config, justify-between layout distribution.Generated by MotionSites Export Tool
---
*（内容由AI生成，仅供参考）*