================ ONE-SHOT BUILD CONTRACT (read first) ================ Build this in Google AI Studio "Build" in ONE shot — a complete, working app, no follow-up turns. These are hard rules, not suggestions: 1. TARGET = Full-Stack Web (Node server runtime, secrets, Firebase allowed). If you target Native Android instead, you MUST drop all server/DB/Workspace/ secrets and persist locally (Room / SharedPreferences) only. 2. PIN EVERY MODEL CALL — never let the agent auto-select (it downgrades on quota): - Reasoning / text -> gemini-3.5-flash (thinkingLevel: minimal|low|medium|high) - 4K image + legible text -> gemini-3-pro-image (image_size "4K", up to 14 refs) - High-volume image -> gemini-3.1-flash-image - Expressive TTS -> gemini-3.1-flash-tts-preview (inline tags e.g. [whispers]) - Realtime audio/video (WebSocket) -> gemini-3.1-flash-live-preview - Sandboxed agent -> antigravity-preview-05-2026 3. DIVISION OF LABOR — the model ONLY parses/extracts to a strict responseSchema. ALL math, money (store currency as integer minor units / cents), sorting, balancing and graph logic run in deterministic TypeScript/Python. The model must never compute totals, splits or balances itself. 4. responseSchema sanitation — no regex patterns, no fixed-length tuples, no format validators in the schema (they crash the OpenAPI engine). Enforce those in server-side code AFTER parsing the JSON. 5. responseSchema and google_search grounding are MUTUALLY EXCLUSIVE in one call. 6. CODEGEN — split large output into modular, single-responsibility files so no file is truncated by the output-token cap. 7. Every external call gets a graceful fallback (e.g. manual paste if a Workspace read fails). Never a silent dead end. 8. ROBUST STORAGE & CANVAS — Wrap all `localStorage`/`sessionStorage` operations (especially JSON parsing and writes) in `try-catch` blocks to prevent crashes in private windows or quota overflows. Canvas drawing elements must dynamically handle window resize and scale pixel density (`window.devicePixelRatio`) to avoid blurry graphics on retina displays. ===================================================================== # MUST OBEY — Mobile-first build requirements This app's PRIMARY surface is a mobile phone. Build it impeccably on mobile FIRST, then verify on tablet and desktop. Treat the rules below as non-negotiable hard constraints, not suggestions. ## Viewports to verify (every screen, every state) - 320 px, 360 px, 375 px, 390 px, 414 px, 480 px - 768 px, 834 px (iPad portrait / Pro 11) - 1024 px, 1280 px, 1440 px, 1920 px, 2560 px - Plus: 200% browser zoom, landscape orientation on every mobile width, iPhone with safe-area insets visible ## Hard layout rules - Mobile-first CSS. Default styles target mobile; `@media (min-width: ...)` for larger viewports. - Use `dvh` and `svh` instead of `vh` for full-height surfaces (iOS Safari URL-bar bug). - Use `clamp()` for fluid typography across all viewports. - Prefer container queries (`@container`) over media queries for component-level responsiveness. - Use `min(100%, ...)` widths so content never overflows. Zero horizontal overflow at any viewport. - Add `` to every page. - Apply `padding: max(safe-area-inset-X, fallback)` on every edge-bleeding container so notched iPhones in landscape never clip content. - Wide tables and code blocks scroll INSIDE their container (`overflow-x: auto`), never push the body. - Use `background-attachment: scroll` on mobile, not `fixed` (iOS Safari repaint bug). - Avoid `backdrop-filter` on animated elements. Use it sparingly on static surfaces only. - **Canvas Scaling**: Canvases must dynamically scale with window resize events and properly handle high-DPI screens (`window.devicePixelRatio`). Set physical dimensions (`canvas.width`/`canvas.height`) using pixel ratio and render relative to this grid, using CSS to control responsive viewport scaling. - **Robust Storage**: Every access to `localStorage`/`sessionStorage` (especially `JSON.parse` of loaded state or writes) MUST be wrapped in a `try-catch` block to handle disabled storage, private browsing mode, quota limits, or corrupted JSON gracefully. Fall back to a robust in-memory object store. ## Touch & accessibility - Tap targets ≥ 44 × 44 px on touch (Apple HIG). Increase to 48 px under `@media (hover: none) and (pointer: coarse)`. - All interactive controls reachable by keyboard with a visible focus ring; respect `:focus-visible`. - Color contrast ≥ 4.5:1 for body text, 3:1 for UI components. - All images have meaningful `alt`. Decorative images use `alt=""`. - Respect `prefers-reduced-motion: reduce` — zero animation durations under that query. - Forms validate inline; error messages are specific, not "Invalid input". - Modals: focus trap, `Esc` closes, `role="dialog"`, `aria-modal="true"`, focus restored on close. ## Performance bar (Lighthouse mobile, throttled 3G/4G) - LCP < 2.5 s · INP < 200 ms · CLS < 0.1 - JS bundle gzip < 200 KB mobile-first; lazy-load non-critical screens via `React.lazy` / dynamic imports. - No render-blocking resources above the fold. - Images: WebP/AVIF preferred, `loading="lazy"`, explicit `width`/`height` attributes (zero CLS), `srcset` for retina. - Videos: `preload="metadata"`, low-resolution poster, max 720p mobile fallback. Never autoplay with audio. - Fonts: `font-display: swap`; preload only the one used above the fold. - Smooth scroll honoured via CSS `scroll-behavior: smooth` with reduced-motion fallback. ## Pre-ship mobile checklist (the deployer MUST verify before declaring done) 1. Open at 375 px in DevTools — every screen scrolls vertically only; zero horizontal scroll. 2. Browser zoom 200% — layout reflows without overlap. 3. iPhone Safari with the URL bar visible AND landscape — no content under the home indicator; no notch clipping. 4. iPad portrait (768 px) and landscape (1024 px) — no awkward gaps; tablet-specific breakpoints land cleanly. 5. Tap every interactive element with a thumb at real-device size — every target is easy to hit. 6. `prefers-reduced-motion: reduce` — every transition / animation skips cleanly, scroll-behavior becomes instant. 7. Lighthouse mobile score ≥ 90 across all 4 categories. 8. Zero `console.error` and zero CLS shift in real-device testing on a mid-tier Android (e.g. Pixel 6a) and an iPhone SE. --- The original template starts below. All rules above apply on TOP of whatever this template specifies. --- # Build Prompt — Cinematic Musician Portfolio Paste this into Google AI Studio's **Build** function. It is self-contained — every section below is part of the instructions. _Source reference: https://lovable.dev/templates/websites/music/sable-cinematic-artist-musician-portfolio-template_ --- ## 1. Project Build a **Music** named **Cinematic Musician Portfolio**. One-line description: _Cinematic glassmorphism portfolio design_ **What it is:** This template gives you a professional artist portfolio that looks like you hired a designer and developer, but you don't need technical skills or a big budget to make it work. Showcase your music releases, announce tour dates, sell merchandise, and share video content—all on a site that works beautifully on every device. The interface uses a glassmorphism design system with frosted-glass effects and depth layering that creates a cinematic, premium feel matching high-end music production aesthetics. The technical parts are already handled. Glassmorphism interface with depth and dimension, Ken Burns slow-zoom animations on hero images, mouse parallax effects that respond to cursor movement, pill-style navigation, cinematic vignette overlays, mobile responsiveness—all done. You can focus on creating music and connecting with fans instead of wrestling with website builders or hiring expensive developers. ## 2. Target audience - Musicians and bands building their online presence and promoting new releases - Electronic and alternative artists who need visual aesthetics that match their sound - Independent artists managing their own tours, merch, and content distribution - Music producers showcasing their work and attracting collaboration opportunities - Performing artists who need a central hub for tickets, media, and fan engagement - Creative agencies winning pitches by delivering artist websites with premium cinematic aesthetics that give clients competitive advantages ## 3. Core value propositions Surface these clearly through copy, visual emphasis, and section ordering — they are the reasons users pick this product. - **Cinematic visual experience** — Ken Burns animations, parallax effects, and vignette overlays create premium music industry aesthetics. - **Complete artist hub** — Music releases, tour dates, merchandise, and video galleries managed from one professional site. - **Glassmorphism design system** — Frosted-glass effects and depth layering deliver a premium feel matching high-end production values. - **Mobile-perfect performance** — Full-screen mobile menu and responsive layouts ensure fans can browse and buy on any device. - **Launch-ready in hours** — Professional artist portfolio with all pages working—just add your content and go live. ## 4. Features to build **Product features:** Production-ready features built with modern tech stack for exceptional performance and user experience - Ken burns hero animations - Mouse parallax effects - Pill navigation system - Tour status badges - Merchandise category display - Video content library - Full-screen mobile menu - Cinematic vignette overlays - Glass card hover effects - Related content discovery - Responsive grid layouts - Smooth page transitions ## 4b. Required services & integrations List the back-end services this template needs to function. If a service is not needed, say so explicitly — silence is ambiguous. - **Auth — Optional.** Only for fan-club / paid-tier areas. - **Database — Light.** Tour dates, releases, video links, mailing-list subscribers. - **Image/video CDN — Required.** Album art, hero video, photo galleries. - **Payments — Optional (Required for merch).** Stripe checkout if merch shop included. - **Newsletter — Required.** Mailing list for tour pre-sales and release announcements. - **External APIs / third-party services:** - Spotify / Apple Music / Bandcamp / Tidal deep links - YouTube embeds for videos - Ticket vendor links (DICE, Eventbrite, Bandsintown, Songkick) **Environment variables to expose in the build:** mark every secret (API key, DB URL, JWT secret, Stripe key, S3 credential) as a clearly named `.env` variable — never hard-code. Include a `.env.example` with the full list. **Auth + data privacy reminders:** never log secrets · never store passwords in plain text · use HTTPS everywhere · hash + salt with bcrypt or argon2 · refresh tokens with rotation · honor a 'delete my account' request inside the UI. ## 5. Use cases & content to include Build dedicated UI sections or pages for each of these — they tell you what content the page must support. - **Album Release Campaigns** — Showcase your discography with dedicated pages for each release. Album artwork features subtle Ken Burns slow-zoom animations that draw attention without being distracting. Glassmorphism cards with frosted backgrounds make each release feel premium and tactile. Your discography presents like a professional record label site, making it easy for fans who discover one release to explore your full catalog. - **Tour Promotion and Ticket Sales** — Announce tour dates with detailed venue information, ticket links, and status badges that show availability, presales, or sold-out shows. The pill navigation system lets fans jump directly to tour dates from any page, and status badges use color-coded tints (white for available tickets, red for sold out, yellow for presale) that communicate availability at a glance. The responsive tour list works perfectly on mobile devices where fans are checking dates and buying tickets. Fans get dedicated pages for each show with venue descriptions that help them plan their night and direct links to buy tickets immediately. - **Merchandise Store Integration** — Display your merch catalog with high-quality product images, category badges (vinyl, cassettes, apparel, prints), pricing, and purchase links. The grid layout makes browsing feel like shopping a premium online store. Product detail pages give you space for full descriptions, sizing information, and multiple purchase options. - **Video Content Library** — Share music videos, live sessions, behind-the-scenes footage, and documentary content with a dedicated video section. Each video shows duration badges, type labels, and release dates. Video detail pages include director credits and descriptions that give context to your visual work, helping fans understand your creative process. Mouse parallax effects on side labels create subtle depth as viewers explore your video catalog, while cinematic vignette overlays frame video thumbnails with the same aesthetic treatment used in professional film marketing. ## 6. Recommended page structure Generate the following sections in this order. Adjust labels to fit the brand voice, but keep the structural intent. 1. Hero — full-bleed image / video, artist name, latest release CTA. 2. Latest release with cover art, tracklist, streaming links. 3. Discography grid. 4. Tour dates with venue + ticket link + status badges. 5. Video / media gallery. 6. Merch grid. 7. About / press kit. 8. Footer with socials and contact. ## 6b. First-visit onboarding Show a **first-visit onboarding** the first time a visitor lands on the site (detect via `localStorage` flag; do not show on return visits). Keep it short — three steps maximum — and respectful: visitors can dismiss at any time and revisit later from a `?` icon in the header. **Format:** a polished modal *or* a 3-step inline tour, designed to match the overall visual style of the template (don't bolt on a generic stepper UI). On mobile, full-screen sheet that slides up. **Required content — three slides:** 1. **What this is.** - One-line headline: "Welcome to *Cinematic Musician Portfolio* — a template for Cinematic glassmorphism portfolio design." - One paragraph (max 60 words) explaining what the template demonstrates, who it's for, and what you'd typically use it for. - Visual: a small annotated screenshot of the page they're about to see, OR a 4-frame storyboard of key sections. 2. **What to try.** - 2–3 specific things the visitor should look at to understand the design (e.g. "Open a section to see the booking flow", "Hover the gallery for captions", "Resize the window — every layout is fluid"). - Reference real elements on the actual page so the visitor learns by doing, not by reading. 3. **How to remix this.** - A direct CTA: "Use this template" → links to Lovable / AI Studio Build remix entry point. - Below: 3 short bullets on how to make it yours — e.g. • "Swap the copy in `data/content.{ts,json}` for your own." • "Replace the imagery in `/public/images/` (we use AVIF + WebP)." • "Connect your services using the env-var list in section 4b above." - Plus a quieter secondary action: "Just looking — close" (closes modal, remembers preference in localStorage, never auto-shows again). **Persistent re-entry point:** A small "?" icon in the top-right header next to the primary nav. Click → reopens the onboarding from slide 1. Tooltip: "How this template works". **Accessibility:** - Trap focus inside the modal while open - `Esc` closes - All controls reachable by keyboard, visible focus ring - Heading hierarchy: modal title is `h1` inside the dialog - `role="dialog"` + `aria-modal="true"` + `aria-labelledby` - Restore focus to the trigger (or to `
`) on close - Respect `prefers-reduced-motion` — fade in/out only, no large transforms **Copy tone:** Warm and direct, not corporate. Avoid "Welcome to your dashboard" language. Avoid all caps. Use the same voice as the rest of the template's copy. **Don't:** - Don't gate content behind the modal. The page below must be fully scrollable. - Don't show the modal again on return visits. Use `localStorage['onboarding-seen']`. - Don't include marketing CTAs unrelated to remixing (no newsletter signup, no "follow us on X" — those live elsewhere). ## 7. Design language - **Mood:** Cinematic, atmospheric, photo-led. Heavy on imagery and motion. - **Typography:** Display serif or condensed sans for artist name; clean body sans. Use a clear modular scale (e.g. 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 px) and tight tracking on display sizes. - **Palette:** Often dark or duotone. Strong contrast between text and imagery. - **Spacing:** consistent 4-px base. Generous whitespace — let the content breathe. - **Radius:** consistent token set (e.g. 6 / 12 / 20 px). Don't mix arbitrary values. - **Shadows:** subtle, layered. Avoid heavy drop-shadows. - **Imagery:** Performance photography, album art, moody portraits. Vignette overlays allowed if requested. - **Motion:** purposeful — entrance fades, hover lifts, page transitions. Respect `prefers-reduced-motion`. No bouncing splash animations. ## 8. Content generation rules - Write **realistic, specific copy**. NO Lorem Ipsum. NO generic placeholders like 'Your tagline here'. - Invent plausible names, dates, locations, prices, quotes, testimonials and product details that fit the domain. - Tone should match the audience above — confident, specific, free of buzzwords. - Headlines: punchy and concrete. No 'Empower your business' filler. - Body copy: short paragraphs (2–4 sentences). Use lists where appropriate. - All numbers, stats, and metrics must look plausible for the domain. ## 8a. Seed content (use these specific examples) Anchor the generated copy in the concrete data below. Use these names, numbers, dates, and snippets verbatim where helpful, or generate close variants that sit in the same world. **Artist identity:** Onyx · cinematic alt-pop · LA · 1 album · synced to Apple, Burberry, Squid Game S2 **Latest release:** "*Cathedral*" — LP — March 28, 2026 · 11 tracks · 42 min · 4AD **Lead single:** "*Slow Smoke*" (4:18) — Burberry FW26 campaign **Discography:** - *Cathedral* (2026) - *First Person* EP (2024) - *Demos vol. 1* (2022) **Tour (theatres + film festivals):** - May 24 — Ace Hotel Theatre, LA — tickets - May 27 — Fox Theater, Oakland — tickets - Jun 01 — Beacon Theatre, NYC — sold out - Jun 04 — Massey Hall, Toronto — tickets - Jun 22 — Royal Albert Hall, London — tickets - Jun 25 — Olympia, Paris — tickets - Jul 14 — Sundance Film Festival showcase **Press + sync strip:** - *Pitchfork* 8.4 Best New Music - *Vogue* "New Voice of 2026" - Sync placements: Burberry FW26 campaign · Apple AirPods Pro 3 launch · Squid Game S2 (Netflix) · *Slow Horses* S5 (Apple TV+) **Aesthetic notes for design:** "Glass-house aesthetic. Ken Burns slow zoom on hero. Cinematic vignette overlays. Frosted-glass cards over imagery. Mouse parallax. Tour-status pill badges (sold out red, low stock yellow, available white)." **Brand colors:** "Carbon black #0A0A0A, oxblood accent #4A0E10, ivory paper #F4EDE4." **Sync inquiries:** "sync@onyxofficial.com · film, TV, advertising" ## 9. Media & assets Every ``, `background-image`, gallery tile, thumbnail, and decorative figure on the page must come from ONE of the three buckets below. Do NOT reference any image path that is not specified here. Do NOT ship stock-photo placeholders. ### Bucket 1 — Runtime-generated via Nano Banana Pro (`gemini-3-pro-image`) Generate at build time, cache to Firebase Storage at the path listed, serve via signed URL. Each call uses model `gemini-3-pro-image`, output format `image/webp`, dimensions as listed. The visual register matches section 7 (Design language) and the specific seed content in section 8a. - **Hero image** → `/public/generated/hero.webp` · 2400×1500 · prompt: "Cinematic full-bleed photograph or live-performance still of the artist named in section 8a, in the visual register of section 7. Moody lighting, vignette acceptable. Real-photo aesthetic, 35mm or medium-format look. No on-image text, no logos, no readable festival signage. Composition leaves a clean lower-third for the artist-name wordmark." - **Album / release covers (one per release in section 8a's discography)** → `/public/generated/releases/{release-slug}.webp` · 1500×1500 · prompt: "per-release prompt: "Square album cover art in the visual register of section 7 for the release named in section 8a (album title + year). No on-image text — text will be composited in CSS. Subject derives from the release's tone (e.g. 'Glow' → soft amber light through silk; 'Slow Songs' → empty late-night diner counter)". One image per release." - **Tour-poster thumbnails (one per tour date in section 8a)** → `/public/generated/tour/{date-slug}.webp` · 1080×1350 · prompt: "per-date prompt: "Portrait-oriented tour poster background for the venue named on that date, evoking the city + venue character (e.g. Royal Festival Hall → Brutalist concrete + Thames at dusk). No on-image text — text composited in CSS."" - **Press / about portrait** → `/public/generated/about-portrait.webp` · 1200×1500 · prompt: "Editorial portrait of the artist named in section 8a, natural light, slight smile or thoughtful neutral, neutral background, suitable for an About page. No on-image text." - **Merch grid product shots (8 items)** → `/public/generated/merch/m-01.webp … m-08.webp` · 1200×1200 · prompt: "Per-item prompt: white-seamless studio shot of a single merch item — t-shirt, hoodie, vinyl sleeve, tote, enamel pin, poster, beanie, sticker pack — in the artist's palette. No on-image text. Real-photo aesthetic." - **Wordmark / monogram** → `/public/generated/wordmark.svg` · prompt: "A simple artist wordmark for the artist named in section 8a, set in the display sans/serif of section 7, no glow, suitable for tour-poster headers." Favicon export to `/public/generated/favicon-256.webp` (256×256). ### Bucket 2 — Seed assets shipped with the deliverable Static files committed to `/public/samples/` as fallbacks when generation fails. Generated once via Nano Banana 2 (`gemini-3.1-flash-image`), 1024×1024 WebP unless noted. - `/public/samples/empty-state-tour.webp` — 1024×1024 — prompt: "Minimal hand-drawn line illustration of an empty stage with one microphone stand, single-stroke outline, no colour fill." - `/public/samples/empty-state-discography.webp` — 1024×1024 — prompt: "Minimal hand-drawn line illustration of an empty vinyl sleeve, single-stroke outline, no colour fill." - `/public/samples/hero-fallback.webp` — 1600×1000 — same prompt as the Bucket-1 hero, encoded once at build and committed so the page renders identically if Gemini quota is exhausted. ### Bucket 3 — User-supplied (when the template is remixed) Onboarding modal surfaces a "Replace with your photos" hint. Uploads land via the file input → Firebase Storage path `artists/{artistSlug}/uploads/`. The build ships with Bucket-1 + Bucket-2 only; no user-supplied images at first paint. ### Hard rules - Every `` tag MUST have a `src` that resolves to a path listed above. Any `` referencing a path not in this section is a build error. - No bare `image.jpg` / `hero.jpg` / `placeholder.png` references anywhere in the code. - Icons: `lucide-react` only; use sparingly and consistently — never decorative-only. - Optimisation: WebP or AVIF, `loading="lazy"` on everything below the fold, explicit `width`/`height` to prevent layout shift. ## 10. Interactivity & states - Every interactive element has a hover, focus, active, and disabled state. - Forms validate inline and show specific error messages. - Loading states (skeletons, not spinners where possible). - Empty states with helpful next-action guidance. - Smooth scroll for in-page anchors. ## 11. Tech & responsive requirements - **Stack:** React + TypeScript + Tailwind CSS. Use functional components and hooks. - **Mobile-first.** Verify layouts at 375 px (iPhone SE), 768 px (iPad), 1024 px, 1440 px+. - Use `clamp()` for fluid typography where appropriate. - Prefer container queries over media queries for component-level responsiveness. - Use `dvh` / `svh` units instead of `vh` to handle mobile viewport chrome. - Zero horizontal overflow at any width. Zero layout shift on load. - Respect safe-area insets on iOS. ## 12. Accessibility (WCAG 2.2 AA) - Semantic HTML — `header`, `nav`, `main`, `section`, `article`, `footer`. - All interactive controls reachable by keyboard with a visible focus ring. - Color contrast ≥ 4.5:1 for body, 3:1 for large text and UI components. - All images have meaningful `alt` text. Decorative images use `alt=""`. - Form fields have associated `