silent-building

John Pennington

You are building a browser-based mockup generator for designers, writers, and content creators. It produces realistic-looking UI mockups of WhatsApp conversations, SMS threads, and email clients — for use in portfolios, explainer videos, fiction writing, app demos, and social media content. All exported images carry a subtle "MOCKUP" watermark so they are clearly creative assets, not genuine screenshots. Single HTML file, vanilla JS + HTML5 Canvas, no dependencies, runs by double-click. --- ## ARCHITECTURE One page. Three tabs across the top: - **WhatsApp** — chat bubble mockup - **SMS** — native text message thread mockup - **Email** — email client mockup Left panel: input form (changes per tab). Right panel: live preview canvas, updates in real time as the user types. Below the preview: an **Export PNG** button. --- --- ## TAB 1 — WHATSAPP MOCKUP --- ## Input form - **Your name** (the right-side sender) - **Their name** (the left-side sender — shown in contact header) - **Their avatar colour** (colour picker — generates an initial-letter avatar circle) - **Messages** — a repeating message builder: - Sender toggle: "Me" | "Them" - Message text (textarea) - Timestamp (text input, e.g. "14:32") - "Add message" button — appends to the thread - Each added message shown as a deletable row in the form - **Show online status** toggle: "Online" | "last seen today at [time input]" - **Dark mode** toggle --- ## Canvas render — WhatsApp style - Phone frame drawn on canvas: rounded rectangle, dark bezel - Status bar at top: time (left), signal/wifi/battery icons (right) — drawn as simple shapes - WhatsApp header bar: back arrow, avatar circle with initial, contact name, online status, video/call icons - Chat area: light grey background (or dark if dark mode) - Message bubbles: - **Them**: white bubble, left-aligned, slightly rounded, tail bottom-left - **Me**: WhatsApp green (#25D366 or #DCF8C6 in light mode), right-aligned, tail bottom-right, double tick (grey = sent, blue = read — user toggles per message) - Timestamp shown inside bubble, bottom-right, small grey text - Bottom bar: text input field drawn (not functional), mic icon, attachment icon - Subtle "MOCKUP" text watermark, bottom-right of canvas, 10% opacity white or grey --- --- ## TAB 2 — SMS MOCKUP --- ## Input form - **Contact name** (shown at top of thread) - **Messages** — same repeating builder as WhatsApp tab (Sender, Text, Timestamp) - **Carrier style**: iOS | Android (Google Messages) - **Dark mode** toggle --- ## Canvas render --- ## iOS style - Phone frame, status bar - Header: back arrow with unread count badge, contact name centred, video/call icons - Bubbles: - **Them**: grey bubble, left-aligned - **Me**: blue bubble (#007AFF), right-aligned - Timestamps shown between message groups (centred, small grey text) - iMessage delivery note below last sent message: "Delivered" or "Read" - Background: white (light) or near-black (dark) --- ## Android / Google Messages style - Material Design feel: clean white background, coloured header bar (#1A73E8) - Bubbles: - **Them**: light grey, left-aligned - **Me**: blue, right-aligned - Timestamps centred between groups - Bottom compose bar with emoji, attach, send icons - "MOCKUP" watermark same as WhatsApp tab --- --- ## TAB 3 — EMAIL MOCKUP --- ## Input form - **From name** and **From email address** - **To name** and **To email address** - **Subject line** - **Body** (multi-line textarea — supports line breaks, rendered as paragraphs) - **Date and time** (text input) - **Email client style**: Gmail | Apple Mail | Outlook - **Has attachment** toggle — if on: filename input (e.g. "Report_Q3.pdf"), shown as an attachment chip below the body --- ## Canvas render --- ## Gmail style - White background, thin top bar with Gmail red logo (drawn as text "Gmail" in red) - Email header block: - Subject line in bold, large - From: name (bold) + email address - To: name + email - Date right-aligned - Star and reply icons (drawn as shapes) - Avatar circle left of sender name (initial letter, coloured) - Body text rendered in clean serif or sans, line-wrapped to fit canvas width - Attachment chip if toggled: paper-clip icon + filename + file size (placeholder "24 KB") --- ## Apple Mail style - Light grey background, white content card - Toolbar at top: back arrow, trash, folder, reply icons - Header: From, To, Subject, Date in a clean stacked layout - Body below a thin divider line --- ## Outlook style - Dark blue top bar with "Outlook" in white - Reading pane layout: sender name bold, subject below, date right-aligned - Body in clean sans-serif - "MOCKUP" watermark: bottom-right of canvas, 8% opacity --- --- ## EXPORT - **Export PNG** button below each preview - Canvas exported via `canvas.toDataURL('image/png')` - Filename auto-set: `whatsapp-mockup.png`, `sms-mockup.png`, `email-mockup.png` - Watermark is baked into the exported image — it cannot be cropped without obvious effort --- --- ## MESSAGE BUILDER UX The message list in each tab works as follows: - User fills in sender + text + timestamp, clicks "Add Message" - Message appears as a row in a list below the form: `[Them] "See you at 3" — 14:21 [Delete]` - List is reorderable via up/down arrow buttons - Clicking Delete removes that message and re-renders the preview - Maximum 20 messages per mockup (beyond this, earlier messages scroll off the top of the phone frame) --- --- ## GENERAL RENDERING RULES - All UI elements drawn programmatically on Canvas — zero image assets required - Fonts: use system sans-serif stack for body text; monospace for timestamps where appropriate - Phone frame: 390×844px logical canvas (iPhone 14 proportions), scaled to fit the preview panel - Email canvas: 600px wide, height grows to fit content - All text wraps within bubble/body width — no overflow - Preview re-renders live on every input change (debounced 150ms) - Dark mode inverts backgrounds and adjusts text colours throughout --- --- ## CONSTRAINTS - Single HTML file - No external libraries, no CDN, no npm - Runs offline, opens by double-clicking the file - No server, no data sent anywhere — everything stays in the browser - Code must be complete and runnable — no placeholder stubs, no `// TODO` comments

