Website Generation Comparison

Prompt

Build a complete, single-file, production-quality wedding website for "Alex Zhu & Natalie Fang" (October 10, 2026, Dallas, Texas). This is bespoke client work — it must read as a gallery-caliber, Awwwards-tier interactive experience, not a wedding-site-builder template. Explicitly avoid anything that resembles Cordially, WithJoy, Zola, or similar templated products: no generic "chapter card" carousels, no icon-grid detail sections, no stock countdown-timer widgets. The bar is a fusion of Vogue/Architectural Digest print editorial design with Awwwards-level interactive craft. Do not ask clarifying questions. Make confident, tasteful creative decisions for anything not specified below, and deliver the complete, working code in this response as one self-contained .html file (inline <style> and <script>, third-party libraries via CDN only). ═══════════════════════════════ ART DIRECTION ═══════════════════════════════ Reference point: a Vogue cover story or an Architectural Digest home feature — oversized editorial type, enormous confident white space, full-bleed photography treated as the hero, and captions/body copy that stay quiet and small by comparison. Typography (use exactly this hierarchy, no more than three typefaces total): - Primary display/body sans: "Bricolage Grotesque" (Google Fonts) — used for the masthead-style names, section headers, nav, buttons, and all UI text, in a wide weight range (300–800) so hierarchy comes from scale/weight, not font-switching. - Editorial accent serif: "Fraunces", italic only, used sparingly — a pull-quote, the ampersand, small kickers like "Vol. I — Savannah, Georgia." This is the one "romantic" touch; do not let it spread into body copy. - Handwritten accent: "Caveat" — used ONLY for tiny captions beneath polaroid photos, nowhere else. Large type sizes throughout (hero names should be genuinely oversized, clamp()-based fluid scaling, edge-to-edge on desktop). Color palette (cream-forward, not alternating light/dark sections — the canvas stays light throughout, dark is an accent, not a background theme): - --cream: #FAF7F2 (primary background, ~90% of the page) - --ink: #17140F (primary text) - --silver: #C8C2B6 (warm pewter — hairlines, dividers, small caps labels) - --wine: #3C1620 (deep bordeaux/oxblood "gala" accent — used boldly but sparingly: the RSVP button, one full-bleed overlay panel, the footer) No bright/saturated colors anywhere (no orange, no neon, nothing "constructiony"). No cream+terracotta pairing, no near-black+neon combo, no thin-hairline "broadsheet grid" look — these read as generic AI-template defaults and must be avoided. Photography treatment (use styled placeholder blocks since no real photos exist yet — see Technical Notes): - HERO/cover images: full-bleed, full-viewport, treated like a Vogue cover — a single dramatic image with the couple's names overlaid in huge type. - STORY images: small, tilted "polaroid" frames — white photo border thicker at the bottom (caption strip), each rotated a few degrees differently (-3deg, 2deg, -1.5deg, etc.), soft drop shadow, a handwritten Caveat caption underneath. These should feel casual and personal, deliberately the opposite of the polished hero images. ═══════════════════════════════ STRUCTURE & SCROLL CHOREOGRAPHY ═══════════════════════════════ Build on GSAP + ScrollTrigger + Lenis (smooth, weighted scrolling). Use pinned "fixed viewport" sections so scroll drives motion rather than just triggering fades. Scrolling must include BOTH vertical pinning/scrubbing AND at least two genuinely horizontal (left/right) scroll-within-pin sequences — not just vertical fades. Spend one bold "load-bearing" motion moment and keep everything else disciplined and quiet around it — don't scatter effects everywhere. 1. LOADER — Not a blank screen. A magazine-cover-style entrance: the couple's initials/monogram assembling with a staggered reveal, a thin rule drawing in, a small "Issue No. 01 — Savannah, Georgia" kicker line, then a curtain-style exit revealing the hero. 2. HERO — Full-bleed placeholder cover image with "ALEX & JORDAN" in massive Bricolage Grotesque type overlaid, small Fraunces-italic kicker (date/location). Pin this section; as the user scrolls, split "Alex" and "Jordan" apart (sliding to opposite edges) while the ampersand scales dramatically, fading to reveal the next section — scrubbed, not jump-cut. Disable the pin on mobile in favor of a simpler scrubbed fade/scale (avoid mobile viewport-height pin issues). 3. OUR STORY — Reimagine as a horizontal, pinned "editorial filmstrip": the section pins vertically while a wide horizontal track of content scrolls left-to-right, alternating full-bleed story images with small tilted polaroids and short captions (5-6 moments, e.g. how they met, moving in, the proposal, planning, the wedding day). This satisfies the horizontal-scroll requirement directly — vertical scroll input drives horizontal motion of the filmstrip. 4. THE DETAILS — A second horizontal pin-scroll sequence: 4 cards (Ceremony, Reception, Attire, Travel & Stay) that track horizontally across the pinned viewport as the user scrolls vertically. Include a subtle parallax layer behind the cards (thin line-art, architectural or botanical silhouette, moving slower than the foreground cards) for depth. On mobile, disable the horizontal pin and fall back to a simple vertical stack with scrubbed fade-ins. 5. RSVP — Standard vertical section (text-heavy — do NOT make this horizontal). Elegant form: Full Name, Email, Attending (styled pill/radio choices — "Joyfully Accepts" / "Regretfully Declines"), Number of Guests, Meal Preference, optional note. On submit, prevent default and use vanilla JS + GSAP to morph the form into an animated success card (fade out form, animate in a hand-drawn-style checkmark via SVG stroke-dashoffset, personalized "Thank you, [First Name]" message). 6. FOOTER — Full-bleed closing image, couple's monogram, date/location, a closing line, deep wine-colored accent panel. Fill in reasonable placeholder venue names/times/story beats (clearly generic, e.g. "Historic Garden Chapel," "4:00 PM") — this is a placeholder, not real venue research. ═══════════════════════════════ TECHNICAL REQUIREMENTS ═══════════════════════════════ - Single HTML file: inline <style>, inline <script>, no build step. - Load GSAP core + ScrollTrigger plugin and Lenis via CDN (cdnjs or unpkg) using current stable version numbers — verify the URLs resolve if you have web access; otherwise use well-established versions (e.g. GSAP 3.12.x, Lenis 1.1.x) rather than guessing an unpublished one. - Standard Lenis+ScrollTrigger sync pattern: drive Lenis via gsap.ticker, call ScrollTrigger.update on Lenis's scroll event. - No external image dependencies. Since no real photos exist, render every "photo" as a styled placeholder (a tasteful gradient/duotone block sized and framed exactly like the real image would be — full-bleed div for heroes, polaroid-framed div for story shots) with a clear HTML comment or data-attribute marking exactly where a real photo URL/src should be dropped in later. - Use gsap.matchMedia() to give mobile a simplified, non-pinned experience for anything that pins or scrolls horizontally on desktop — usability over spectacle on small screens. - Respect prefers-reduced-motion: shorten/skip the loader and skip pinning for users who request it. - Reasonable color contrast: use --ink on --cream for body text, and a darker variant for any small text sitting on the --wine accent. - Include a <noscript> fallback with the couple's names, date, and location as plain text. - No page-reload on RSVP submit; no backend — note in a code comment that a real submission endpoint (Formspree, EmailJS, custom backend, etc.) needs to be wired in before sending this to real guests. Ship the entire file now.

A system prompt was added to support web rendering