La Puce — The Smallest Show on Earth demo
La Puce — The Smallest Show on Earth

A whimsical, game-like web experience evoking a tiny flea circus, brought to life with lively keyframe animations, transitions, and playful interactive elements.
Category: Playful & Youth
Era: 2020s Modern
Prompt: 17.8 KB · 2505 words
# SYSTEM PROMPT — CODING AGENT BRIEF: "LA PUCE — The Smallest Show on Earth" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page specified below in a single first attempt. Every rule in this document is mandatory unless explicitly marked optional. Treat conflict resolution as follows: mandatory rules always win, with the one exception clause noted in Rule 2.3.

---

## 1. PROJECT BRIEF & THEME DIRECTION

**1.1 Concept**
- Theme: *LA PUCE — the smallest show on earth*, a contemporary flea circus. Type: **Interactive/Game**. Era: **2020s Contemporary**.
- Mood: vintage big-top showmanship rendered with modern warmth — a cream canvas, near-black ink, saddle-brown and gold accents; physics-driven motion; every element feels tappable and alive.
- Keywords: flea, circus, physics, interactive, game, animated, gradient.

**1.2 Source Palette & Required Techniques**
- Primary colors: `#16100b` (ink), `#e8dcc8` (cream), `#8a5a2e` (saddle brown).
- Secondary colors: `#1d140c` (deep umber), `#ffd98a` (gold glow), `#a0865c` (tan).
- Required effects: **Glow, Neumorphism, Gradients, Hover Effects**.
- Required CSS techniques (all must appear in the final stylesheet): **Flexbox, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Border Radius, `aspect-ratio`**.

**1.3 Copy & Content (English Only)**
- Write **all** user-facing copy in **English**, in a confident ringmaster voice ("Step right up…", "The smallest show on earth"). **Lorem ipsum is forbidden.**
- Author real, on-theme copy: Hero H1 "LA PUCE", tagline "the smallest show on earth", CTAs like "Get Tickets" / "Play the Demo"; feature titles such as "Genuine Flea Physics", "The Pocket Big Top", "Gold-Star Performers"; steps "Adopt a Star Flea → Rehearse the Routine → Raise the Curtain"; pricing tiers "Flea / Ringmaster / Big Top"; testimonials from named "performers and patrons"; FAQ questions about the show. These are creative directions — refine freely, stay witty and legible.

---

## 2. STRICT RULES & ARCHITECTURE

**2.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **Explicitly forbidden:** the `style="..."` attribute anywhere in the HTML.
- Target all design properties, layout rules, and states **only** via class or ID selectors.
- HTML stays semantic and clean (`<header>`, `<main>`, `<section>`, `<footer>`, `nav`, headings) — a full re-theme must be achievable by editing `style.css` alone.
- All animations are defined as `@keyframes` plus classes in CSS — never as inline styles or JS-driven style mutations for visual state.

**2.2 CSS Variables & Theme Tokens**
- Store every visual token in `:root` (and in theme classes/queries). Mandatory variable names: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.
- **Light mode (default) mapping:** `--bg-primary: #e8dcc8`; `--bg-secondary: #f3ead9` (derived cream tint; where a near-white is required use `#fefefe`, **never** `#ffffff`); `--text-primary: #16100b`; `--primary: #8a5a2e`; `--secondary: #a0865c`; `--text-secondary:` a darkened shade of the brown/tan family that passes ≥ 4.5:1 on `--bg-primary` (do **not** use `#a0865c` for body-size text on cream); `--glow: #ffd98a` (accents, gradients, glow shadows).
- **Dark mode mapping:** `--bg-primary: #16100b`; `--bg-secondary: #1d140c`; `--text-primary: #e8dcc8`; `--text-secondary: #a0865c`; `--primary: #ffd98a` (gold interactive accents paired with dark text); `--glow: #ffd98a`.
- Add `--text-success`, `--text-error`, `--border-error`, `--border-success` in warm-harmonized values that pass contrast in **both** themes. Derived shades beyond the six source colors are permitted only where required for contrast and theme coherence.
- **Contrast pairing is mandatory in every theme:** light backgrounds pair with dark text; dark backgrounds pair with light text — including inside buttons, badges, and toasts.
- Add supporting tokens: `--font-base`, `--font-display`, a springy `--ease-bounce` (cubic-bezier) for hop/squash motion, and neumorphic shadow pairs (light-source + dark-source box-shadows) that adapt per theme.

