The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Movie Rating Community

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build [BRAND], an original static movie-rating community for [AUDIENCE]. The default invitation is [TAGLINE], the featured film is [FEATURED_FILM], the signed-in sample member is [PROFILE_NAME], and the editorial ranked list is [RANKED_LIST_NAME]. Provide a discovery home, movie detail routes, a combined short-take and long-essay review feed, a filterable 100-film ranked canon, want-to-watch and watched libraries, and a personal taste dashboard. All films and people are fictional; the interface must feel like a useful product, not a landing page with disconnected mockups.

- Audience: Write concise, welcoming US English for [AUDIENCE]. Assume visitors understand film titles and star ratings but do not need a tutorial, account, or backend. Favor specific observations about mood, craft, pacing, and rewatching over generic praise or marketing language.
- Goal: Let a visitor discover a film, inspect its aggregate five-star distribution, read both kinds of reviews, rate it, place it on a list, vote a review helpful, and immediately see the personal library and taste profile update. Keep every route interactive at 1440×900 and 390×844 with zero console errors and no external service.
- Tone: Literate, warm, opinionated, and unhurried: an independent film journal translated into a precise community app. Use exact film details and memorable review copy, not hype, awards language, engagement bait, streaming claims, or calls to sign up.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Vanilla CSS + hand-built SVG
- Libraries: React 18 and React DOM (MIT), Vite 5 (MIT), TypeScript 5.6 (Apache-2.0), lucide-react (ISC), @fontsource/instrument-serif (OFL-1.1), @fontsource/dm-sans (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create package.json with scripts dev = vite, build = tsc --noEmit && vite build, and preview = vite preview. Use React 18.3, Vite 5.4, TypeScript 5.6, lucide-react 0.468.0, and the three listed Fontsource packages; install and bundle every dependency locally.
  - Configure vite.config.ts with base './', build.outDir 'dist', build.sourcemap false, build.target 'es2020', and minification enabled. Use one index.html entry and hash-based navigation; do not copy src/ into dist/.
  - Organize src/content.ts for every variable, visible string, film record, review, seed list, and chart label; src/data/catalog.ts for deterministic derived metadata; src/state/community.tsx for shared state; src/components/ for the shell, film cards, rating input, charts, review cards, filters, and dialogs; src/pages/ for the six route views; src/App.tsx for routing; and src/styles.css for tokens and responsive rules.
  - Use a small hash router supporting '#/', '#/film', '#/film/<slug>', '#/reviews', '#/rankings', '#/library', and '#/profile'. All hrefs use './index.html#/…' form. Opening '#/film' without a slug displays the film selected by FEATURED_FILM, falling back to the first catalog record if it does not match. Unknown film slugs also show that first film with a plain notice rather than an empty page.
  - Derive BRAND_SLUG locally from BRAND with lowercase ASCII, spaces to hyphens, and unsafe characters removed; use it only for internal keys or ids, never as an external package or URL. Set lang en, the plain document title to the current view plus [BRAND], and create an original local frame-mark favicon.svg.
  - Keep one canonical catalog of exactly 100 film objects and one review collection. Derived counts, charts, library views, search results, profile metrics, and related films must read from shared state rather than duplicated hard-coded numbers. Use stable seeds only; never call Math.random during rendering.
  - Wrap localStorage access in try/catch because a sandboxed demo can reject storage. Use versioned key '[BRAND_SLUG]-community-v1' for personal ratings, list state, helpful votes, written reviews, and drafts. If storage fails, retain the same state in memory for the session without throwing or showing a technical error. Seed the sample profile only when no saved state exists.
  - Self-host Instrument Serif 400, DM Sans 400/500/600/700, and IBM Plex Mono 400/500 through Fontsource Latin subsets. Use no chart, router, animation, form, or state-management dependency. Build charts as labeled SVG/HTML composites with textual values available outside the graphics.
  - Write ASSETS.md at the project root listing all six generated images with their source URLs, target paths, and required generated-image credit, plus Lucide ISC and each Fontsource package with author, package URL, and OFL-1.1 license. Download the six images into public/posters/ during the build task and use relative paths; never hotlink them at runtime.
  - Use a single React community provider for ratings, watched and want-to-watch states, helpful votes, local reviews, filters, search, and mobile navigation. Mutually exclude watched and want-to-watch; setting a star rating also marks the film watched. Offer explicit buttons for removing a rating or moving a film between lists. Keep personal changes when navigating and after reload when storage is available.

## Variables
- [BRAND] — Community name (default: "Fableframe"). An invented one- or two-word name for the wordmark, document title, profile welcome, and storage-key prefix; never a real film or community brand.
- [TAGLINE] — Home invitation (default: "Rate the films. Find your people. Know your taste."). A concise original invitation of at most 64 characters; use it as the home H1 and adapt supporting copy naturally when it changes.
- [AUDIENCE] — Community audience (default: "curious film lovers"). A short lowercase audience phrase used in the home eyebrow and supporting copy.
- [FEATURED_FILM] — Featured film title (default: "The Cartographer's Dream"). One of the six art-directed catalog titles: The Cartographer's Dream, The Night Orchard, Static Between Stars, A Room for August, Salt on the Projectionist's Hands, or The Clockwork Heron.
- [PROFILE_NAME] — Sample member name (default: "Mara Ellison"). An invented member name used for the profile greeting, initials, local reviews, and library labels; never a real person.
- [RANKED_LIST_NAME] — Ranked canon name (default: "The Hundred"). A short original name for the 100-film ranked list, used in navigation and the rankings heading.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/movie-rating-community in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Canvas `#F3F0E8` — Main page background and generous editorial margins.
- Paper `#FFFDF7` — Review cards, filters, dialogs, and raised content surfaces.
- Ink `#17262E` — Primary text, dark navigation band, and primary button fill.
- Secondary Ink `#667178` — Metadata, helper text, and inactive navigation; never use below readable contrast.
- Hairline `#D7D2C5` — Dividers, table rules, input borders, and chart tracks.
- Coral `#C85F49` — Editorial accents, active underlines, selected chips, and key links; pair with Paper for large text only where contrast passes.
- Ochre `#D49A3A` — Star ratings, rank markers, and small data highlights with Ink text on filled controls.
- Sage `#83927D` — Watched states, taste bars, and quiet secondary data.
- Night Blue `#203943` — Featured-film panel and dark footer surfaces.
- Mist `#E8E5DC` — Hover fills, selected neutral filters, and subtle chart backgrounds.
- Focus Teal `#236B70` — Visible keyboard focus outline and accessible interactive emphasis.

### Typography
- Wordmark, home H1, page titles, film titles, and large editorial quotations: Instrument Serif (OFL), weights 400
- Body copy, review text, buttons, navigation, filters, form fields, and profile summaries: DM Sans (OFL), weights 400/500/600/700
- Rank numbers, years, runtimes, rating values, vote counts, chart ticks, and filter counts: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use a 4px base unit. The shared content width is min(1440px, calc(100vw - 96px)) on desktop with 48px side gutters, 24px card gaps, 32px between major groups, and 72px between home sections. Header height is 72px. Page title blocks use 36px top and 28px bottom padding. Film cards use 12px internal padding; review cards 24px; filter rows 16px. At 390×844 use 20px gutters, 48px section spacing, 16px card padding, 12px gaps, and a 60px header. H1 uses clamp(44px, 5vw, 72px) at 0.98 line height on desktop and 42px at 1.0 on mobile; page titles are 48px desktop and 38px mobile. All touch targets are at least 44×44px and no layout causes horizontal page overflow.
- Radius: Use 2px for rank badges and tiny labels, 6px for buttons and inputs, 10px for film and review cards, 16px for the featured-film composition and large dashboard panels, and fully round shapes only for avatar initials, status dots, and compact icon buttons. Favor hairlines and flat color over floating glass or heavy shadows.
- Motion: Render the featured film, posters, core metrics, and first reviews immediately; no splash screen, autoplay carousel, loading skeleton, or blocking intro animation.
- Motion: Route changes use a 160ms opacity fade with at most 6px upward movement and scroll to the top unless preserving a deliberate back-navigation position. Reduced-motion mode removes translation and makes transitions immediate.
- Motion: Film-card hover lifts the whole card by 3px and scales only its artwork to 1.025 over 180ms; title color changes to Coral. Touch devices retain visible labels and actions without depending on hover.
- Motion: Rating bars animate from their current width to the new width over 240ms after a personal rating changes. Helpful votes and list buttons give immediate text/state feedback plus a 160ms highlight, without layout shift.
- Motion: Filter result changes crossfade over 140ms and announce the result count through a polite live region. Dialogs and the mobile menu use 160ms opacity with 8px vertical movement, focus trapping, Escape close, and focus return.
- Motion: Use IntersectionObserver only for subtle 12px section reveals below the first screen. Under prefers-reduced-motion, reveal all content immediately, stop chart animation, remove hover movement, and preserve every state change.
- Imagery: Use six original wordless cinematic gouache-and-screen-print poster illustrations as the high-craft visual system for the featured catalog: The Cartographer's Dream, The Night Orchard, Static Between Stars, A Room for August, Salt on the Projectionist's Hands, and The Clockwork Heron. They share warm ivory, inky navy, muted coral, ochre, dusty sage, matte grain, and soft diffuse theatrical light. Display film titles and ratings as HTML outside the artwork; never ask the image generator for lettering. For the other 94 films, create deterministic original SVG posters from each film's slug using the same palette and distinct geometric scene recipes keyed by genre—horizons for drama, orbital arcs for science fiction, windows for mystery, intersecting paths for romance, offset circles for comedy, topographic lines for adventure, organic shapes for animation, frames for documentary, shadows for horror, and converging lines for thriller. These are authored posters, not gray placeholders. No real people, recognizable actors, existing film imagery, logos, text embedded in images, or recognizable landmarks. Lucide supplies familiar interface icons only.

## Pages & Sections
### Discover — [BRAND] (`#/`)
1. **Shared application shell and exact content model** — The header contains an original four-corner film-frame SVG, [BRAND], and links Discover, Reviews, [RANKED_LIST_NAME], My Library, and Taste Profile. A desktop search field has placeholder 'Search the 100-film catalog…' and opens a keyboard-accessible results list with title, year, genre, and average rating; '/' focuses it when no field is active and Escape closes it. The active route uses a Coral underline and aria-current. The mobile header retains brand, search, and a labeled Menu button that opens a drawer with every route. Footer copy is 'A slower place for film conversations.' with links Discover, Reviews, [RANKED_LIST_NAME], My Library, Taste Profile, and the optional [CREDIT] link. Keep every visible string in src/content.ts. Default home eyebrow is 'A film diary for [AUDIENCE]'; H1 is '[TAGLINE]'; body is 'Keep a living shelf of what you have seen, trade notes with people who notice the details, and let your own ratings—not a trending feed—shape what comes next.' Primary CTA is 'Explore the community' and secondary CTA is 'Open my film diary'. Rewrite variable-dependent copy for alternate values without retaining Fableframe, Mara Ellison, or The Hundred.
   Layout: Use a sticky 72px Ink header with full-width inner container and 48px desktop gutters. Desktop order is brand, five compact navigation links, 260px search field, then the sample member monogram derived from PROFILE_NAME. Mobile uses a 60px header with brand, search icon button, and Menu; the drawer is 320px maximum width and full-height on the right. Footer is Night Blue with 40px vertical padding and a simple two-row mobile layout. Do not add sign-in, pricing, promotional banners, or a second marketing header.
   Motion: Search results appear with a 120ms fade and support arrow keys, Enter, and Escape. Mobile drawer transitions follow Design motion, lock background scroll while open, and return focus to Menu on close.
2. **Catalog and review data** — Create exactly 100 original film titles in ten genre groups of ten, then interleave the groups by taking one title from each group per rank so the canon mixes genres. Drama: The Cartographer's Dream; A Room for August; The Night Orchard; The Last Tram to Bellwether; Porcelain Winter; The House on Aster Lane; A Choir of Empty Rooms; Small Hours at Meridian; Letters from a Paper Boat; Where the Violet Road Ends. Science fiction: Static Between Stars; The Clockwork Heron; Glass Horizon; Orbital Radio Hotel; The Tenth Lunar Winter; Machines of the Mild Sun; A Field of Artificial Stars; Instruction Manual for Tomorrow; The Cloud Archivist; Children of the Low Orbit. Mystery: The Bell at Blackwater; A Study in Salt; The Missing Hour Museum; No One Saw the Rain; The Eleventh Alibi; A Key for Every Stranger; The Quiet Witness Club; Footprints in the Blue Hour; The Unfinished Confession; A House of Locked Windows. Romance: Love at the Summer Terminal; The Geometry of Goodbye; Two Tickets to Elsewhere; The Letterbox Garden; A Waltz for Insomniacs; Meet Me at the Meridian; Paper Moon Over June; The Last Ferry to You; An Almost Perfect Detour; Recipe for Second Chances. Comedy: The Accidental Auction; My Neighbor the Astronaut; A Serious Case of Pigeons; The Understudy's Day Off; How to Lose a Lighthouse; The Wrong Suitcase Society; Dinner with Twelve Strangers; The Amateur Ghost Bureau; A Very Polite Heist; The Mayor of Nowhere. Adventure: Salt on the Projectionist's Hands; The River Beyond Maps; The Atlas of Hidden Islands; North of the Sleeping Sun; The Valley of Paper Cranes; The Last Desert Radio; A Compass for the Lost; The Storm Carriers; Beneath the Emerald Canopy; The Mountain That Moved. Animation: The Umbrella Collector; Moss and the Midnight Train; The Little Comet Bakery; A Whale in the Attic; The Paper Fox Parade; The Garden of Borrowed Colors; The Moon's Repair Shop; The Clockwork Seed; A Pocketful of Thunder; The Starlight Tailor. Documentary: The Last Neon Repairman; Voices of the Night Market; The Museum of Lost Sounds; Bread at First Light; The Secret Life of Crosswalks; Makers of the Morning; The River Remembers Us; One Hundred Small Gardens; The Night Shift Orchestra; The Hands That Mend. Horror: The House That Listens; A Knock at Blue Hour; The Hollow Photograph; The Guests Below; When the Streetlights Sleep; The Thirteenth Window; A Lullaby for the Walls; The Uninvited Garden; The Shape Behind the Rain; The Attic at Mill House. Thriller: The Silent Exchange; A Passenger in Room Nine; The Last Train West; The Courier's Second Shadow; Thirty Minutes to Midnight; The Glass Alibi; A Trap for the Honest Man; The Stranger's Notebook; No Exit from Eden; The Vanishing Platform. Slugify titles deterministically and never substitute real films.
   Layout: This is a data section, not visible page chrome. Store rank from 1 to 100 after interleaving. For rank i starting at 0, assign year = 1968 + ((i × 7) mod 57), runtime = 84 + ((i × 13) mod 73) minutes, and ratingCount = 860 + ((i × 7919) mod 48000). Choose one of ten explicit five-to-one-star percentage patterns from [[68,21,7,3,1],[61,27,8,3,1],[74,17,6,2,1],[57,29,9,4,1],[65,22,8,4,1],[54,30,10,4,2],[70,19,7,3,1],[59,26,10,4,1],[63,24,8,4,1],[52,29,12,5,2]] using i mod 10. Convert percentages to integer counts with the largest-remainder method so counts total ratingCount exactly, then compute average from those counts to two decimals. Rank remains editorial rank; rating sort uses computed average. Give every film a unique one-sentence logline in content.ts and a primary plus one secondary genre. Do not use current dates or external data.
   Motion: Data derivation is synchronous and deterministic. No artificial loading delay, randomization, or changing counts on reload.
3. **Art-directed films and sample community** — The six art-directed films keep these exact defaults. The Cartographer's Dream — 2023, 128m, Drama/Mystery, director Elian Voss: 'An insomniac mapmaker discovers a country that appears only in other people's dreams.' A Room for August — 2019, 97m, Drama, director Sora Bell: 'A retired stage painter spends one summer restoring an apartment for a tenant she has never met.' The Night Orchard — 2021, 106m, Drama/Romance, director Mina Quell: 'Two estranged sisters return to sell an orchard and find their mother's unfinished harvest ledger.' Static Between Stars — 2024, 114m, Science fiction, director Rowan Ives: 'A late-night radio operator on a relay station receives broadcasts from a future that may never happen.' Salt on the Projectionist's Hands — 2018, 121m, Adventure/Drama, director Tavi Ren: 'A traveling projectionist follows a coastal road to return a lost reel to a village missing from every map.' The Clockwork Heron — 2022, 104m, Science fiction/Animation, director Imani Wren: 'A shy repair apprentice follows a mechanical bird through a marsh where forgotten machines migrate each winter.' Override derived years and runtimes with these values. Seed each of these six with at least three distinct short takes and two substantial essays, all by invented reviewers with helpful counts, star values, and 80–180-word essay bodies. For The Cartographer's Dream include short take 'The final map is still living in my head.' by Nico P., five stars, 184 helpful; 'Quiet, strange, and unexpectedly funny.' by June R., four stars, 96 helpful; and 'Worth watching for the paper-city sequence alone.' by Ellis K., five stars, 73 helpful. Include essays 'The map is not the destination' by Amara Vale, five stars, 328 helpful, and 'A puzzle box with a pulse' by Theo Marr, four stars, 192 helpful. Never copy real criticism or use real reviewer identities.
   Layout: Data-only section. Seed [PROFILE_NAME] with 47 watched films, 18 want-to-watch films, 12 authored reviews, a personal average near 3.9, and favorite genres Drama, Science fiction, Mystery, and Documentary. Store exact seed film slugs so library and profile numbers reconcile. Derive initials from the variable name. Sample community avatars use two-letter monograms with assigned flat colors, not remote portraits. No visible 'sample data' or 'demo user' disclaimer is needed because the entire world is intentionally fictional.
   Motion: Personal changes update all dependent values in one React render. Seeded counts never reset during navigation.
4. **Featured-film discovery hero** — Left side contains the eyebrow, H1, body, and two CTAs from the shared content model, plus a compact search prompt 'Not sure where to begin? Search by title, genre, or mood.' Right side is a rich featured-film composition for [FEATURED_FILM]: its poster, genre/year/runtime, title, logline, computed community average and rating count, a five-star preview, and the CTA 'View film'. Add one layered short-take card quoting a seeded review with reviewer and helpful count, and a small 'Tonight's queue' strip with the first three want-to-watch titles from the sample profile. Primary CTA links to '#/reviews'; secondary links to '#/library'; View film links to the selected film's detail route. Do not add Play trailer, streaming-provider buttons, or a generic marketing illustration.
   Layout: At 1440×900 the hero is a 620px-max-height two-column grid, 5fr text to 7fr visual, with 48px gap and 32px vertical padding. Text is vertically centered with a 12px eyebrow, large serif H1, 18px body, and two 48px buttons. The Night Blue visual panel fills its column with 24px padding: a 250×375px poster at left and film details at right, the short-take card overlapping the poster's lower-right by 32px without covering its title, and the queue strip along the bottom. On mobile, stack a compact text block then the visual panel; use a 112×168px poster beside title and metadata, place review and queue below without overlap, and keep the View film button visible within roughly the first 844px. Never crop the poster into an unrecognizable strip.
   Motion: The complete composition is visible on first paint. Only the review card has a subtle 160ms entrance from 8px below; reduced-motion users see it immediately. Switching routes does not animate the poster off screen.
5. **Tonight's selection** — Heading 'Tonight's selection' with dek 'Six original films, six reasons to stay up a little later.' and text link 'Browse the full canon' to '#/rankings'. Render the six art-directed films as reusable film cards: poster, title, year and primary genre, average with Ochre star, and a bookmark button labeled 'Want to watch' or 'Saved to want to watch'. Clicking artwork or title opens its film route. Bookmark state syncs everywhere and must not trigger navigation.
   Layout: Use six equal columns at 1440px with 16px gaps and 3:4 posters; below 1180px use three columns; below 640px use a two-column grid with 12px gaps. Titles wrap to at most two lines but actions stay in normal flow, never absolute over text. Include 44px bookmark targets with visible accessible names. Section spacing follows Design and the first row is partially visible at the desktop fold if height allows.
   Motion: Film hover follows Design. Bookmark updates show 'Added to want to watch' or 'Removed from want to watch' in a polite status region and do not display a blocking toast.
6. **Community notebook and personal bridge** — Left column heading 'From the community notebook' presents one featured long essay for the current featured film with title, full reviewer name, star rating, 2–3 sentence excerpt, helpful count, and 'Read the full essay'. Beneath it place three compact short takes from three different films. Right column is 'Your film diary, so far' for [PROFILE_NAME], with three reconciled metrics Watched, Want to watch, and Reviews; a four-row genre affinity preview; and link 'See your taste profile'. A final quiet quote strip reads 'Good films end. Good conversations do not.' with CTA 'Write a review' linking to '#/reviews?compose=1' or the equivalent hash query parsed by the app.
   Layout: Use a 7fr/5fr grid with 24px gap. Essay card is Paper with 24px padding and a Coral left rule; short takes are separated by hairlines rather than nested cards. Personal panel is Mist with 16px radius and 24px padding, three metric columns, and four labeled Sage progress bars. At mobile stack essay, short takes, then personal panel; keep review text at 16px with 1.65 line height and no horizontal carousels.
   Motion: Helpful buttons update once per member per review and remain pressed after reload when storage works. Section reveal follows Design; no auto-rotating reviews.

### Film detail — [BRAND] (`#/film`)
1. **Film overview and rating distribution** — For '#/film/<slug>', show the selected film or the FEATURED_FILM fallback. Include breadcrumb 'Discover / [film title]', poster, title, director, year, runtime, primary and secondary genre, logline, community average, formatted rating count, and personal action buttons 'Want to watch', 'Watched', and a five-star input labeled 'Your rating'. Add a heading 'How the community rated it' and five horizontal bars in order 5, 4, 3, 2, 1 stars with exact counts and percentages. A small line reads 'Your rating is included in this distribution' only after the visitor rates it. Removing a personal rating restores the prior aggregate exactly. Related actions include 'Write a short take' and 'Write an essay', both focusing the appropriate editor below.
   Layout: Use a 320px/minmax(0,1fr)/360px desktop grid with 32px gaps: poster left, film metadata center, distribution panel right. The poster is full-width 3:4 with 10px radius. Center title is 56px Instrument Serif and metadata uses IBM Plex Mono 12px. Personal star buttons are 40px desktop and 44px mobile with visible hover/focus preview and text value '4 out of 5'. Distribution panel is Paper with 20px padding; each row has a 48px label, flexible 12px track, and 72px count. Below 1100px use poster plus content in two columns and distribution full-width below; at 390px use a 120px poster beside title and essential metadata, with actions and distribution below. Never overlay rating controls on the artwork.
   Motion: Stars preview on hover and keyboard focus, commit on click or Enter/Space, and support left/right arrows. Bars animate from previous values for 240ms. List actions update their pressed state immediately and reduced-motion users get instant changes.
2. **Short takes and long essays** — Heading 'The conversation' introduces tabs 'Short takes' and 'Long essays', with counts derived from the current review list. Short takes are concise 280-character-maximum reactions with monogram, reviewer, star rating, text, helpful button, and a collapsed report icon that does nothing beyond showing 'Thanks for the feedback' locally. Long essays show title, reviewer, rating, full 80–180-word body, helpful button, and 'Collapse essay' after expansion. Sort options are 'Most helpful' and 'Latest added'; Latest added puts locally authored entries first without inventing calendar dates. Each helpful vote toggles only once for the local member and updates the displayed count.
   Layout: Place tabs and sort in one bordered control row. Short takes use a two-column desktop grid and one-column mobile grid. Essays use one readable column with maximum 760px width and 18px/1.7 body text. Keep the review collection in shared state so the same entries appear on home, film, and reviews routes. Tab panels have accessible roles and keyboard navigation; no content is hidden behind hover.
   Motion: Switching tabs crossfades the list over 140ms and preserves each tab's sort. Helpful uses ThumbsUp plus text 'Helpful · 184', changing to 'Helpful given · 185' without shifting adjacent controls.
3. **Local review editor** — Use a segmented control for 'Short take' and 'Long essay', plus a visible five-star personal rating input. Short-take fields are one textarea with label 'What stayed with you?', live 280-character count, and submit 'Publish short take'. Long-essay fields are 'Essay title' with 80-character maximum and 'Your essay' with 2,000-character maximum plus a 40-character minimum, and submit 'Publish essay'. Include 'Preview' and 'Edit' modes; preview uses the final review-card typography. Submission adds a local review under [PROFILE_NAME], saves it with the community state, closes no other content, and shows confirmation 'Your review is on this film page.' Empty or invalid fields receive specific inline messages, not alerts.
   Layout: The editor is a Paper panel with 24px padding below the review list, maximum 860px. Desktop rating and mode controls share a row; textareas are full width, 120px for short take and 240px for essay. Mobile stacks controls and keeps submit full width. Save the current draft on input and offer 'Discard draft' with a simple inline confirmation. Do not send data anywhere or claim the review was posted to a server.
   Motion: Preview crossfades in over 120ms. Successful submission inserts the review at the top under Latest added and moves focus to its heading; reduced-motion mode is immediate.
4. **More like this** — Heading 'More like this' and three film cards selected deterministically from the same primary genre, excluding the current film, ordered by editorial rank. Each card explains one short reason such as 'Similar quiet mystery' or 'Another hand-built world', using actual genre/tone tags from content.ts. Include 'See the full canon' to '#/rankings'.
   Layout: Three equal columns on desktop and a single three-column horizontal scroll-snap rail on mobile with 78% viewport-width cards, labeled previous/next buttons, and no page-level horizontal overflow. Cards reuse the same actions and poster system as home.
   Motion: Rail controls scroll one card at a time with native smooth behavior unless reduced motion is requested. Bookmark and rating state remain synchronized.

### Community reviews — [BRAND] (`#/reviews`)
1. **Review desk introduction and filters** — Eyebrow 'THE REVIEW DESK'; H1 'Notes worth arguing over.'; body 'Quick reactions for the walk home. Longer essays for the films that need more room.' Provide search placeholder 'Search reviews or film titles…', type chips All, Short takes, Long essays, genre select All genres plus all ten genres, and sort Most helpful / Latest added. Result copy is '{n} reviews across {m} films'. A primary button 'Write a review' opens the composer with a film selector defaulting to FEATURED_FILM. If the hash query requests compose=1, open it on entry.
   Layout: Title block max-width 760px followed by a sticky-on-desktop filter bar with 12px gaps and Mist background. Search takes minmax(240px,1fr); chips remain visible rather than hidden in a dropdown. On mobile the bar is not sticky, chips wrap to two rows, selects are full width, and all fields are at least 44px high.
   Motion: Filtering updates count and list immediately with the standard result fade. Clear filters appears only when a filter is active and resets without reloading.
2. **Unified review feed** — Render a mixed feed of short takes and essays from all six art-directed films plus locally authored reviews for any film. Every card shows film title and links to its detail route. Short takes show one compact paragraph; essays show title, substantial excerpt, star rating, and 'Read full essay' expansion. Include helpful voting and a film poster thumbnail. Empty results show 'No reviews match those filters yet.' with 'Clear filters', never a broken blank panel.
   Layout: Use an 8fr/4fr grid: feed left and 'Reviewing this week' rail right. Feed cards are Paper with 20px padding and 16px gaps. Right rail lists the six art-directed films with review counts and average ratings, plus a small note 'Both quick notes and patient essays belong here.' At mobile use one column and move the rail below the first six feed cards or behind a 'Browse reviewed films' disclosure.
   Motion: Helpful and expansion states behave exactly as on film pages. No infinite scroll; use a 'Show more reviews' button adding six at a time with focus retained on the button.
3. **Community composer** — Opening Write a review reveals a dialog using the same validation and fields as the film editor plus a required searchable 'Film' select covering all 100 titles. The dialog title is 'Add to the conversation'. Submit adds the review to shared state, closes the dialog, applies no artificial delay, and shows the new entry at the top under Latest added. Include note 'Your words stay in this browser in this static edition.' rather than simulating a network request.
   Layout: Desktop dialog is centered at 680px maximum width and 90svh maximum height with internal scrolling; mobile is a full-width bottom sheet with safe-area padding. Include accessible title, close button, focus trap, Escape close, and focus return. Draft persists while navigating, but the dialog never opens automatically without compose=1 or an explicit click.
   Motion: Use the standard dialog transition. Submission moves focus to the new review heading and announces one concise confirmation.

### [RANKED_LIST_NAME] — [BRAND] (`#/rankings`)
1. **Ranked canon introduction** — Eyebrow 'THE COMMUNITY CANON'; H1 '[RANKED_LIST_NAME]'; body 'One hundred fictional films, ordered by the editorial desk and opened up to your own filters. Rank is a point of view, not a permanent verdict.' Show reconciled metrics '100 films', '10 genres', and the mean community rating computed from the catalog. Include 'Reset filters' and 'Save a film to your library' guidance rather than a fake share button.
   Layout: Use a wide editorial title row with H1 left and a 420px-max-width explanation right. Metrics sit in a three-column ruled strip below, using IBM Plex Mono 24px values and DM Sans 12px labels. Mobile stacks title, copy, then metrics with no oversized empty hero.
   Motion: Content appears immediately; only the standard below-fold reveal applies.
2. **Meaningful canon filters** — Provide search 'Title or director…', genre select All genres plus ten genres, decade select All decades / 2020s / 2010s / 2000s / 1990s / 1980s / 1970s / 1960s, minimum rating select Any / 4.5+ / 4.0+ / 3.5+, and sort Editorial rank / Highest rated / Title A–Z. Display '{n} of 100 films' and Clear filters. Filters combine with AND logic across the entire catalog before slicing visible rows. Sorting never changes the printed original rank. No filters produce an empty state with active-filter summary and Reset filters.
   Layout: A Paper filter panel with 16px padding contains search on the first row and four selects plus result count on the second. Desktop controls align end; mobile uses a two-column select grid and full-width search. All controls have persistent visible labels, not placeholder-only labels.
   Motion: Result count and rows update synchronously with a 140ms crossfade. Announce count politely; do not animate every row independently or reset focus after each selection.
3. **Ranked table and progressive rows** — Each row shows zero-padded original rank, 64×96px poster, title, director, year, genre, runtime, computed average, rating count, personal star rating if present, and bookmark button. Title opens the film route. Initially show 20 rows and use 'Show 20 more' until all filtered results are visible. The default first row is #001 The Cartographer's Dream. A watched row has a small Sage 'Watched' label; want-to-watch has a Coral-outline 'Queued' label. Include column headers Rank, Film, Details, Community, and Your library.
   Layout: Desktop uses a ruled table with 72px rank, minmax(280px,1.6fr) film, minmax(180px,1fr) details, 160px community, and 128px actions. Rows are 120px high with 12px padding and Paper hover. Mobile transforms each row into a grid: rank and poster left, title/metadata right, rating and actions in a full-width bottom row; do not force a horizontally scrolling table. Keep bookmark at least 44px and show all information without hover.
   Motion: Show more appends without replacing existing rows. Bookmark state updates immediately with an accessible status message; reduced-motion mode disables row fades.

### My film diary — [BRAND] (`#/library`)
1. **Personal library header** — Eyebrow '[PROFILE_NAME]’S FILM DIARY'; H1 'Your shelves, your rules.'; body 'Keep the maybes separate from the memories. Ratings and reviews follow every film you mark watched.' Show three computed counts for Watched, Want to watch, and Reviews written. Include 'Browse the canon' to '#/rankings' and 'Reset sample diary' behind an inline confirmation explaining that it restores the original fictional profile and removes local edits.
   Layout: Header uses a two-column title/count composition inside a Night Blue panel with Paper text and 24px padding. Three count cells have hairline separators. Mobile stacks title and counts, keeps both actions at least 44px, and uses no destructive button until confirmation is requested.
   Motion: Counts update immediately after any list or review action. Reset uses a 160ms highlight on the restored list and returns focus to the Watched tab.
2. **Watched and want-to-watch shelves** — Tabs are 'Watched' and 'Want to watch', each with the exact current count. Watched cards show poster, title, year, personal stars or 'Not rated yet', community average, and buttons 'Rate', 'Write a review', and 'Move to want to watch'. Want-to-watch cards show poster, title, genre, runtime, community average, and buttons 'Mark watched' and 'Remove'. Provide search within the current shelf and sort Recently changed / Title A–Z / Community rating. Empty want-to-watch copy is 'Your maybe-later shelf is open. Save a film from the canon.' with 'Browse films'; empty watched copy is 'Your first watched film starts the diary.' with 'Find a film'.
   Layout: Tabs, search, and sort occupy one control row. Each shelf uses a two-column desktop grid of horizontal film cards with 112×168px posters and 16px padding; mobile uses one column with 96×144px posters. Rate focuses the star input in an inline expansion rather than opening a new page. Write a review navigates to that film and focuses its composer. All actions remain visible, with no swipe-only behavior.
   Motion: Moving a film switches its tab membership after the standard 160ms state highlight and announces the destination. The active tab remains stable unless the user explicitly opens the other tab.
3. **Recently changed shelf** — Heading 'Recently changed' lists the six most recently rated, reviewed, or list-changed films in local state with concise action labels 'Rated 4 stars', 'Added to want to watch', 'Marked watched', or 'Reviewed'. Seed entries use relative sequence numbers, not calendar dates. Provide a text link to each film.
   Layout: Use a single ruled list with 48px poster thumbnails, title, action label, and ArrowRight icon. On mobile keep action labels below titles and maintain 44px row targets. If no changes exist, show the original six seed changes in their stored order rather than a blank panel.
   Motion: New changes move to the top without animated reordering; use one subtle background highlight on the changed row.

### Taste profile — [BRAND] (`#/profile`)
1. **Member identity and summary** — Show a 72px flat Coral monogram derived from [PROFILE_NAME], eyebrow 'TASTE PROFILE', H1 '[PROFILE_NAME], your taste has a shape.', and body 'Not a verdict. Just a useful map of what you return to, what you rate generously, and where your next surprise might live.' Four computed cards show Films watched, Reviews written, Average personal rating, and Want to watch. Include CTA 'Update your diary' to '#/library'. No follower counts, public achievement claims, real-person photo, or account settings.
   Layout: Use a Night Blue panel with monogram and title left, four metric cells right in a 2×2 grid, 24px padding, and 16px radius. Mobile stacks identity and metrics, retains readable 14px labels, and never lets the long variable name overflow; wrap it rather than truncating.
   Motion: Metrics use the same shared state and update without count-up animations. Standard section reveal only.
2. **Genre affinity and rating habits** — Left panel heading 'Genres you return to' displays all ten genres as horizontal Sage bars based on the member's watched films, with exact watched counts and percentage of watched library; the seed emphasizes Drama, Science fiction, Mystery, and Documentary. Right panel heading 'How you rate' shows five bars for personal five-to-one-star ratings plus average and total rated films. Include a text insight generated deterministically, default 'You rate dramas most often, but science fiction earns your highest average.' Recompute the insight from actual state rather than leaving it hard-coded when variables or ratings change.
   Layout: Two equal Paper panels with 24px padding and 24px gap. Every chart row includes visible text labels and values outside SVG; bars have 12px height and Hairline tracks. Mobile stacks panels and keeps labels at least 14px. Do not use pie charts, tiny legends, tooltip-only values, or chart-library defaults.
   Motion: Bars animate from old to new widths over 240ms after a rating/list change; reduced-motion users see instant values. No automatic animation on every route revisit.
3. **Decades and next-step recommendations** — Left panel 'Your decades' shows a compact column chart from the 1960s through 2020s based on watched films, with counts below each column. Right panel 'A different corner of the canon' recommends three films from the member's least-watched genres, excluding watched films and ordered by community rating, each with poster, title, one-sentence logline, average, and Want to watch. Explanations use actual data such as 'You have only watched two documentaries, so start here.' Include link 'Explore the full canon'.
   Layout: Use a 5fr/7fr grid. Decade chart is 280px high with seven labeled columns and values visible without hover. Recommendations are three horizontal rows with 72×108px posters and 16px gaps. Mobile stacks both panels and uses 64×96px posters; chart columns remain at least 28px wide with horizontal internal scrolling only if necessary.
   Motion: Saving a recommendation updates its button and the Want to watch metric everywhere. Columns use the same restrained width/height transition as other charts and become immediate under reduced motion.
4. **Recent reviews** — Heading 'In your own words' shows up to three local reviews by [PROFILE_NAME], mixing short takes and essay excerpts, each linked to its film and including personal stars and helpful count. CTA 'Write another review' links to '#/reviews?compose=1'. If all seeded reviews are removed, show 'Your review notebook is ready.' with the same CTA.
   Layout: Three equal columns desktop and one column mobile, using Paper cards with 20px padding. Keep excerpts at four lines with a visible Read review link to the film; do not truncate without an expansion path.
   Motion: New local reviews appear first with a single 160ms highlight. No carousel or automatic rotation.

## Assets
- image: Download https://media.vibefather.ai/assets/8fb087e6-021d-4f04-a2f4-ba660f1ef5f3/cartographers-dream.webp to public/posters/cartographers-dream.webp. Alt: 'Abstract desert map with an impossible staircase in warm ivory, ink, and coral.' Use for The Cartographer's Dream in the featured hero, film detail, cards, rankings, and profile as applicable. Credit in ASSETS.md exactly: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/8fb087e6-021d-4f04-a2f4-ba660f1ef5f3/night-orchard.webp to public/posters/night-orchard.webp. Alt: 'Moonlit orchard with coral lanterns and dark sage branches in a matte illustrated style.' Use for The Night Orchard across its cards and detail route. Credit in ASSETS.md exactly: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/8fb087e6-021d-4f04-a2f4-ba660f1ef5f3/static-between-stars.webp to public/posters/static-between-stars.webp. Alt: 'A solitary radio tower and orbital arcs in an inky star field with ochre light.' Use for Static Between Stars across its cards and detail route. Credit in ASSETS.md exactly: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/8fb087e6-021d-4f04-a2f4-ba660f1ef5f3/room-for-august.webp to public/posters/room-for-august.webp. Alt: 'Sunlit empty room with a ladder, linen curtains, and geometric late-summer shadows.' Use for A Room for August across its cards and detail route. Credit in ASSETS.md exactly: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/8fb087e6-021d-4f04-a2f4-ba660f1ef5f3/salt-cinema.webp to public/posters/salt-cinema.webp. Alt: 'An empty seaside projection screen, winding coastal path, and coral dusk in textured gouache.' Use for Salt on the Projectionist's Hands across its cards and detail route. Credit in ASSETS.md exactly: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/8fb087e6-021d-4f04-a2f4-ba660f1ef5f3/clockwork-heron.webp to public/posters/clockwork-heron.webp. Alt: 'An original mechanical heron among misty reeds with muted coral gears and ochre light.' Use for The Clockwork Heron across its cards and detail route. Credit in ASSETS.md exactly: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: For the other 94 catalog entries, author deterministic inline SVG posters in code from film slug and genre using the declared palette and geometric scene recipes. Save reusable poster-generation code in src/components/GenerativePoster.tsx, not as remote images or placeholder blocks. Record original SVG authorship in ASSETS.md; no additional bitmap downloads.
- icon: Bundle lucide-react locally for Search, Menu, X, Star, Bookmark, Check, ThumbsUp, SlidersHorizontal, ChevronDown, ArrowRight, PenLine, UserRound, Film, Clock3, BarChart3, RotateCcw, and Trash2 at 16–20px with currentColor. Draw the original four-corner frame wordmark, favicon, monograms, and all charts locally. Record Lucide's ISC license in ASSETS.md; no brand, festival, studio, or streaming icons.
- font: Self-host Instrument Serif 400 through @fontsource/instrument-serif, DM Sans 400/500/600/700 through @fontsource/dm-sans, and IBM Plex Mono 400/500 through @fontsource/ibm-plex-mono. Import only required Latin woff2 files and record package paths, package source URLs, authors, and OFL-1.1 licenses in ASSETS.md. Never use a font CDN.

## Don'ts
- Do not use real film titles, posters, stills, trailers, characters, studios, distributors, festivals, streaming services, award marks, recognizable cast likenesses, or real people's portraits. All 100 films, directors, reviewers, members, loglines, reviews, and aggregate figures must remain invented.
- Do not copy an existing film community's name, logo, mascot, slogan, unique icons, brand palette, exact layout, interface copy, review text, ranking entries, rating totals, usernames, or profile imagery. The generic concepts of stars, lists, reviews, and taste charts are not permission to reproduce a branded product.
- Do not use external movie databases, third-party APIs, authentication, accounts, a backend, server code, API routes, databases, remote forms, analytics, tracking, ads, sharing services, or requests that claim to publish reviews online. All interactions are local and all content ships in the static bundle.
- Do not hotlink the six generated images or any other asset. Download the declared images to public/posters/ during the build, use relative paths, and include every third-party file and the exact generated-image credit in ASSETS.md. No Unsplash, Pexels, Pixabay, stock-license photos, placeholder-image services, Google Images, CC BY-NC, or CC BY-SA assets.
- Do not use commercial fonts, Google Fonts URLs, CDN scripts or styles, restricted UI-library source, additional chart/router/state/animation libraries, or externally hosted icons. Use only the declared packages, hand-built SVG charts, local CSS, and self-hosted Fontsource fonts.
- Do not let localStorage denial, sandboxed iframes, malformed saved data, or unknown film slugs produce console errors or blank pages. Validate saved state, use the in-memory fallback, preserve interactions, and show the selected/default film when a detail slug is absent or invalid.
- Do not duplicate rating, review, list, or profile numbers in unrelated components. Derive all counts and charts from canonical shared state; make watched and want-to-watch mutually exclusive, include a new rating in the aggregate once, and reverse it exactly when removed.
- Do not hard-code Fableframe, the default invitation, audience, featured film, profile name, or ranked-list name outside src/content.ts. When variables change, rewrite variable-dependent copy naturally and expose no unresolved [VARIABLE] placeholders or contradictory default text.
- Do not create bare-directory links, nonfunctional buttons, placeholder '#', server routes, or extra pages. Use only index.html and the declared hash routes with './index.html#/…' hrefs; '#/film' and unknown film slugs always resolve to a real default film.
- Do not add marketing pricing, sign-up walls, fake live counters, real review dates, streaming links, trailers, awards, push notifications, cookie banners, autoplay carousels, infinite scroll, or promotional pop-ups. The product is the community interface itself.
- Do not add SEO metadata beyond the plain current-view title and local favicon: no meta-description work, Open Graph tags, JSON-LD, sitemap code, keyword stuffing, or heading-hierarchy instructions.
- Production npm run build must emit minified static dist/ below 20 MB with Vite base './', no source maps, and no src/ copied into dist/. It must work at 1440×900 and 390×844 with zero console errors and no horizontal page overflow.
- Respect prefers-reduced-motion, visible keyboard focus, semantic buttons and tabs, accessible chart values, labeled fields, dialog focus trapping and restoration, 44px touch targets, and non-color state labels. Do not require hover, swipe, or animation to complete an action.
- Never mention VibeFather inside the rendered site except the optional [CREDIT] footer link, and never use VibeFather or any real brand as a variable default. All copy, labels, sample data, and alt text must be US English.

---
— Prompt by VibeFather · https://vibefather.ai/t/movie-rating-community · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.