Comments (0)

No comments yet. Be the first!

Page 1 of 9

System Requirements Document for silent-building

1. Introduction

The silent-building project is a browser-based mockup generator designed for designers, writers, and content creators. It allows users to create realistic-looking UI mockups of WhatsApp conversations, SMS threads, and email clients. These mockups are intended for use in portfolios, explainer videos, fiction writing, app demos, and social media content. All exported images include a subtle "MOCKUP" watermark to ensure they are recognized as creative assets rather than genuine screenshots.

2. System Overview

The application is delivered as a single HTML file using vanilla JavaScript and HTML5 Canvas, with no external dependencies. It runs offline and can be opened by double-clicking the file. The application features a single page with three tabs for WhatsApp, SMS, and Email mockups. Each tab provides an input form on the left and a live preview canvas on the right, which updates in real time as the user types. Users can export their mockups as PNG images with a watermark.

2a. Product Interpretation and Delivery Boundary

The product is a standalone, offline tool that does not require a server or network connection. It is designed to be dependency-free, ensuring all functionality is contained within a single HTML file. The application is intended for creative professionals who need to generate mockups quickly and efficiently without relying on external resources.

Page 2 of 9

2b. Source Content Inventory

Not applicable as there is no explicit content source directive.

2c. Page Content and Component Coverage

Landing

Information: Introduction to the mockup generator, its purpose, and target audience.
Actions: Enter the Mockup Studio.

Mockup Studio

Tabs: WhatsApp, SMS, Email.
Left Panel: Input form specific to each tab.
Right Panel: Live preview canvas.
Export: PNG export button below the preview.

Page 3 of 9

Input Form:
- Your name
- Their name
- Their avatar colour (colour picker)
- Messages (repeating builder with sender toggle, text, timestamp, add/delete message)
- Show online status toggle
- Dark mode toggle
Canvas Render:
- Phone frame with status bar and WhatsApp header
- Chat area with message bubbles
- Bottom bar with icons
- "MOCKUP" watermark

SMS

Input Form:
- Contact name
- Messages (same builder as WhatsApp)
- Carrier style toggle (iOS/Android)
- Dark mode toggle
Canvas Render:
- iOS style: Phone frame, header, message bubbles, delivery note
- Android style: Material Design, header bar, message bubbles
- "MOCKUP" watermark

Page 4 of 9

Email

Input Form:
- From name and email
- To name and email
- Subject line
- Body (multi-line textarea)
- Date and time
- Email client style toggle (Gmail/Apple Mail/Outlook)
- Has attachment toggle
Canvas Render:
- Gmail style: Header, body, attachment chip
- Apple Mail style: Toolbar, header, body
- Outlook style: Top bar, reading pane
- "MOCKUP" watermark

3. Functional Requirements

