bas_fijneman

Spent a few hours crafting one prompt👇: A waitlist landing page that feels like stepping into another world. Codex turned it into a cinematic landing page where the scene shifts with your season and time of day. 🌍 This is how Codex worked: 🎨 GPT Image 2.0 painted the same place in 16 cinematic variations: 4 seasons x 4 times of day, golden ratio composition locked across every frame 🕰️ Page reads the visitor's timezone and local time. Winter night in NL, summer morning in NZ, same page ✏️ Two slots in the prompt: [SUBJECT] for the scene, [STYLE] for the art direction. Change either and the whole world changes with you Prompt below 👇 --- Here is the Prompt, Change the [STYLE] & [SUBJECT]: Build a standalone static HTML waitlist landing page. Use only HTML, CSS, and vanilla JavaScript. No framework, no build step. The page must run by opening index.html directly or serving it as static files. Core idea: Create one cinematic illustrated scene based on this subject: [SUBJECT / LOCATION HERE] Examples: - a floating design studio above an alien ocean - a quiet mountain village for creative AI builders - a surreal desert observatory for filmmakers - a futuristic garden workshop for founders - a dreamlike coastal city for an AI product studio Use this visual style / art direction: Image style: - Use [STYLE / ART DIRECTION HERE] when provided. - If no style is provided, use this default style: - cinematic hand-painted concept art - soft watercolor/gouache atmosphere - premium editorial composition - no text inside images - no logos - no UI inside images - no watermark - keep center/upper-center readable for overlay text - Keep all 16 images stylistically consistent with each other. - The subject/location should remain recognizably the same across all 16 images. The page should generate that same subject/location in 16 variations: MUST BE GENERATED WITH IMAGES-2.0 (CRITICAL) - 4 seasons: spring, summer, autumn, winter - 4 times of day: morning, midday, golden hour, night Composition lock (CRITICAL): The composition MUST remain recognizably the same scene across ALL 16 images. The viewer should immediately understand they are looking at the same place, just at different moments in the year. Hold these constant across all 16 images: - same camera angle - same camera height and distance - same focal length / framing - same placement of the main landmark(s) - same placement of trees, structures, mountains, water, paths, and any other persistent features - same overall composition and silhouette of the scene Only these things change: - season (foliage color, snow, leaves, blossoms, vegetation density) - lighting (direction, intensity, color temperature) - sky and atmosphere (clouds, fog, stars, haze) - mood and palette tied to season + time of day Important framing rule (for overlay legibility): - The main subject and foreground must be composed in the LOWER HALF of the image. - The UPPER portion of the image should be sky, distant horizon, mist, or atmosphere — visually quieter so an overlay can sit on top of it cleanly. - This applies to all 16 variations. Golden ratio composition (CRITICAL): - Apply the golden ratio (≈1.618 / 0.618) consistently across all 16 images so the composition feels intentional, balanced, and editorial rather than centered or symmetrical. - Place the horizon line on the upper golden ratio line — approximately 38.2% from the top of the frame (NOT on the centerline, NOT on the rule-of-thirds line). - Anchor the main landmark/subject on a golden ratio intersection point: the vertical line at ~38.2% or ~61.8% from the left, crossed with the horizon line. Pick one of these two anchor points and reuse it across all 16 variations. - Arrange secondary elements (trees, paths, water edges, structures, mountains) along a golden spiral / phi-based flow so the eye travels naturally from the anchored subject outward toward the quieter side of the frame. - The lower-half framing rule still applies, with the golden ratio refining the exact placement: the visual mass of the foreground should sit roughly at 61.8% down from the top, leaving the upper 38.2% open for overlay text. - Negative space (sky, mist, atmosphere) and visual mass (subject, foreground) should sit in a roughly 1.618 : 1 ratio. - Keep these golden ratio anchor points pixel-stable across all 16 variations so the composition stays locked while season and lighting change. Visual direction: Premium full-screen editorial landing page for a creative AI studio. The style should feel cinematic, refined, dreamy, and slightly otherworldly. Use a large elegant serif headline over a full-viewport illustrated background. The page should feel like a calm portal into another world. Fonts: - Import Google Fonts: - Instrument Serif for brand and headline - Inter for nav, body, inputs, and buttons Brand/copy: - White copy for NIGHT scenes, Black copy for the rest - Browser title: N.O.P.E. - Waitlist - Top-left brand: N.O.P.E. - Nav links: Home, Studio, About, Journal, Reach Us - Top-right CTA: Begin Journey - Hero headline split into two lines: - We Are Not Of - Planet Earth - Subtitle: Creative Solution Engineers using AI's infinite possibilities to help humans realise their dreams. - Email placeholder: you@studio.com - Submit button: Join waitlist Default links: - Define a constant named studioNopeUrl with this value: - Use studioNopeUrl as the default href for: - the brand/logo link - all nav links - the top-right CTA button - any extra visible button or CTA created on the page - The waitlist submit button should remain a real form submit button when waitlistEndpoint is configured. - If no real waitlist backend is configured, make the waitlist submit fallback navigate to studioNopeUrl instead of doing nothing. Layout: - The page must be exactly one viewport high. - No vertical scroll. - No horizontal scroll. - html, body, and the main wrapper must be locked to viewport height. - Navbar sits absolutely at the top over the background. - Hero content is centered in the viewport. - Hero content includes headline, subtitle, and waitlist form. - Desktop form is one horizontal liquid-glass pill. - Mobile form stacks input above button. - Hide nav links below 760px, but keep brand and top-right CTA visible. Background images: Create 16 high-quality 16:9 images in waitlist-scenes/: - spring-morning.png - spring-midday.png - spring-golden.png - spring-night.png - summer-morning.png - summer-midday.png - summer-golden.png - summer-night.png - autumn-morning.png - autumn-midday.png - autumn-golden.png - autumn-night.png - winter-morning.png - winter-midday.png - winter-golden.png - winter-night.png Background rendering: Use three visual layers: 1. .scene-fill: same image, full-screen cover, slightly blurred and enlarged. 2. .scene-sharp: main sharp image. 3. .scene-overlay: full-height gradient overlay. Desktop behavior: - From 1440px viewport width and up: - .scene-sharp uses background-size: 100% auto - anchor to center bottom - do not crop left/right sides Tablet/mobile behavior: - Below 1440px: - .scene-sharp may use background-size: cover - center it for better composition Overlay: - Use one scene-matched RGB color per season/time. - Gradient goes from solid at the top to transparent toward the bottom. - Non-night overlays should be lightly softened/brightened. - Night overlays should stay dark and not be brightened. Season/time logic: - Select season based on visitor date and hemisphere. - Use timezone as hemisphere fallback. - Only use geolocation if permission was already granted. - Never trigger a surprise geolocation permission prompt. Time-of-day logic using visitor local time: - morning: 05:00-10:59 - midday: 11:00-16:29 - golden: 16:30-19:59 - night: 20:00-04:59 URL overrides for testing: - ?season=spring&time=morning - ?season=summer&time=midday - ?season=autumn&time=golden - ?season=winter&time=night Waitlist form: - Use a configurable constant named waitlistEndpoint. - Use a configurable constant named studioNopeUrl. - On submit, POST JSON: - email - season - time - source - Show loading, success, and error states. - Do not reload the page after submit. - If waitlistEndpoint is empty, missing, or set to a placeholder value, redirect the visitor to after they click Join waitlist. Style details: - Liquid-glass input and buttons. - Soft shadows. - Rounded pill controls. - Elegant hover states. - No parallax. - No moving background layers. - No decorative blobs. - No cards around the hero text. Deliverables: - index.html - README.md - waitlist-scenes/ with all 16 images README should explain: - how to run locally - how to fill in [SUBJECT / LOCATION HERE] - how to fill in [STYLE / ART DIRECTION HERE] - how the 16 scene images are named - how season and local time selection works - how to test with URL params - where to change the subject/copy - where to change the style/art direction - where to change the waitlist endpoint - where to change overlay colors - where to change the default Studio NOPE link Verify: - Test desktop at 1440x900 - Test mobile around 390x844 - Confirm no vertical scroll - Confirm no horizontal scroll - Confirm all 16 URL combinations work - Confirm all visible links and CTAs point to unless intentionally configured otherwise - Confirm waitlist form loading, success, fallback redirect, and error states work