Back to prompts
✦ClaudeDesign
Cyberpunk fashion e-commerce hero
A full-screen cyberpunk fashion hero with a video background, Orbitron type and semantic color tokens.
Loading the original X post…
Open original on XA full-screen cyberpunk fashion hero with a video background, Orbitron type and semantic color tokens.
The prompt
✦Claude Opus 4.6
| 1 | **Create a full-screen hero section for a futuristic cyberpunk fashion e-commerce site with a pure black background.** |
| 2 | |
| 3 | **Typography:** |
| 4 | - Display font: "Orbitron" (Google Font), used for headlines and buttons |
| 5 | - Body font: "Space Grotesk" (Google Font) |
| 6 | - All text is white |
| 7 | |
| 8 | **Background Video:** |
| 9 | - A looping, muted, autoplaying background video covering the entire section |
| 10 | - Video source: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260303_175853_da9ead9c-0e05-40d9-b9bd-06a9b5a73d27.mp4` |
| 11 | - Apply a dark gradient overlay on top: `bg-gradient-to-t from-black/70 via-black/20 to-transparent` |
| 12 | |
| 13 | **Navigation (absolute positioned at top):** |
| 14 | - **Left:** A circular black button (w-12 h-12 on mobile, w-[5.5rem] h-[5.5rem] on desktop) containing the site logo image |
| 15 | - **Right (desktop only):** Three elements in a row: |
| 16 | 1. Circular black button with a Search icon (w-[5.5rem] h-[5.5rem]) |
| 17 | 2. Circular black button with a ShoppingCart icon (w-[5.5rem] h-[5.5rem]) |
| 18 | 3. A pill-shaped black container (h-[5.5rem]) with a white circular avatar containing a User icon on the left, and the text "Contact" on the right |
| 19 | - **Right (mobile only):** A circular black hamburger menu button (w-12 h-12). When tapped, it opens a black rounded dropdown below the nav with three rows: Search, Cart, Contact — each with icon + label |
| 20 | |
| 21 | **Product Pins (desktop only, hidden on mobile):** |
| 22 | - Three floating product callouts positioned absolutely over the video: |
| 23 | 1. **"NEUROVIBE MK-I — $230"** at `left-[8%] top-[18%]`: Text on the left, then a horizontal white line (w-20), then a small hollow white circle (w-2.5 h-2.5, border-2) |
| 24 | 2. **"VOIDBLADE — $120"** at `right-[8%] top-[42%]`: Small hollow circle on the left, then a horizontal white line (w-16), then text on the right |
| 25 | 3. **"SHADOW CIRCUIT JACKET — $450"** at `right-[8%] top-[58%]`: Same layout as VOIDBLADE — circle, line, text |
| 26 | - Text uses `text-sm tracking-[0.15em] font-medium` for the name and `text-sm` for the price |
| 27 | - Lines use `bg-primary-foreground/40`, circles use `border-primary-foreground/60` |
| 28 | |
| 29 | **Hero Headline (bottom-left):** |
| 30 | - Positioned at `bottom-[8%] left-[3%]` |
| 31 | - Three lines of uppercase text: "Future" / "Fashion," / "Redefined." |
| 32 | - Font: Orbitron display, `text-5xl md:text-7xl lg:text-8xl`, `leading-[0.9] tracking-tight`, white |
| 33 | |
| 34 | **Shop Button (bottom-right corner):** |
| 35 | - Positioned at `absolute bottom-0 right-0` |
| 36 | - Black background, white text, `rounded-tl-[1.5rem]` (only top-left corner rounded) |
| 37 | - Padding: `px-8 py-4` on mobile, `px-12 py-6` on desktop |
| 38 | - Text: "Shop" on mobile, "Shop Now" on desktop |
| 39 | - Font: Orbitron, `tracking-[0.2em] uppercase` |
| 40 | |
| 41 | **Color System:** |
| 42 | - Background (--background): pure black `0 0% 0%` |
| 43 | - Primary (--primary): black `0 0% 0%` |
| 44 | - Primary-foreground: white `0 0% 100%` |
| 45 | - Use semantic Tailwind tokens throughout — no hardcoded color classes |
What this prompt is good for
Visual direction
Moodboards, style guides, and design briefs
Marketing creative
Hero artwork and high-converting visual assets
Brand identity
Consistent aesthetics across typography and form
Rapid prototyping
Iterate variations in seconds with precision
