Skip to content

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. 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
  2. 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
  3. 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.