As a Designer, I should be able to create WhatsApp, SMS, and Email mockups with customizable sender/contact details, message threads, and styles, and export them as watermarked PNGs.
As a Writer, I should be able to author message text, timestamps, subject lines, and email bodies for mockups and export them as watermarked PNGs.
As a Content Creator, I should be able to switch between mockup types, style them appropriately, and export them as watermarked PNGs.

4. User Personas

Page 5 of 9

Designer

Designers use the generator to produce realistic-looking UI mockups for portfolios, app demos, and social media content. They configure sender/contact details, build and reorder message threads, choose carrier and email client styles, toggle dark mode, and export watermarked PNGs as clearly-labeled creative assets.

Writer

Writers use the generator to create believable conversation and email mockups for fiction writing and explainer videos. They author message text, timestamps, subject lines, and email bodies, then export watermarked PNGs to illustrate their narratives.

Content Creator

Content creators use the generator to produce mockup images for social media content and explainer videos. They switch between WhatsApp, SMS, and email tabs, style each mockup with the appropriate client look, and export watermarked PNGs ready to publish.

5. Core User Flows

Page 6 of 9

5.1 Creating a WhatsApp Mockup

Start: Open the application and select the WhatsApp tab.
Input: Enter "Your name", "Their name", and select "Their avatar colour".
Build Messages: Use the message builder to add messages with sender toggle, text, and timestamp.
Toggle Options: Set online status and dark mode as desired.
Preview: Observe the live preview updating in real time.
Export: Click "Export PNG" to save the mockup with a watermark.

5.2 Creating an SMS Mockup

Start: Open the application and select the SMS tab.
Input: Enter "Contact name".
Build Messages: Use the message builder to add messages.
Toggle Carrier Style: Choose between iOS and Android styles.
Toggle Dark Mode: Enable or disable dark mode.
Preview: Observe the live preview updating in real time.
Export: Click "Export PNG" to save the mockup with a watermark.

5.3 Creating an Email Mockup

Start: Open the application and select the Email tab.
Input: Enter "From" and "To" names and emails, "Subject line", and "Body".
Set Date and Time: Enter the date and time.
Toggle Email Client Style: Choose between Gmail, Apple Mail, and Outlook styles.
Toggle Attachment: Add an attachment if needed.
Preview: Observe the live preview updating in real time.
Export: Click "Export PNG" to save the mockup with a watermark.

Page 7 of 9

6. Visuals Colors and Theme

Muse: Pablo Stanley
Palette (light mode):
- Background: #FAF3E0
- Surface: #FFFFFF
- Text: #333333
- Primary: #FFC107
- Accent: #FF5722
- Muted: #BDBDBD
Typography:
- Headings: Nunito — Bold, large, rounded
- Body: DM Sans
- Scale: 1.25 modular, 48/32/24/18/16
Shape Language: Rounded shapes with playful, pill-like buttons and soft shadows.
Layout: Tidy, centered layout with ample margin and space between elements.

7. Signature Design Concept

The public entry features a split-screen hero with inputs on one side and a large, animated preview canvas on the other. It leverages warm background and accent colors, with large, rounded pill buttons in accent colors for primary actions. A playful, bouncy animation refreshes the canvas as inputs change. Subtle nodding or waving illustrations at the bottom of each tab indicate the type of mockup being created.

Page 8 of 9

8. Interaction Model & Motion Direction

Interaction Model: Animated
Motion Tempo: Expressive
Hero Dimensionality: Layered_2d
Landing Hero Motion Brief: The focal subject is the animated preview canvas, which transforms dynamically as inputs are modified. The motion vocabulary includes springy micro-interactions and playful hover states, with a composed first frame showing the initial state of the mockup. A reduced-motion state is available for accessibility.

9. Non-Functional Requirements

The application must run offline and open by double-clicking the HTML file.
All data must remain within the browser; no server or network connection is required.
The code must be complete and runnable without placeholder stubs or // TODO comments.

10. Tech Stack

HTML5
Vanilla JavaScript
HTML5 Canvas

11. Assumptions and Constraints

The application is delivered as a single HTML file with no external dependencies.
The application must run offline and be opened by double-clicking the file.
All exported images must include a watermark that cannot be easily removed.

Page 9 of 9

12. Glossary

Mockup: A visual representation of a user interface, used for demonstration or design purposes.
Canvas: An HTML5 element used for drawing graphics via scripting.
Watermark: A faint design or text included in an image to indicate its status as a mockup or creative asset.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.