**2.3 Mandatory Dark Mode Support — Source-Spec Exception Clause**
- **Exception clause:** the source specification selects **Light as the primary theme**; therefore Light is the default presentation, but Dark mode is **still fully required** and must never be omitted.
- Implement dark tokens under `@media (prefers-color-scheme: dark)` and/or a `.dark` class — switching themes must require zero HTML restructuring.
- Provide a **visible theme toggle** in the header using Google Material Symbols (sun/moon), with correct `aria-pressed` and a state-reflecting `aria-label` ("Switch to dark mode" / "Switch to light mode").
- Persist the user's choice via `localStorage` (e.g., key `la-puce-theme`), falling back to `prefers-color-scheme` on first visit.
- Retune glow and neumorphic shadows for dark surfaces (gold-tinted glows, softer highlights) so the dark theme is a first-class design, not an inversion.

**2.4 Flexbox Layout & Mobile-First Alignment**
- Flexbox is the layout backbone (Tailwind flex utilities acceptable).
- **Every flex container must default to `align-items: center`** (`items-center`) unless an exception is explicitly justified (e.g., card content stacking — note the justification in a CSS comment).
- Mobile-first: single-column stacks at the base breakpoint, expanding to multi-column at `md`/`lg`. No horizontal scrolling at any width from 320px up.

**2.5 Framework Default & Tailwind CSS Integration**
- Default to **Tailwind CSS** (CDN build acceptable) or clean custom CSS organized via `@layer`/`@apply`.
- Every repeated pattern must exist as a **reusable semantic class** (`.btn`, `.card`, `.input-group`, `.section`) bound to CSS variables — no one-off utility soup for themable components.

**2.6 Typography & Icons (Google Fonts Mandatory)**
- Load Google Fonts via `<link>`: one display face for headlines (e.g., **Fraunces** or **Bungee** — chunky, contemporary circus-poster energy) and one body face (**Inter**, **Poppins**, or **Nunito Sans**). Bind them to `--font-display` and `--font-base`; no system-font identity.
- Icons: **Google Material Symbols** (Rounded variant) via the standard `<link>`, using ligature names (e.g., `star`, `check`, `expand_more`, `close`, `menu`, `local_fire_department`).
- **Forbidden:** raw inline SVG icons, local icon files, emoji-as-icons. Material Symbols has no brand glyphs — render social links with generic glyphs (`share`, `alternate_email`, `public`) or text labels.

---

## 3. PAGE STRUCTURE & SECTION SPECIFICATIONS

Build exactly these sections, in order, inside `<main>` (plus `<header>`/`<footer>`):

**3.0 Global Frame**
- A visually hidden **skip-to-content link** that appears on focus.
- Sticky `<header class="site-header">`: wordmark "LA PUCE", nav links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, primary CTA "Get Tickets". Below ~768px, a Material `menu` button toggles a dropdown panel (`aria-expanded`, `aria-controls`, closes on Esc and outside click, stacks at `--z-dropdown`). On scroll, the header gains `--shadow-sm` and a solid background via a JS-toggled class.
- Smooth anchor scrolling (guarded by `prefers-reduced-motion`), `scroll-margin-top` on every section, each `<section>` labeled via `aria-labelledby` pointing to its heading.

**3.1 Hero**
- Full-viewport flex column, centered. H1 "LA PUCE" (display face, oversized), tagline, one supporting line, two CTAs: primary "Get Tickets" and secondary "Play the Demo".
- Visual centerpiece built **entirely in CSS** (gradients, `border-radius`, pseudo-elements, box-shadows — no image assets): a flea on a spotlight-lit stage over layered radial/linear gradients (gold `#ffd98a` glow bleeding into cream and brown vignettes). The stage keeps a stable `aspect-ratio` across viewports.
- **Mandatory keyframe animation — "flea hop" with physics feel:** parabolic `translateY` arcs (multi-step keyframes or ease-out rise / ease-in fall), squash-and-stretch on landing (`scaleX`/`scaleY`), slight rotation; loop with varied timing so it feels alive. Pair with a synchronized spotlight glow-pulse keyframe.
- **Interactive/game layer:** hovering/clicking the stage makes the flea jump higher and triggers a gold glow burst; optionally a cursor-following spotlight via JS writing CSS variables — **only** under `(prefers-reduced-motion: no-preference)` and `(pointer: fine)`.
- Gradient text on the H1 is allowed only if both gradient stops maintain ≥ 4.5:1 contrast against the hero background; otherwise use solid `--text-primary`.

