The prompt behind "Vision Reveal — Creative Studio Hero" is published in full, and was run by 2 models: Fable 5 and Kimi K3.2 of 2 finished; 2 measured locally.
Models
2
Completed
2 of 2
Cheapest completed run
Kimi K3 — $0.19
Measured locally in Bench Arena: tokens reconciled on the harness log, cost recomputed from them.
Output
Fable 5
Kimi K3
The prompt that built Vision Reveal
Prompt54 lines · EN
Output EXACTLY ONE complete, self-contained `index.html` file. No markdown fences. No explanation before or after the HTML.
The file must run in a modern browser (Chrome) with no build step. It may load external fonts from Google Fonts, but no other external dependencies.
Recreate the following creative-studio hero landing page as closely as possible.
Visual concept: a full-viewport hero with a dramatic splash-screen entrance, a large behind-image headline, and a mouse-driven spotlight reveal layer over a base photograph. Clean, editorial, high-end portfolio feel.
Brand: "Visuals" — a creative studio. Use a generic SVG logo in the top-left.
SPECIFICATIONS
1. SPLASH SCREEN
- Fixed full-screen overlay, z-index 9999, pointer-events none.
- Ten colored boxes arranged in two rows of five (top row + bottom row).
- Each box fills 20% width and 50% height.
- Background color: #75C5DE.
- Top-row boxes animate upward by 100% and bottom-row boxes animate downward by 100%.
- Staggered delays: 0s, 0.05s, 0.1s, 0.15s, 0.2s.
- Easing: cubic-bezier(0.96,-0.02,0.38,1.01), duration 1s.
- Whole splash fades out and becomes hidden after ~1.35s with a 0.3s fade.
- Honor `prefers-reduced-motion` by hiding the splash immediately.
2. NAVIGATION
- Fixed logo at top-left (generic inline SVG, 32x32). Mix-blend-mode: difference so it is visible over any background.
- Fixed circular burger menu button at top-right, 59px diameter, background #F4F1E8, two horizontal bars (24x2px, #111111).
- On hover, burger background turns #0B0B0B and bars turn #F4F1E8.
- When open, button background stays #0B0B0B and the two bars form an X.
- Menu panel: fixed rounded panel sliding down from the top, backdrop-filter blur(26px), background rgba(17,17,17,0.95), links Work / About / Blog (large typography, #F4F1E8), contact email and social links, plus a "Let's talk" pill button.
- Panel is responsive: full-width on mobile, 420px wide on desktop anchored top-right.
3. HERO SECTION
- Full viewport height, min-height 800px on desktop, background #E4E4E4.
- A huge centered headline text "Visuals" sits behind the hero image, color #F4F1E8, font-size clamp(180px, 28vw, 560px), line-height 80%, letter-spacing -0.04em, font-weight 500.
- The headline should animate up from translateY(330px) with a 1s cubic-bezier(0.16,1,0.3,1) after a ~1.5s delay.
- Base background photograph: cover, centered, fills the hero. Use a high-quality placeholder image URL for a creative-studio/editorial portrait scene (any public Unsplash or Pexels photo with appropriate mood is acceptable).
- Reveal layer: a second copy of a similar photograph overlaid on top, with a soft radial mask following the mouse. Use a canvas-driven mask so the reveal layer is only visible inside a moving spotlight circle.
- Spotlight radius ~260px, with a soft gradient edge (white center to transparent edge).
- Smooth the mouse position with inertia (lerp factor ~0.1) so the spotlight lags slightly behind the cursor.
- Hero content in foreground: headline paragraph and a CTA pill button.
- Foreground headline text: "I build compelling visual stories & motion that make ideas shine." Split into words; each word animates in from opacity 0, translateY(10px), blur(10px), starting after ~1s with 0.05s stagger.
- CTA button "Start a project now": pill shape, white expanding background, circular arrow icon, hover expands the white background and shifts the icon left.
4. RESPONSIVE
- Mobile first: hero content top-left padded, image background-position adjusts.
- Touch: the spotlight should follow the last touch position too.
- Reduced motion: disable all entrance animations and show final states immediately.
5. QUALITY CONSTRAINTS
- No broken layout at any viewport width from 320px to 1920px.
- 60fps on the reveal loop.
- No console errors.
- Use semantic HTML and accessible labels.
