Pester

Prompt

# LuminaBook — Super Prompt for rocket.new Copy everything below into rocket.new as your build prompt. --- Build a web app called **LuminaBook** — a minimalist, editorial-style digital reading sanctuary. It combines an ebook/EPUB/PDF reader with AI book generation, neural text-to-speech narration, ambient soundscapes, and a quote/highlight studio. The overall feel is calm, warm, and "paper-like" — think a boutique reading app, not a generic dashboard. ## 1. Visual Design System **Palette — "Natural Tones" (light mode):** - Background: `#F9F7F2` - Text: `#2D2926` - Accent (primary): `#4A5D4E` (muted sage green), hover `#3E4D41` - Borders: `#E6E2D3` - Muted text: `#7D786E` - Panel background: `#F3F1EA` - Sand background: `#EFEDE6` **Dark mode palette:** - Background: `#151714`, panels `#20241E` / `#2B3028` - Text: `#EDEAE2`, muted text `#9E988D` - Accent: `#94B09A` **Typography:** - Serif display/headings: "Newsreader" - Classic serif alternative: "EB Garamond" - Decorative/logo font: "Cinzel" - UI sans-serif: "Plus Jakarta Sans" - Monospace (for numeric readouts like font-size %): "JetBrains Mono" - Use a large decorative drop-cap on the first letter of the first paragraph of each chapter in the reader (Cinzel/Newsreader, ~3.4em, sage colored). **Feel & details:** - Soft rounded corners (rounded-xl / rounded-2xl), subtle shadows, generous whitespace, thin 1px borders in the border color above. - Slim custom scrollbars (6px, translucent thumb). - Small animated "soundwave" bar icon (4 bars pulsing at staggered intervals) used wherever audio/TTS is active. - Smooth transitions on hover/active states (150–200ms). - Sticky, blurred (backdrop-blur) header. ## 2. Global Layout & Navigation Sticky header containing: - Logo/wordmark: "Lumina" + "Book" in two-tone text, book icon in a rounded sage badge, small uppercase tagline "Minimalist Digital Reader" underneath. - Center nav with 3 tabs (pill-style segmented control): **Explore & Recommendations**, **My Bookshelf**, **Saved & Quotes**. - A live search input (filters books by title/author/genre as you type). - Icon buttons: Import Book, AI Ebook Maker, TTS Voice Studio, Ambient Audio Mixer, Video Ambiance, Quotes Studio. - Dark/light mode toggle (sun/moon icon), persisted. - A small reading-stats readout (streak days, today's minutes). Main content area is a max-width centered container (≈1280px) with responsive padding. A persistent slim TTS control bar sits fixed at the bottom of the screen whenever the user is NOT inside the full-screen reader, letting them resume narration. ## 3. Data Model **Book** ``` id, title, author, coverUrl, description, genres[], moods[], rating, totalPages, currentPage, progress (0-100), publishedYear, format: EPUB | PDF | BUILTIN | TXT, chapters: [{ id, title, subheading, content (HTML/Markdown), images[], estimatedMinutes }], pdfDataUrl?, audioSnippetUrl?, ambientSoundPreset?, videoSnippetUrl?, quotes[], readingTimeMinutes, lastReadAt, isFavorite, shelf: reading | saved | completed | imported ``` **Highlight**: id, bookId, chapterId, text, note?, color (amber/emerald/sky/rose/violet), createdAt **Bookmark**: id, bookId, chapterIndex, scrollRatio, title, snippet, createdAt **ReaderSettings**: theme, fontFamily, fontSize, lineHeight, columnWidth, textAlign, brightness, autoScrollSpeed, showPageProgress **ReadingStats**: todayMinutes, weeklyGoalMinutes, streakDays, booksCompleted, totalWordsRead Persist books, highlights, bookmarks, reader settings, theme, and stats in browser local storage so everything survives a refresh. Seed the app with 6–10 attractive default books (varied genres, real-sounding titles/authors, cover images, 2–4 chapters of real placeholder prose each, and 2–3 quotes each) so the app never looks empty. ## 4. Pages / Tabs ### Explore & Recommendations (default tab) A curated, editorial "shelf" layout: a large featured/hero book banner, followed by horizontally-organized recommendation rows (e.g. "Because you read X", "Cozy & Quiet", "Highly Rated"). Each book renders as a **Book Card**: cover art, title, author, star rating, genre tags, a subtle progress bar if in progress, and a heart icon to favorite. Clicking a card opens the Book Detail Modal; a play button opens the reader directly. ### My Bookshelf A grid/list of the user's full library, filterable by shelf status (Reading / Saved / Completed / Imported). Shows per-book progress, last-read date, and a small reading-stats summary panel (today's minutes vs. weekly goal, current streak, books completed, total words read — use progress rings or bars). Allows deleting imported/custom books. ### Saved & Quotes Shows favorited books plus a button to open the Quote Studio. ## 5. Book Detail Modal A rich modal/panel triggered from any book card: large cover, title/author/year/rating, description, genre & mood tags, a "Start Reading" / "Continue Reading" button, favorite toggle, and quick actions to: change cover art, play an ambient sound preset tied to the book, or open a matching video ambiance. ## 6. Reader View (the centerpiece feature) A full-screen, distraction-free reading mode: - **6 reading themes** (togglable swatches): Paper, Linen, Candle, Dusk, Obsidian, Sage — each with its own background/text color pairing (warm cream tones through to true dark). - **4 font families**: Newsreader (serif, default), EB Garamond (classic serif), sans-serif, monospace. - Font size slider (e.g. 14–28px) with live px readout. - Column width control: Narrow / Medium / Wide / Full. - Text alignment left/justify, adjustable brightness filter, optional autoscroll speed. - Chapter sidebar/drawer listing all chapters with estimated read time each; tapping jumps to that chapter. - Drop-cap first letter styling on chapter openings for an editorial-book feel. - Text selection triggers a small popover to **highlight** (5 color options) or turn a selection into a **quote card** (sends it to the Quotes Studio) or **bookmark** the location. - Sticky progress bar/percentage showing position within the chapter and book; "Next Chapter" button that shows a celebratory "Finish Book 🎉" state on the last chapter. - Inline "Read Aloud" control that starts the neural TTS narrator on the current chapter, with a compact status readout (model loading %, playing/paused). - A separate, simpler **PDF Reader View** for books imported as PDFs (page-based navigation instead of chapters, page thumbnails/zoom). ## 7. Import Modal Lets the user import their own books as **EPUB, PDF, or TXT/Markdown** files (drag-and-drop or file picker). Parses EPUB metadata/chapters, extracts PDF text/pages, and lets the user pick a cover from a curated stock-photo gallery or upload their own before saving the book into "Imported" on the bookshelf. ## 8. AI Ebook Maker Studio A "bring your own API key" AI writing studio: - Field to paste a Gemini API key (with a link out to get one), plus a model picker (e.g. a fast/lite model and 1–2 larger alternatives). - A gallery of inspiring starter ideas (title + one-line premise + genre) the user can click to prefill the form, or they write their own premise. - Genre selector and a chapter-count selector (e.g. 3 / 5 / 8 chapters). - Generation runs in visible stages with a progress readout: "Architecture" (outline/blueprint) → "Writing Chapter X/Y" → "Binding" (assembling the final book), each with a percentage. - Once generated, the book is fully editable chapter-by-chapter before saving, can be opened immediately in the reader, and can be exported as a downloadable `.epub` file. ## 9. Neural TTS Voice Studio A "narrator" system (frame it generically as high-quality neural TTS, multiple model sizes): - Choice between a smaller/faster and a larger/higher-quality voice model. - A hardware acceleration toggle (GPU-accelerated vs. CPU) with a one-time "download model" step and progress bar. - Voice/style picker, playback speed control, play/pause/stop. - Persistent mini control bar (bottom of screen) when narration is active outside the reader; full modal for detailed model/voice management. ## 10. Ambient Audio Mixer A soundscape mixer modal with 6 looping ambient tracks, each with its own icon, name, and independent volume slider that can play simultaneously (layered mixing): 1. Rain on Window 2. Hearthside Embers (fireplace) 3. Pine Forest Breeze 4. Gentle Ocean Swells 5. Lo-fi Ambient Drone 6. Mountain Wind Show an animated soundwave indicator in the header/nav whenever any ambient track is playing. ## 11. Video Storytelling Ambiance A modal offering short looping cinematic video backdrops tagged by mood/genre (e.g. "Rainy & Reflective", "Cozy & Warm") that the user can play behind their reading session for atmosphere, selectable from a gallery with poster thumbnails. ## 12. Quotes & Highlights Studio A dedicated space that: - Lists all highlights/quotes saved across the library, grouped by book. - Lets the user generate a beautifully typeset **shareable quote card** (book title, author, styled quote text) that can be copied, downloaded as an image, or shared. - Can be opened directly from a highlight made in the reader, prefilled with that quote. ## 13. Cover Image Customizer A modal for changing any book's cover art via a curated gallery of tasteful stock photography (or an uploaded image), with a live preview against the book's title/author. ## 14. Cross-Cutting Requirements - Fully responsive: collapse the nav into a mobile menu, stack shelves vertically, keep the reader comfortable to read on small screens. - Full dark mode support across every screen and modal, not just the reader. - All user data (library, progress, highlights, bookmarks, settings, stats, theme) must persist locally between sessions. - Empty/loading/error states everywhere (e.g. TTS model downloading, AI generation in progress, no search results, no highlights yet). - Smooth micro-interactions: hover scale on cards/buttons, fade/slide transitions on modals, animated progress bars. ## 15. Suggested Tech Stack React + TypeScript + Tailwind CSS, component-based architecture, client-side local storage for persistence, no backend required beyond optional third-party AI/TTS API calls made directly from the client using a user-supplied API key. --- **Build this as a polished, production-quality single-page app.** Prioritize the visual design system and the Reader View + Explore/Bookshelf flows first, then layer in the AI Ebook Maker, TTS studio, ambient audio, video ambiance, and quote studio. Use tasteful stock imagery for book covers and keep copy warm and literary in tone throughout (button labels, empty states, section headers).

A system prompt was added to support web rendering