Zoetrope — Chronophotography Machine demo
Zoetrope — Chronophotography Machine

A soft neumorphic interface styled as a Victorian zoetrope device, with extruded monochrome panels, embossed dials, and smooth transform animations evoking spinning chronophotographic motion.
Category: Glass & Soft UI
Era: 2020s Modern
Prompt: 7.2 KB · 968 words
# System Prompt: Build "ZOETROPE — Chronophotography Machine" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single attempt. Follow every rule below without exception.

## 1. Theme & Design Direction

**Theme:** ZOETROPE — a chronophotography machine that captures motion into looping visual sequences.
**Style:** Neumorphism (soft-UI), 2020s Digital era, with glow accents, gradients, and animated motion motifs.
**Palette (map to CSS variables):**
- `--primary: #1c1410` (deep espresso — dark surfaces/text)
- `--secondary: #120c08` (near-black warm brown — dark backgrounds)
- `--bg-primary: #e8dcc8` (warm cream — light mode base; never pure white)
- `--bg-secondary: #e8c98f` (golden sand — neumorphic raised surfaces)
- `--text-secondary / accents: #8a795c` (muted bronze)
- `--border-default: #2c2118`
**Visual Effects:** Neumorphic dual box-shadows (light top-left, dark bottom-right) derived from the cream/gold palette, subtle glow on interactive elements, gradient text/borders, hover transforms, and a slow rotating "zoetrope strip" animation motif in the hero (CSS-only, e.g., masked gradient band or animated `background-position`).
**Typography & Icons:** Google Fonts only — use a distinctive display font (e.g., Poppins or Space Grotesk) for headings and Inter for body, bound to `--font-base`. Icons: Google Material Symbols exclusively. No inline SVGs, no local icon files.

## 2. Architecture Rules (Mandatory)

**2.1 CSS-First, Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute is forbidden in HTML.
- Target everything via class/ID selectors. HTML stays semantic and style-agnostic.
- Use one consistent naming convention (BEM recommended: `.hero__title`, `.pricing-card__feature`) across the entire deliverable.

**2.2 CSS Variables & Tokens**
Define in `:root`: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm/md/lg`, `--shadow-sm/md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`, `--font-base`, plus `--shadow-neu-out` and `--shadow-neu-in` for the neumorphic raised/inset shadows.
- Contrast pairing: every light background token pairs with a dark text token and vice versa, in both themes.

**2.3 Dark Mode (Mandatory)**
- Provide dark tokens under `@media (prefers-color-scheme: dark)` AND a `.dark` class. Dark mode uses `#120c08`/`#1c1410` backgrounds with `#e8dcc8`/`#e8c98f` text; neumorphic shadows must be recalculated for dark surfaces.
- Theme toggle button in the navbar with correct `aria-pressed` and `aria-label`; persist choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. No HTML restructuring on theme switch.

**2.4 Flexbox Layout, Mobile-First**
- Every flex container defaults to `align-items: center` unless explicitly justified otherwise.
- All sections stack into single columns on small viewports; no horizontal scrolling at any breakpoint. Use fluid sizing and `aspect-ratio` where appropriate.

**2.5 Framework**
- Use Tailwind CSS (CDN or build) with custom CSS in `@layer`/`@apply` mapping utilities back to the CSS variables and reusable classes (`.btn`, `.card`, `.input-group`). If Tailwind is unavailable, clean custom CSS with the same token system is acceptable — never mix conventions.

## 3. Sections & Content Requirements

Build these sections with real, on-theme English copy (no lorem ipsum):
1. **Navbar** — logo (Google Material Symbol + wordmark), nav links, theme toggle, CTA button.
2. **Hero** — headline, subheadline, primary + secondary CTAs, and a CSS-animated zoetrope/motion visual (rotating gradient strip or looping chronophotography motif using transforms, masks, and gradients).
3. **Features** — 3 neumorphic cards (e.g., Motion Capture, Frame Sequencing, Instant Loop Export), each with a Google Icon, title, description; hover lift (`translateY(-2px)` + shadow shift), `:focus-within` border highlight.
4. **How It Works** — 3 numbered steps with connecting visual flow, icons, and copy.
5. **Testimonials** — 3 quote cards with avatar placeholders (styled initials, no external images required), name, role, star rating via Material Symbols.
6. **Pricing** — 3 tiers (e.g., Reel / Studio / Cinema), middle tier visually elevated ("Most Popular" badge), feature lists, CTA buttons per tier.
7. **FAQ** — accessible accordion (`<details>`/`<summary>` or ARIA-compliant custom), 5–6 questions, animated open/close.
8. **Final CTA** — full-width gradient/glow band with headline and button.
9. **Footer** — logo, secondary link columns, social icons (Material Symbols), copyright.

## 4. Component State Specifications

**Buttons (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`):**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px touch target, neumorphic raised shadow.
- Hover: brightness/shadow shift, `cursor: pointer`.
- Focus: distinct visible focus ring via `outline`/`box-shadow` using tokens.
- Active: `transform: scale(0.97)`.
- Loading: disabled interaction, CSS spinner or animated Material Icon, no dimensional shift.
- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- Success/Error: temporary feedback states using `--text-success` / `--text-error`.

**Cards:** default neumorphic surface on `--bg-secondary`; hover elevation; `:focus-within` highlight; skeleton shimmer class defined for loading; empty-state layout with Material Icon + guidance text.

**Forms (newsletter signup in footer or CTA):** label + input + dedicated error container in a flex wrapper; states for empty, focused (ring), filled, valid (success border + icon), invalid (error border, red text, icon, `aria-live` feedback), disabled, read-only.

**Modal (used for "Watch Demo" or pricing details):** centered flex overlay, backdrop, Material Icon close button, open/close CSS transitions, focus trapping, `Esc` and overlay-click close, loading and success/error states, `--z-modal` stacking.

## 5. UX, Accessibility & Motion

- Responsive by default; no horizontal overflow.
- All state changes transition via `transition: var(--transition-normal)`; respect `prefers-reduced-motion` (disable zoetrope rotation and transforms).
- WCAG-sufficient contrast in both light and dark neumorphic themes; never rely on color alone for state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`); correct ARIA roles/labels on accordion, modal, toggle; logical focus order; full keyboard operability; `aria-live` regions for form feedback and toasts.
- Every click/hover/submit produces visible feedback. Destructive actions use `.btn-danger`, distinct in both themes.

## 6. Deliverables

- Files: `index.html`, `style.css`, `script.js` (theme toggle, modal, accordion, form feedback only). No inline `<script>` beyond one deferred entry-point reference. No inline CSS anywhere.
- All user-facing copy in English, written for the ZOETROPE chronophotography theme — no lorem ipsum.
- Exception clause: if any rule above conflicts with the neumorphic aesthetic (e.g., focus rings on soft shadows), keep the accessibility rule and adapt the visual treatment rather than removing it.