Loading…
Loading…
Creator · MotionSites
View original source ↗The reproduction prompt keeps the original and adds runtime, asset and acceptance requirements. These additions are not the author’s words.
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.Models & stability
Recommended models
Independent retest evidence
Oct 18, 2026
Aug 31, 2026
Aug 31, 2026
Independent reproductions
Open reproduction ↗GLM-5.3 单次生成；Codex 人工修复运行依赖、必要源码及移动布局，未重新生成。桌面/手机真实渲染和资源检查通过；完整功能与视觉还原尚未全部验收。源码、截图和修复记录见复现出处。
Reproduction source ↗Keep exploring
Dark hero for an AI site builder, with dependencies pinned down to the version of motion. The specific use of the animation library is the main point of interest.
Prompt
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…
Fully responsive hero for the PR agency SaaS Convix on a light background, with the page frame starting from the class names of the outer wrapper.
Prompt
Build a fully responsive, full-viewport hero section for a PR-agency SaaS called "Convix Software" with these exact specs: Page Frame Outer wrapper: min-h-screen w-full bg-[#ededed] p-3 sm:p-4, font-family Inter Hero container (clips every…
Landing hero for the subscription creative agency Alwayzz, built with React and Vite, with styling deliberately done in custom CSS instead of Tailwind utility classes.
Prompt
**Create a single-page landing hero section for a creative agency called "Alwayzz" with a React + Vite + Tailwind CSS setup. Use custom CSS (not Tailwind utilities) for all styling. The design should be minimal, clean, black-and-white, wit…
Same creator
Each detail page keeps the original result, the prompt, and retest evidence in one reading path.
