Full Website Designs · Cinematic Epic
Hollow Meridian Game Launch
A cinematic launch page for a fictional dark-fantasy game: a letterboxed eclipse hero with five parallax depths that drift on their own and follow the cursor, rising embers on canvas, a CSS 3D crown of twelve rune plates that turns forever, a lore timeline that draws itself and faction cards with expanding halos.
- Full Site
- Games
- Parallax
- 3D
- Timeline
- Landing Page
The full prompt
Show the prompt that defines the layout, motion and design language
Build a "Hollow Meridian Game Launch" React component.
CONCEPT: The launch site for a big-budget dark-fantasy game about a sun that stopped at noon for nine hundred years. It should feel like the first 30 seconds of a trailer: letterboxed, slow, molten, expensive.
LAYOUT & CONTENT:
- Hero (760px) with black letterbox bars top and bottom (56px); the nav lives inside the top bar: 'HOLLOW MERIDIAN' in spaced Bodoni caps, WORLD / FACTIONS / EDITIONS / MEDIA, 'PRE-ORDER' in gold.
- Scene layers (back to front): oxblood-to-ember sky gradient; a black eclipse disc with a glowing corona; far ridge; a floating outlined gold crown; mid ridge with a ruined arch; ember particles; a foreground cliff with a tiny cloaked figure.
- Centre: 'A STORY ABOUT A SUN THAT STOPPED' (letterspaced, gold), 'Hollow Meridian' at 128px in Bodoni Moda with 'Meridian' italic gold, buttons PRE-ORDER, ₪249 and WATCH THE TRAILER. Bottom left: '12.03.2027 / PC, CONSOLE'.
- THE RELIC: copy 'The crown remembers every hand.', three small stats (12 plates, 40+ hours of story, 3 endings) and a CSS 3D crown.
- Lore timeline on bone paper: 'Nine hundred years of noon.' and four eras (Year 0 The Sundering, Year 212 The Salt Choir, Year 640 The Drowned Crown, Year 901 You wake up).
- Factions: three full-height cards (The Salt Choir, Wardens of Ash, The Unmoored) each with a one-line creed and 'READ THE CODEX'.
- Editions: Standard ₪249 and Tidebound ₪389 with checklists.
- Footer: logo, studio credit (Lowtide Interactive, Lisbon), 'RATING PENDING'.
INTERACTIONS & MOTION:
- Parallax: each layer gets x = pointer * depth (-26 to 60px) through springs (stiffness 60, damping 18). With no pointer, useAnimationFrame drives a slow Lissajous drift (sin t/2600, cos t/3400) so the scene is never still. Layers are oversized by 120px so edges never show.
- Embers: a 1280x760 canvas of 90 particles rising at 0.3-1.0px per frame with sine sway and twinkle.
- Title enters from blur(8px) and 30px down over 1.6s; the eyebrow's letter-spacing tightens from 0.9em to 0.5em.
- Relic: 12 plates placed with rotateY(i*30deg) translateZ(222px), gold gradient, rune glyph and 'PLATE n', inside a perspective 1100 stage; the ring turns 360deg in 26s (CSS) and the whole stage tilts toward the cursor (springs 80/16, max 15deg).
- Timeline: a wavy SVG path draws with pathLength 0 to 1 in 2.2s when in view; eras fade up with 350ms stagger.
- Faction cards: two halo rings scale 1.15-1.3 and brighten on hover; the arrow slides 10px.
- Edition cards lift 8px on a spring (300/22).
DESIGN SYSTEM — Cinematic Epic:
- Void #120807, oxblood #2A0E0B, rust #6E1F14, ember #FF8A2A, gold #F4C77A, bone #EFE3CF, ash #9A8C7E.
- Square corners, 1px rules, light only from the eclipse and embers.
- Bodoni Moda 500 (roman + italic) for display, DM Sans for body and letterspaced labels.
CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Ambient loops pause or go static under prefers-reduced-motion via useReducedMotion() and a CSS media query.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up. All brands are fictional.
- Icons: lucide-react where icons are needed; illustrations are inline SVG, CSS or canvas, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices. Nothing on the page may grab focus or scroll the window.
OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.How to use this prompt
- 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
- 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
- 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.