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

# Trending Topics Microblog

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

## Brief
Build an original static microblog called [BRAND] for [AUDIENCE] interested in [COMMUNITY_TOPIC]. The first screen is a complete, polished app workspace with navigation, a short-post composer, a media-rich timeline, and a ranked trend panel. Add a full trending board and a focused topic page. All accounts, conversations, counts, and activity are fictional local sample data; clearly identify the changing heat scores as a local simulation.

- Audience: Indie hackers, community builders, creators, educators, and product designers who need a convincing social-community prototype that works entirely in the browser and can be adapted to a different subject through a small set of variables.
- Goal: Let visitors scan rising conversations, open a topic, read and interact with posts, and publish a short post with an optional local image. Make every visible control useful without accounts, remote APIs, or a server, and persist the visitor's interactions in localStorage.
- Tone: Observant, friendly, specific, and unhurried. Use concise posts about concrete discoveries and works in progress rather than engagement bait, generic motivational copy, or claims of real online activity.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react 18.3.1 and react-dom 18.3.1 (MIT), lucide-react 0.468.0 (ISC), @fontsource-variable/bricolage-grotesque 5 (OFL), @fontsource-variable/inter 5 (OFL), @fontsource/ibm-plex-mono 5 (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Configure vite.config.ts with base './' and build.sourcemap set to false; produce only the static dist/ directory and never copy src/ into it.
  - Use Tailwind CSS 3.4 with a small theme extension for the specified colors and font families; put global focus styles, scrollbar styling, keyframes, and the reduced-motion override in src/index.css.
  - Keep all brand values, navigation labels, sample accounts, posts, comments, topics, counts, and artwork selection in src/content.ts. Rewrite the sample world to fit the supplied variable values instead of leaving default-only urban-nature copy in an alternate build.
  - Build focused components named AppShell, Composer, PostCard, Artwork, TrendBoard, TopicHeader, CommentThread, BookmarksDrawer, and Toast; keep shared interaction state in one React context or a small custom store.
  - Implement hash routing without another dependency: index.html is home, ./index.html#/trends is the full board, ./index.html#/topic shows [FEATURED_TOPIC], and ./index.html#/topic/<slug> opens any other topic. Unknown topic slugs fall back to [FEATURED_TOPIC], never an empty state.
  - Use a localStorage namespace derived from a lowercase slug of [BRAND] so likes, reposts, bookmarks, follows, comments, and new posts survive reloads without colliding with another brand.
  - Create a deterministic local activity sequence that updates heat scores and rank order every eight seconds after initial render; pause it while the document is hidden and replace automatic updates with a Refresh activity button when reduced motion is requested.
  - Use FileReader for the composer's optional image so a PNG, JPEG, or WebP up to 1 MB can be previewed, removed, published, and persisted locally; reject other types or larger files with an inline error and never upload the file.

## Variables
- [BRAND] — Community name (default: "Cloverloop"). An invented two-syllable or compound name; derive the wordmark, favicon, page title, and storage namespace from it.
- [COMMUNITY_TOPIC] — Community subject (default: "urban nature and citizen science"). The broad subject that shapes every sample post, illustration, topic, and community description.
- [AUDIENCE] — Community audience (default: "neighborhood observers and amateur ecologists"). A concise description of the people participating in this community.
- [FEATURED_TOPIC] — Featured trend (default: "Roof Gardens"). The leading topic shown first on the trend board and at the bare #/topic route; derive its hash slug and hashtag from this value.
- [COMPOSER_PROMPT] — Composer placeholder (default: "What did you notice outside today?"). A short question tailored to the community subject and audience.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/trending-topics-microblog 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` — Warm oat page background with a very subtle CSS dot texture at 3% opacity.
- Surface `#FFFCF6` — Cards, header, composer, and drawers.
- Ink `#20231F` — Primary text, dark navigation pills, and primary buttons.
- Muted `#6F7269` — Metadata, timestamps, secondary labels, and inactive icons.
- Line `#D9D6CC` — One-pixel borders, separators, input outlines, and heat-bar tracks.
- Coral `#E86A4A` — Heat bars, rank-change highlights, selected reaction accents, and small graphic details.
- Coral Dark `#A63F2A` — Accessible coral text, hot-badge text, counter warnings, and focus details on light surfaces.
- Sage `#DCE8D8` — New badges, selected filter backgrounds, and gentle illustration fields.
- Forest `#285846` — New-badge text, positive rank deltas, and live-simulation labels.
- Sun `#F1C75B` — Small hot-badge fields and warm highlights in the SVG artwork; never body text.

### Typography
- Display and brand: Bricolage Grotesque Variable (OFL), weights 600/700/800
- Interface and post body: Inter Variable (OFL), weights 400/500/600/700
- Heat scores, counts, timestamps, and rank numbers: IBM Plex Mono (OFL), weights 500/600

### Layout & motion
- Spacing: Use a 4px base unit. The desktop shell is max-width 1360px with 24px outer padding, columns of 216px, minmax(0, 660px), and 312px, and 24px gutters. Cards use 20px padding on desktop and 16px on mobile. Post rows have 16px vertical rhythm; trend rows are 64px tall. At 1440×900, show the full header, composer, first media post, and at least five trend rows without crowding.
- Radius: Use 18px for feed and panel cards, 14px for artwork and image previews, 12px for inputs and buttons, and 999px for chips, badges, avatars, and icon-button hover fields. Borders and spacing define the layout; use only a soft 0 10px 30px rgba(32,35,31,0.05) shadow on drawers and the sticky composer when focused.
- Motion: On first load, stagger the shell, composer, first post, and trend panel by 40ms with a 240ms opacity and 12px upward reveal; never animate the entire feed for several seconds.
- Motion: When local activity changes a ranking, animate row reordering with a 260ms FLIP transition and heat-bar width over 500ms using cubic-bezier(0.22,1,0.36,1); briefly tint only the changed numeric delta.
- Motion: New posts enter at the top with a 280ms opacity and -12px transform transition. Toasts fade and translate upward over 180ms, remain for 2.5 seconds, and never cover the composer or mobile navigation.
- Motion: Reaction buttons use 160ms color and background transitions with no layout shift. Comment regions expand with opacity and a maximum-height transition while remaining keyboard accessible.
- Motion: Hash-page changes crossfade the main column over 180ms and scroll its heading into view without smooth scrolling on mobile. Respect prefers-reduced-motion by removing reveals, FLIP movement, automatic activity, and smooth scrolling.
- Imagery: Draw every visual in code. Use four original 16:9 inline SVG editorial illustrations with flat geometric shapes, crisp 2px ink outlines, restrained coral, sage, sun, and cream fills, and tiny hand-placed texture marks rather than photographs. The scenes are a rain-filled rooftop garden, a shaded neighborhood tree map, evening primroses with abstract pollinators, and a gravel-and-reed pocket wetland. Include no words, logos, recognizable landmarks, real products, or human faces. Generate abstract avatars from circles, arcs, and offset color blocks with a unique seed per fictional account; do not use initials-only avatars, stock portraits, or real likenesses. A compact SVG sparkline in the community-pulse card uses the same visual language. The first-screen media post and dense app UI are the visual anchor.

## Pages & Sections
### Home timeline (`index.html`)
1. **Shared app shell** — Use a sticky 68px top header with an original [BRAND] wordmark built from three offset rounded speech bars, a centered search field labeled 'Search posts and topics', and a dark 'Write a post' button. The left rail contains Home, Trends, and Saved navigation, a small community card for [COMMUNITY_TOPIC], and the note 'Fictional people, posts, and counts · Local demo'. Home links to ./index.html, Trends to ./index.html#/trends, and Saved opens a working bookmarks drawer. Search filters post text, account names, and topic titles as the visitor types, shows a clear button and a result count, and supports '/' as a keyboard shortcut. The Write button focuses the composer. On screens below 1024px remove the left rail and place the trend panel below the feed; below 720px use a 60px header, hide the full search field behind a search-icon toggle, and add fixed bottom navigation for Home, Trends, Saved, and Write.
   Layout: Center the three-column shell beneath the header. Keep left and right rails sticky with 20px top offset while the center column scrolls naturally. The header search is 360px wide on desktop. Mobile content has 16px side padding and 84px bottom padding so fixed navigation never obscures actions.
   Motion: The sticky header gains a slightly stronger bottom border after 8px of scroll. Mobile search expands downward over 180ms; the bookmarks drawer slides 24px from the right on desktop and rises from the bottom on mobile.
2. **Feed introduction and composer** — Start the center column with the eyebrow 'YOUR COMMUNITY', the H1 'Your corner of the conversation.', and the supporting line 'Short posts and rising ideas from [AUDIENCE] exploring [COMMUNITY_TOPIC].' Place the composer directly below with a seeded geometric avatar, a textarea using [COMPOSER_PROMPT], an image-preview region, and a bottom action row. Actions are Image, Add [FEATURED_TOPIC], and Post. Use a 280-character limit with a numeric count and a 20px circular progress indicator; show coral at 260 characters, red above 280, and disable Post only when the content is empty with no image or the limit is exceeded. Image opens the local file picker, the topic button inserts the derived featured hashtag at the cursor, and Post adds the entry at the top with 'You' as the author, resets the composer, and shows 'Post added to your local feed'.
   Layout: The introduction sits on the open canvas with 20px vertical padding. The composer is a Surface card with an avatar at top left, a borderless textarea at least 76px tall, and a dividing line above the icon actions. A selected image appears as a 160×110px cropped preview with a labeled remove button; validation messages sit below it without moving the action row.
   Motion: Focus gives the composer a 2px Coral Dark outline with 3px soft offset. The character ring interpolates its stroke as text changes. Publishing animates only the new card and resets the textarea without a page jump.
3. **Timeline** — Use tabs 'Latest' and 'Most discussed'; Latest sorts by the supplied relative-time order and Most discussed by comment count. Seed six original posts for the default values: Lena Ortiz (@lenaobserves), 'The rain garden on Alder Street held every drop from last night’s storm. Fourteen new shoots are coming through along the southern edge. #RoofGardens' with rooftop artwork, 24 likes, 6 reposts, 4 comments, '8m'; Mateo Chen (@mateomaps), 'I mapped every public drinking fountain within a ten-minute walk of the community garden. The shaded route wins. #StreetTreeWatch' with tree-map artwork, 41 likes, 9 reposts, 7 comments, '21m'; Priya Nair (@priyainthefield), 'A tiny victory: the library approved our seed-sharing drawer. Bring labeled envelopes, take something unexpected, and leave a note for the next grower. #SeedLibraries' with no image, 63 likes, 12 reposts, 11 comments, '36m'; Theo Martin (@theoafterdark) reposting Jun Park, 'Three hawk moths at the evening primrose tonight. The best garden show starts after sunset. #NightPollinators' with pollinator artwork, 38 likes, 14 reposts, 5 comments, '48m'; Ada Flores (@adamakes), 'Our pocket wetland filter is just gravel, sand, and patience. Week two: the water finally runs clear. #PocketWetlands' with wetland artwork, 52 likes, 8 reposts, 9 comments, '1h'; and Jonah Bell (@jonahreads), 'What is one small patch of green you would protect on your block? I am collecting answers for a hand-bound neighborhood atlas. #StreetTreeWatch' with no image, 29 likes, 3 reposts, 12 comments, '2h'. Rewrite names, topics, post copy, and artwork for alternate variable values while retaining the mix of four media posts and two text-only posts. Each card has Like, Repost, Comment, Bookmark, and Share actions with accessible labels. Like, Repost, and Bookmark toggle once per visitor and update their counts. Comment expands two seeded comments plus a working reply field. Share copies a local URL containing the post id and shows a toast; do not invoke a real social service.
   Layout: Separate cards by 12px rather than placing every post in a heavy floating container. Use a 44px avatar, account name and relative time on one row, 15px/1.6 body copy, and full-width 16:9 artwork below media posts. Action icons sit in a four-column row with Bookmark and Share grouped at the end; counts remain aligned when toggled. A reposted post shows a compact Repeat2 label above the author row. Comment threads use a left rule and smaller geometric avatars.
   Motion: Hover reveals a pale Canvas wash behind action icons. Reaction state changes use a short color transition rather than bouncing hearts. Expanded comments fade in; newly submitted comments appear with a 160ms upward reveal.
4. **Trending preview and community pulse** — The right rail begins with 'Rising now' and a green dot labeled 'Local live simulation'. List the first five topics from the full trend data: #RoofGardens at heat 94 with 18.4K posts and HOT, #NightPollinators at 86 with 12.7K posts and +1, #RainwaterMapping at 79 with 9.8K posts and NEW, #StreetTreeWatch at 72 with 8.2K posts and −1, and #PocketWetlands at 66 with 6.9K posts and +2. Each row links to its hash topic page and shows rank, topic, post count, delta, and a heat bar. End with 'View all trends' linking to ./index.html#/trends. Below it place 'Community pulse', an original SVG sparkline, the sample label '128 local interactions this session', and a short explanation that activity is generated in the browser for demonstration.
   Layout: Use a Surface panel with 20px padding and no nested card around every topic. Rank numbers occupy 24px, titles truncate at one line, and heat bars are 5px high across the remaining row width. The pulse card has a sage field and a 96px-tall sparkline. On tablet move both panels below the timeline in a two-column grid; on mobile show Rising now before Community pulse in one column.
   Motion: Heat bars animate from their previous values, and rank changes tint their delta for 600ms. The green simulation dot remains static rather than pulsing continuously.

### Live trending board (`#/trends`)
1. **Trend board header** — Replace the home center column while keeping the shared shell. Show eyebrow 'DISCOVER', H1 'What is rising today.', and copy 'A browser-generated ranking of fictional conversations across [COMMUNITY_TOPIC].' Beside it place a compact heat legend explaining 'Heat combines sample post velocity and discussion depth; it is not real network data.' Include All, Hot, and New filter chips and a Refresh activity button that remains available at every motion preference.
   Layout: Use an open-canvas heading above one full-width Surface board. Put filters in a scroll-free row under the copy and the heat legend in a 220px side note on desktop; stack the note above the filters on mobile.
   Motion: Filter changes crossfade the board rows over 160ms without changing the heading height.
2. **Ranked topic table** — Render all six topics with #RoofGardens at heat 94, 18.4K posts, HOT and +3; #NightPollinators at 86, 12.7K posts and +1; #RainwaterMapping at 79, 9.8K posts, NEW and +4; #StreetTreeWatch at 72, 8.2K posts and −1; #PocketWetlands at 66, 6.9K posts and +2; and #SeedLibraries at 58, 5.4K posts, NEW and +2. The featured topic comes from [FEATURED_TOPIC]; rewrite all six titles and discussion descriptions for alternate values. Use a deterministic eight-step activity sequence to adjust scores by one to three points, reorder rows when scores cross, and then stop at a stable state instead of running indefinitely. Every row opens the selected topic at ./index.html#/topic/<slug>. A small Follow button toggles independently and persists.
   Layout: Each desktop row is an 88px grid: 44px rank, minmax(170px,1fr) topic and description, 92px post count, minmax(120px,220px) heat track, 64px delta, and 88px follow action. Emphasize the top three with larger mono rank numerals rather than podium cards. On mobile each row becomes two lines with rank and topic first, heat and actions second; keep all labels visible at 390px without horizontal scrolling.
   Motion: Apply the specified FLIP rank and heat-bar transitions. After a refresh or timed tick, announce 'Trend activity updated' through a polite live region, not a toast for every row.
3. **Topic comparison footer** — Add a slim summary strip below the table: '6 fictional topics', '61.4K sample posts', and 'Activity stays in this browser'. Include a text link 'Read the leading conversation' pointing to the bare ./index.html#/topic route, which always resolves to [FEATURED_TOPIC].
   Layout: Use three evenly spaced mono statistics with a final text link aligned right on desktop. Stack into a two-column statistics grid followed by the link on mobile.
   Motion: No additional animation.

### Topic conversation (`#/topic`)
1. **Topic masthead** — For the default values show a back link to Trends, the label 'FEATURED CONVERSATION', H1 '#RoofGardens', and the description 'Practical notes, small experiments, and photographs replaced by original field sketches from people growing above the street.' Display heat 94, 18.4K sample posts, and 1,842 fictional followers with a Follow topic button. Add three related topic chips: #PocketWetlands, #RainwaterMapping, and #SeedLibraries. For alternate values derive the H1, route, related topics, description, and counts from the rewritten content file; the bare route always displays [FEATURED_TOPIC], never a not-found screen.
   Layout: Place the masthead in a large Surface card with a Coral-to-Sun abstract contour drawing along the right third, keeping text on the left. Statistics form a three-column row beneath the description. Related chips sit along the bottom and wrap cleanly. On mobile hide only the decorative contour drawing and keep all content and actions.
   Motion: The Follow button changes between an outlined plus state and a sage check state over 160ms. The masthead uses the normal page crossfade, not parallax.
2. **Topic composer and filtered feed** — Reuse the full composer with the featured hashtag already inserted and the textarea placeholder 'Add to this conversation…'. Below it show only posts associated with the selected topic, led by Lena’s rooftop post and followed by two additional seeded entries: Noor Bennett (@noorgrows), 'A shallow crate, two drainage layers, and herbs that do not mind the wind. My smallest roof bed is finally thriving. #RoofGardens', 33 likes, 5 reposts, 6 comments; and Eli Ward (@eliaboveground), 'The west planters need shade cloth before noon. The east bed is happy with nothing more than yesterday’s rain. #RoofGardens', 27 likes, 4 reposts, 3 comments. Both use appropriately cropped details from the original rooftop SVG rather than new image files. Selecting a related topic swaps the masthead and filters the centralized posts to that topic. Keep Like, Repost, Comment, Bookmark, Share, image picking, character count, and publishing behavior identical to Home.
   Layout: Use the same center-column cards as Home to make navigation feel continuous. Place the compact composer above the filtered results and show a result count such as '3 sample posts' between them. The right rail contains an About this trend panel and related-topic list instead of repeating the full ranking.
   Motion: Switching topics crossfades the feed after the masthead updates. Newly published posts join the current topic feed immediately and remain after reload.

## Assets
- image: Create an original inline SVG component src/components/artwork/RoofGarden.tsx: a 16:9 geometric rooftop garden after rain with coral planters, sage foliage, cream architecture, dark outlines, and no text, logos, people, or external image references. Use it in Lena’s home post and the two topic-feed detail crops.
- image: Create src/components/artwork/TreeMap.tsx as an original 16:9 SVG neighborhood diagram with abstract streets, a walking path, circular tree canopies, and generic fountain dots. Do not use a real map, place names, map-provider tiles, labels, or logos.
- image: Create src/components/artwork/NightPollinators.tsx as an original 16:9 SVG dusk garden with oversized cream primroses, three abstract moth shapes, a deep ink sky, and coral accents. No existing characters, realistic species illustration, text, or logos.
- image: Create src/components/artwork/PocketWetland.tsx as an original 16:9 SVG cutaway of a small gravel-and-sand filter with reeds, water layers, and measured geometric texture. Keep it illustrative rather than a copied engineering diagram; include no labels or logos.
- image: Create src/components/artwork/AbstractAvatar.tsx to render deterministic geometric avatars from account-name seeds using circles, arcs, and offset blocks from the specified palette. Do not fetch portraits, use real likenesses, or fall back to initials-only circles.
- image: Create src/components/artwork/CommunityPulse.tsx as a local SVG sparkline with a 96px-high plotting area, a coral 3px path, pale sage area fill, and no charting dependency. Base its points on the fixed local activity sequence.
- icon: Use only locally bundled lucide-react 0.468.0 icons: Home, TrendingUp, Search, Bookmark, UserRound, PenLine, ImagePlus, X, Heart, Repeat2, MessageCircle, Share2, ArrowUpRight, ArrowLeft, Flame, Sparkles, Check, Plus, Send, RefreshCw, and ChevronDown. Set aria-hidden on decorative icons and provide visible or screen-reader labels on every button. No third-party brand icons.
- font: Install and self-host Bricolage Grotesque Variable through @fontsource-variable/bricolage-grotesque 5 (OFL); import the local package CSS and use weights 600–800.
- font: Install and self-host Inter Variable through @fontsource-variable/inter 5 (OFL); import the local package CSS and use weights 400–700.
- font: Install and self-host IBM Plex Mono through @fontsource/ibm-plex-mono 5 (OFL), importing only the local 500 and 600 weight files. Create ASSETS.md listing these npm packages, Lucide, their licenses, and the original code-drawn artwork; no downloaded raster assets are required.

## Don'ts
- Do not use any real social platform name, logo, mascot, slogan, proprietary typeface, trademarked icon, exact brand palette, or pixel-for-pixel interface.
- Do not copy real posts, usernames, profile photographs, trends, comments, code, or artwork; every account and metric is fictional sample content and all illustrations must be original code.
- Do not add a backend, authentication, database, API route, remote form submission, analytics, real social sharing, or third-party activity service. Label simulated activity honestly and keep all state in the browser.
- Do not hotlink images, fonts, scripts, icons, map tiles, or other assets. Do not use stock-photo sites, placeholder-image services, CDNs, real faces, recognizable landmarks, or external SVG files.
- Do not load fonts from Google Fonts or another CDN; use only the specified self-hosted Fontsource packages and keep the exact three-family typography system.
- Do not replace the stack, add a routing or animation dependency, use restricted component-library source, or introduce a commercial font. Use React, Tailwind, Lucide, CSS transitions, and the specified local hash router.
- Do not use bare-directory links. Use ./index.html, ./index.html#/trends, ./index.html#/topic, and ./index.html#/topic/<slug>; opening #/topic without a slug must show [FEATURED_TOPIC].
- Do not ship source maps, src/ files in dist/, unminified production output, or a dist/ larger than 20 MB. Keep base './' so the static build works from a nested demo path.
- Do not leave dead buttons, decorative search fields, nonfunctional tabs, or placeholder comments. Every compose, filter, follow, reaction, bookmark, share, drawer, and navigation control must work with mouse, touch, and keyboard.
- Do not upload composer images or accept files over 1 MB. Provide preview, removal, validation, alt-text input for user-added images, and local persistence without a network request.
- Do not allow horizontal overflow or obscured controls at 1440×900 and 390×844. Keep touch targets at least 44px, visible focus indicators, sufficient contrast, semantic buttons, labeled inputs, and zero console errors.
- Do not ignore prefers-reduced-motion, run endless background activity, use autoplaying sound, flash content, or block reading with rank animations.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemaps, analytics, or keyword-stuffed copy; use only a plain document title derived from [BRAND] and a simple original favicon.
- Do not display calendar dates or imply real online users, real popularity, or verified metrics. Use the supplied relative-time sample labels and clearly mark counts and heat as fictional local data.
- Do not hard-code default urban-nature copy outside src/content.ts or leave it unchanged when variables differ; derive hashtags, topic slugs, brand labels, storage keys, and all sample content from the current values.

---
— Prompt by VibeFather · https://vibefather.ai/t/trending-topics-microblog · 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.