**3.2 Features — 3 Cards**
- Section heading + three `.card` items (1 column mobile → 3 columns at `md`): Material Symbol icon inside a neumorphic circle chip, title, 2–3 line description.
- Cards are **neumorphic** on the cream surface (dual box-shadows) with a gold glow ring on the icon chip upon hover; hover lifts `translateY(-2px)` with an elevation shift; `:focus-within` highlights the card border.
- Copy per Rule 1.3.

**3.3 How It Works — 3 Steps**
- Three numbered steps (oversized display numerals 1/2/3, Material icon, short copy), connected by a dotted tightrope line (CSS border/gradient) that runs horizontally on wide viewports and vertically on mobile.
- Steps: "Adopt a Star Flea → Rehearse the Routine → Raise the Curtain".
- Scroll-reveal entrance via IntersectionObserver toggling a transition class (opacity + `translateY`); content must be visible without JS; the effect is skipped entirely under `prefers-reduced-motion`.

**3.4 Testimonials — 3 Quotes**
- Three `.card` quotes: gold quote icon, italic quote text, a 5-star rating rendered with Material `star` glyphs (wrap in `role="img" aria-label="Rated 5 out of 5 stars"`), a circular avatar (`aspect-ratio: 1`, gradient background, initials only — no photos), name, and descriptor.
- Static trio; an auto-rotating carousel is optional only if it is keyboard-operable and pausable.

**3.5 Pricing — 3 Tiers**
- Tiers: "Flea" (free), "Ringmaster" (featured), "Big Top" (VIP). The featured tier gets a "Most Popular" badge with a gold glow, extra elevation, and a subtle scale — and it must remain fully visible without overflow at 320px (including on mobile, where it renders first or un-scaled).
- Each tier: name, large display-face price, feature list with Material `check` glyphs, and a CTA button (featured tier uses the primary variant; others secondary). All card hover/focus states per Rule 4.2.

**3.6 FAQ — Accordion**
- 5–6 themed questions using **native `<details>/<summary>`**, fully styled: summary is a flex row (question + Material `expand_more` chevron), custom token-driven focus ring, chevron rotation via transition, clear open/closed typography. A JS accordion-group behavior (opening one closes the others) is allowed but must preserve native semantics and keyboard operation; content must never depend on JS to be readable.

**3.7 Final CTA**
- Full-width band with the page's strongest gradient (cream → gold → brown, retuned for dark mode) and a large glow behind a display-face headline.
- **Email capture form** using `.input-group` (label, email input, dedicated error container) + primary button "Save My Seat".
- On submit: the button enters its **Loading** state (spinner, double-submit prevented), then a **Success** state with a confirmation message in an `aria-live` region. Invalid email shows error border + error icon + message text in the error container (`aria-live`) — never color alone.

**3.8 Footer**
- Flex layout that wraps on mobile: brand block (wordmark + one-liner), secondary link groups (Show / Company / Legal — 2–3 real links each, with hover/focus feedback), social links (generic Material glyphs or text labels), copyright line with a JS-injected current year.
- No dead visual clutter: every link is a real anchor with a meaningful accessible label.

---

## 4. COMPONENT DESIGN SPECIFICATIONS

**4.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, `--radius-md`, transitions via tokens.
- **Hover:** brightness/shadow shift + subtle gold glow, `cursor: pointer`.
- **Focus:** distinct ring via `outline`/`box-shadow` built from CSS variables, visible in both themes.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** interactions disabled, double-clicks prevented, CSS spinner or animated Google icon — button dimensions must not shift.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary `.is-success` / `.is-error` feedback styles driven by `--text-success` / `--text-error`.
- **Destructive:** `.btn-danger` must be visually distinct in **both** light and dark themes; reserve it for destructive actions only.

**4.2 Cards (`.card`)**
- **Default:** flexible flex layout, `--bg-secondary` surface, `--border-default`, `--radius-lg`, `--shadow-sm`.
- **Hover:** elevation shift + `transform: translateY(-2px)`.
- **Focus-within:** border highlight when a child link/button receives focus.
- **Loading (Skeleton):** define a `.skeleton` shimmer utility (gradient sweep keyframe) matching card anatomy in the stylesheet, so future dynamic loading never causes layout jumps.
- **Empty State:** define a structured fallback (Material icon + guidance text) for any region that could be dynamically empty.

