# One-Shot Prompt

**Theme**: Antiquarian bookshop at night
**Generated**: 2026-04-09

## Prompt

Write a complete HTML, CSS, and vanilla JavaScript in a single self-contained file for an immersive, cinematic website for an antiquarian bookshop named "The Meridian Press". The tagline is "Est. 1887".

The site must feel like a living brand experience — a late night at a rare bookshop. Use a warm amber, deep charcoal, and vellum color palette. 

Technical Constraints:
- Single file: All HTML, CSS, JS in one `.html` file.
- No external images: Use CSS gradients, SVG inline art, Canvas API, or unicode/emoji symbols only.
- No CDN dependencies for core visuals (Google Fonts via @import is acceptable, use "Playfair Display" for serif and "Inter" for sans-serif).
- No frameworks: Vanilla JS only.
- Static: Must work as a static file.

Visual craft:
- Scroll-triggered reveals with Intersection Observer.
- Parallax depth on at least 2 layers (e.g., floating text fragments or dust motes moving slower than foreground).
- Typography that has character: large display type with tight tracking.
- Subtle animated texture or grain overlay via CSS (repeating SVG noise, pseudo-element with opacity).

Interaction & Atmosphere:
- Custom cursor that responds subtly (a small amber dot with a trailing ring).
- Hover states that feel intentional (transforms, slight rotations, or glowing text shadows).
- A scrolling marquee or horizontal text ticker displaying famous literary opening lines or bookbinding terms.
- Navigation that changes opacity/style on scroll.
- Hero section with a large, centered typographic statement.
- At least 5 distinct sections:
  1. Hero: "The Meridian Press" with a subtle glowing ambiance.
  2. About: The history of the shop and the craft of preservation.
  3. Collection: Featured rare manuscripts (using CSS styled cards that look like leather or vellum).
  4. Marquee: Scrolling text of quotes.
  5. Visit/Footer: Fictional address, coordinates, and a motto in Latin ("Verba volant, scripta manent").
- A moment of surprise: A canvas animation in the background of dust motes dancing in a beam of amber light.

Polish details:
- `font-display: swap` on web fonts.
- `will-change: transform` on animated elements.
- Smooth scroll behavior on `html`.
- Mobile-responsive (flexbox/grid).
- `prefers-reduced-motion` media query to disable animations.

NO TRIMMING: Write every line of code. Never truncate, abbreviate, elide, or replace code with placeholder comments.

## Notes

- Uses Canvas API for dust motes simulation
- Pure CSS SVG noise texture for vellum paper feel
- Intersection Observer for scroll animations
- Custom cursor with lerp tracking
- Hosting: Vercel / Cloudflare Pages / local