**4.3 Forms & Inputs (`.input-group`)**
- Flex container wrapping a visible `<label>` (tied via `for`/`id`), the input, and a dedicated error-feedback container.
- **All states styled:** empty, focused (token-driven ring), filled, valid (success border + check icon), invalid (error border + icon + red text + message), disabled, read-only.

**4.4 Modal / Overlay (conditional — do not add unrequested modals)**
- Only if the design genuinely requires one (e.g., a "Play the Demo" trailer modal). If included: states for **opening, open, loading, success/error, closing** — all animated via CSS transitions; centered flex container (`align-items: center`); backdrop overlay; Material `close` icon button; keyboard focus trap; closes on `Esc` and overlay click; correct `role="dialog"`, `aria-modal`, labelling. All layered components must respect `--z-modal` / `--z-toast` / `--z-dropdown`.

---

## 5. VISUAL EFFECTS & MOTION DIRECTION

**5.1 Glow** — gold `#ffd98a` box-shadows/text-shadows on hover states, spotlight, and badges; in dark mode, glows widen (larger blur, higher alpha), tuned per theme.

**5.2 Neumorphism** — dual box-shadows (light source top-left, dark bottom-right) on cards, icon chips, and inputs, on cream in light mode and umber in dark; **always** paired with a visible border or focus ring so affordance never depends on shadow alone.

**5.3 Gradients** — hero backdrop, CTA band, avatar circles, badge fills; any gradient text must maintain AA contrast at both stops.

**5.4 Keyframe Animations (mandatory set)** — flea hop arc with squash/stretch; spotlight glow pulse; gradient shimmer/sweep (skeletons, CTA band); chevron rotation; reveal transitions. Wrap all decorative loops in `@media (prefers-reduced-motion: no-preference)`.

**5.5 Transforms & Transitions** — every interactive element transitions color/shadow/transform via `--transition-fast`/`--transition-normal`; transforms limited to `scale`, `translate`, `rotate`; never animate layout-triggering properties.

**5.6 Hover Effects** — required on every link, button, card, pricing tier, and footer link; each produces a visible, token-driven change.

**5.7 Aspect Ratio** — apply `aspect-ratio` to the hero stage, icon chips, avatars, and any media boxes so composition holds at every viewport.

---

## 6. CORE UX & ACCESSIBILITY RULES (NON-NEGOTIABLE)

- Responsive by default: fluid sizing, breakpoint-driven layout, zero horizontal overflow at ≥ 320px.
- Both themes meet WCAG AA contrast for every token pairing (text/background, button fills, icons).
- Never rely on color alone to communicate state — always pair with icons or text.
- Semantic HTML5 landmarks, a single `h1`, logical heading hierarchy, logical DOM/focus order, visible focus indicators everywhere.
- Full keyboard operability: nav, mobile menu, FAQ, forms, and any modal; `Esc` closes overlays; no mouse-only interactions.
- ARIA correctness: `aria-expanded` on disclosure controls, `aria-pressed`/`aria-label` on the theme toggle, `aria-live` for form/toast feedback, `aria-labelledby` on sections.
- Every click, hover, and submission must produce visible feedback.
- `prefers-reduced-motion` fully honored — reduced-motion users get a static, fully legible page.

---

## 7. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. The HTML references the stylesheet and a single `<script src="script.js" defer></script>` — no other inline scripts or styles.
- **JS scope (vanilla only, no frameworks, no build step):** theme toggle + persistence, mobile menu, scroll header state, accordion grouping (if used), form validation + submit simulation, IntersectionObserver reveals, optional pointer spotlight, dynamic footer year.
- **Naming:** one convention only — **BEM** (e.g., `.hero__title`, `.card--featured`, `.input-group__error`). Never mix conventions; never define classes for markup that does not exist.
- **Assets:** zero image files required — all visuals are CSS-built. Fonts exclusively from Google Fonts; icons exclusively Google Material Symbols; **no inline SVGs**.
- **Content:** all user-facing copy in English, authored on-theme per Rule 1.3 — no lorem ipsum, no unrequested placeholder sections.
- The result must be fully runnable by opening `index.html` directly in a browser.