System Requirements Document for cavite-mutiny-meme

1. Introduction

cavite-mutiny-meme is a humour-first web app that generates witty, humorous memes about The Cavite Mutiny of 1872, captioned in Taglish (a combination of Tagalog and English), and delivers each meme as a downloadable image. The product treats a historical grievance with affectionate, witty irreverence — the opposite of a museum plaque — for an audience of young Filipino internet users who think in Taglish, share memes in group chats, and expect an app to be a toy, not a tool.

The app serves two accepted audiences:

• Meme Creator — types a Taglish caption, picks a template, renders the meme image, and downloads it for sharing.
• Meme Browser — browses a ready-made gallery of Cavite Mutiny memes and shares them.

Product intent, in priority order: (1) a meme generator that turns a Taglish caption plus a chosen template into a rendered meme image; (2) a ready-made gallery of Cavite Mutiny memes that people can browse and share; (3) a humorous, witty tone throughout; (4) Taglish captions; (5) the Cavite Mutiny of 1872 as the subject matter; (6) image output the user can download.

2. System Overview

The current delivery is a custom-UI web application with three pages — Landing, Meme Generator, and Gallery — all reachable anonymously (access_requirement: none). There is no account, login, or identity requirement anywhere in the accepted scope; the app is a toy, not a tool, and every accepted journey completes without establishing identity.

Current accepted behavior:

• An anonymous Landing page introduces the Cavite Mutiny meme generator, its Taglish humorous purpose, and the gallery before interactive use.
• The Meme Generator page provides the cohesive caption-entry, template-selection, image-rendering, and download workflow for Cavite Mutiny memes.
• The Gallery page displays ready-made Cavite Mutiny memes for browsing and provides sharing actions for selected memes.

Actors:

• Meme Creator (active human persona) — initiates generation on the Meme Generator page.
• Meme Browser (active human persona) — browses and shares on the Gallery page.
• Rendering service (system process) — composites the Taglish caption onto the selected template and produces the meme image; supports the human-facing generator workflow but is not itself a human-facing owner.
• Share recipient / group chat (external destination) — receives a shared meme through the browser's native share affordance; outbound-only, not a persona.

Narrow exclusions (binding):

• No blue, indigo, or violet primary/accent anywhere in the UI.
• No white or near-white page backgrounds — the ground is always a colour field.
• No gradient-blob heroes or soft violet-to-pink SaaS gradients.
• No uniform grid of identical hover-lift cards for the gallery.
• No sepia historical photography or solemn museum-plaque styling.
• No Inter, Roboto, Poppins, Arial, or system-ui for headings or body.
• No sharp 90° corners on UI chrome (the meme canvas is the only rectangle).
• No bouncy motion that obscures the caption while the user is typing.
• No stock photography, no sepia historical photos, no gradient blobs in imagery.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. All three pages are first-party, application-owned custom UI. The app owns the caption input, the template picker, the live meme canvas, the render step, the download action, and the gallery of ready-made memes. The only non-first-party surfaces are the browser's own download and share affordances, which the app invokes but does not own.

Access ownership. Every accepted page is anonymously reachable. No accepted journey requires a user to establish identity, sign in, or resume durable actor-specific state; the app therefore has no login, signup, or account surface, and none is inferred. Durable state that does exist is product content (the ready-made gallery and the template set), not per-user state.

Current vs. future. Everything in this document is current. No future-horizon requirements were accepted in the authoritative thread; the only forward-looking material is the user's original one-off request for a single meme image, which is fully satisfied by the current generator and download workflow.

Tone boundary. Humorous and witty is a hard constraint on captions, sample content, and copy — not a licence to add adjacent social, commenting, or community features, none of which were accepted.

2b. Source Content Inventory

Not applicable — no reference directive in this project declares content_source, so no source content inventory is rendered.

2c. Page Content and Component Coverage

Landing

• Information / state: Anonymous public entry. Explains what the app is (a Cavite Mutiny of 1872 meme generator), that captions are Taglish, that the tone is humorous and witty, and that a ready-made gallery exists. No user-specific state; no loading state beyond first paint.
• Primary actions: Gumawa ng Meme (primary pill, #FF2D8A) → Meme Generator. Tingnan ang Gallery (outlined pill in ink) → Gallery.
• Supporting actions: None required. No account, sign-in, or preference controls.
• Domain entities: Meme template (illustrated 1872 Cavite scene), sample Taglish caption, ready-made meme (preview reference).
• Component responsibilities:
  • Hero headline block — 112px Baloo 2, 800 weight, tight tracking, sentence case, ink-plum #1A0B14, running edge-to-edge across the upper half on the hot-pink #FF6FB5 ground; the word "MEME" is set inside a #B6FF3C lime capsule that breaks the baseline.
  • Floating sample meme card — a single meme card tilted −4°, resting on a curved blush #FFF7FB panel, already showing a sample Taglish caption; the card itself stays a clean rectangle so it reads as a real meme.
  • CTA pair — two full-pill buttons pinned beneath the card; both become full-width pills at 375px.
  • Curved seam — a 120px-radius arc dividing the pink hero from the blush gallery section, carrying a lime marquee of Taglish punchlines ("grabe naman ang 1872", "chismis era") scrolling along the seam.
  • Decorative layer — glossy 3D blobs and flat sticker-style cut-outs (musket, fan, gavel, chismis speech bubble) as pill-and-blob vector icons; decoration only, never covering readable text or controls.
• States:
  • Loading: first paint only; no data fetch required for the hero.
  • Empty: not applicable — the hero is static content.

• Success: hero renders with headline, sample card, both CTAs, and the punchline marquee.
• Error: if the sample card's image fails, the card frame and its caption text remain visible so the page still explains the product.
• Recovery: both CTAs remain reachable regardless of decorative or image failure.
• Reduced motion: the marquee becomes a static wrapped row of punchlines, each fully readable; the curved wipe is removed and section change is instant.

Meme Generator

• Information / state: Anonymous working surface. Holds the in-progress caption text, the currently selected template, and the rendered meme image state. The canvas is sticky so the working surface stays visible while the user edits.
• Primary actions: Type a Taglish caption; pick a template from the tilted thumbnail strip; Generate (primary pill, #FF2D8A) to render the meme image; Download (primary pill, #FF2D8A) pinned beneath the canvas to save the rendered image.
• Supporting actions: Edit the caption and re-generate; switch templates and re-generate; clear the caption.
• Domain entities: Taglish caption (text), meme template (illustrated 1872 Cavite scene — soldiers, friars, workers — drawn in rounded pop style), rendered meme image (rectangular export).
• Component responsibilities:
  • Caption input — capsule-shaped text field in the left stack; accepts Taglish text; never obscured by motion while typing.
  • Template strip — horizontally scrollable strip of tilted, sticker-shaped thumbnails rotated 3–6°, which wobble into place on selection; never a grid of identical cards.
  • Live meme canvas — sticky blush #FFF7FB panel with 48px radius and a soft offset pink shadow at 12% opacity; holds the rectangular meme canvas; gives a glossy highlight sweep when a new caption renders.
  • Generate pill — full pill, squashes 4% on press and springs back.
  • Download pill — pinned beneath the canvas; full pill; saves the rendered image.
  • Decorative layer — glossy blobs and sticker cut-outs framing the two-zone split; decoration only.
• States:

• Loading: while rendering, the canvas shows a glossy highlight sweep over the previous frame; the Generate pill shows a pressed/working state.
• Empty: before any caption is typed, the canvas shows the selected template with an empty caption area and a prompt to type a Taglish caption; Download is unavailable until a render exists.
• Success: the rendered meme image appears on the canvas with a glossy highlight sweep; Download becomes available.
• Error: if rendering fails, the canvas keeps the last good frame and an inline message states the render did not complete; the caption and template selection are preserved.
• Recovery: the user can press Generate again without retyping; the caption and selected template are never discarded on failure.
• Reduced motion: the highlight sweep and the thumbnail wobble are removed; selection and render are instant state changes; the template strip remains horizontally scrollable so every thumbnail can be brought fully into view.

Gallery

• Information / state: Anonymous browse surface. Displays the ready-made collection of Cavite Mutiny memes with their Taglish captions. No user-specific state.
• Primary actions: Browse the masonry of meme cards; select a meme; Share the selected meme.
• Supporting actions: Scroll the masonry; open a meme at full readable size.
• Domain entities: Ready-made meme (image + Taglish caption), sticker caption tag, share target (external group chat).
• Component responsibilities:
  • Meme masonry — a masonry of meme cards with rotated sticker captions, deliberately not a uniform grid of identical hover-lift cards.
  • Sticker caption tags — rotated 3–6°, drifting 2px on hover; carry the Taglish punchline for each meme.
  • Share action — per-meme control that hands the meme image to the browser's native share affordance for an external group chat.
  • Decorative layer — glossy blobs and sticker cut-outs along the curved seam; decoration only.
• States:
  • Loading: masonry placeholders in blush on the pink ground while the ready-made set loads.
  • Empty: if the ready-made set is unavailable, the page states that no memes are available right now and offers a pill link to the Meme Generator so the visitor can still make one.
  • Success: the masonry renders with each meme's image and Taglish caption tag fully readable.
  • Error: if an individual meme image fails, its card keeps its caption tag visible so the joke still lands; the rest of the masonry is unaffected.

• Recovery: a failed card can be retried by reloading the masonry; the share action is disabled only for the card whose image failed.
• Reduced motion: sticker tags stop drifting and the curved wipe is removed; the masonry remains fully scrollable and every caption tag is readable.

3. Functional Requirements

Each requirement is a distinct story point with provenance, lifecycle facts, and observable acceptance.

FR-1 — Generate a Cavite Mutiny meme image from a Taglish caption and a template (explicit) As a Meme Creator, I should type a Taglish caption and pick a template, and the app should render the meme image, so that I get a witty Cavite Mutiny meme as an image.

• Trigger/input: the Meme Creator enters Taglish caption text and selects a template thumbnail on the Meme Generator page.
• Observable result: the live meme canvas displays the rendered meme image — the selected 1872 Cavite illustration with the Taglish caption composited onto it — and a glossy highlight sweep confirms the new render.
• Access state: anonymous; no identity required.
• Failure/recovery: if rendering fails, the canvas keeps the last good frame, an inline message states the render did not complete, and the caption and template selection are preserved so the creator can press Generate again without retyping.
• Continuation: the rendered image is available for download (FR-2) and the creator can edit the caption or switch templates and re-generate.

FR-2 — Download the generated meme image (explicit) As a Meme Creator, I should download the generated meme image, so that I can share it in a group chat.

• Trigger/input: the Meme Creator presses the Download pill beneath the canvas after a successful render.
• Observable result: the meme image is saved to the creator's device as a clean rectangle that looks native in a group chat.
• Access state: anonymous; Download is available only once a render exists.
• Failure/recovery: if the download does not complete, the rendered image remains on the canvas and Download stays available to retry; the caption and template are not lost.
• Continuation: the creator can return to editing and generate another meme.

FR-3 — Browse a ready-made gallery of Cavite Mutiny memes (explicit) As a Meme Browser, I should browse a ready-made gallery of Cavite Mutiny memes, so that I can enjoy and pick memes without making one myself.

• Trigger/input: the Meme Browser opens the Gallery page.
• Observable result: a masonry of ready-made Cavite Mutiny memes renders, each with its Taglish caption tag fully readable.
• Access state: anonymous; no identity required.
• Failure/recovery: if the ready-made set is unavailable, the page states that no memes are available right now and offers a pill link to the Meme Generator; if an individual meme image fails, its caption tag stays visible and the rest of the masonry is unaffected.
• Continuation: the browser can select a meme and share it (FR-4), or move to the Meme Generator to make one.

FR-4 — Share a ready-made meme (explicit) As a Meme Browser, I should share a meme from the gallery, so that other people receive it.

• Trigger/input: the Meme Browser selects a meme in the gallery and invokes its Share action.
• Observable result: the meme image is handed to the browser's native share affordance and delivered to the chosen external destination (for example a group chat).
• Access state: anonymous; no identity required.
• Failure/recovery: if the share affordance is unavailable or the share is cancelled, the browser stays on the Gallery with the meme still selected and can retry or choose another meme.
• Continuation: the browser continues browsing the masonry.

FR-5 — Understand the product before interacting (required_inference) As a Meme Creator or Meme Browser, I should understand on first arrival that this is a Taglish, humorous Cavite Mutiny of 1872 meme generator with a ready-made gallery, so that I know what to do next.

• Trigger/input: the visitor opens the Landing page anonymously.
• Observable result: the hero headline "1872 CAVITE MUTINY, PERO MAKE IT MEME" renders with "MEME" in a lime capsule, a sample meme card tilted −4° shows a sample Taglish caption, and both CTAs (Gumawa ng Meme, Tingnan ang Gallery) are visible and reachable.
• Access state: anonymous; this is the public entry surface.
• Failure/recovery: if the sample card image fails, the card frame and its caption text remain visible so the page still explains the product; both CTAs remain reachable.
• Continuation: the visitor enters the Meme Generator or the Gallery.

FR-6 — Captions are Taglish (explicit constraint) As a Meme Creator, my caption should be Taglish — a combination of Tagalog and English — so that the meme lands with the audience it is written for.

• Trigger/input: the creator types into the caption input.
• Observable result: the typed Taglish caption is what appears composited on the rendered meme image.
• Access state: anonymous.
• Failure/recovery: the caption input never discards typed text on a render failure.
• Continuation: the creator can edit and re-generate.

FR-7 — Meme subject matter is the Cavite Mutiny of 1872 (explicit constraint) As a Meme Creator or Meme Browser, every template and every ready-made meme should depict the Cavite Mutiny of 1872, so that the product stays on its subject.

• Trigger/input: template selection on the Meme Generator; gallery load on the Gallery.
• Observable result: templates and ready-made memes are flat, high-contrast illustrated scenes of 1872 Cavite — soldiers, friars, workers — drawn in rounded pop style.
• Access state: anonymous.
• Failure/recovery: not applicable — this is a content constraint on the template set and the ready-made set.
• Continuation: not applicable.

FR-8 — Humorous and witty tone (explicit constraint) As a Meme Creator or Meme Browser, the captions, sample content, and copy should be humorous and witty, so that the product reads as a toy rather than a museum plaque.

• Trigger/input: any caption, sample caption, or product copy the user reads.
• Observable result: the tone is loud, warm, playful, and slightly caffeinated throughout.
• Access state: anonymous.
• Failure/recovery: not applicable — this is a tone constraint.
• Continuation: not applicable.

4. User Personas

Meme Creator

• Product context: A young Filipino internet user who thinks in Taglish and wants a witty meme about the Cavite Mutiny of 1872 as an image they can drop into a group chat. They arrive anonymously, with no account and no intention of making one.
• Primary goal: Turn a Taglish punchline plus a chosen 1872 Cavite template into a rendered meme image, then download it.
• Distinct accepted responsibilities: Types the Taglish caption; picks a template from the tilted thumbnail strip; presses Generate; reads the rendered result on the live canvas; presses Download to save the image; edits and re-generates when the joke does not land.
• Relevant inputs or decisions: The caption text itself (Taglish), the template choice among the 1872 Cavite illustrations, and the decision that the rendered result is good enough to download.
• Interactions with other accepted participants: None required in-product. The creator's downstream counterparty is an external group chat that receives the downloaded image — outbound only, not a persona. The creator may also cross into the Gallery to look at ready-made memes for inspiration.
• Observable success: A rendered meme image appears on the canvas with a glossy highlight sweep, Download becomes available, and the saved file is a clean rectangle that looks native in a group chat.
• What makes this role different: The Meme Creator is the only role that produces new content and the only role that owns the render-and-download lifecycle. Their work is authoring under a tone constraint; the Meme Browser's work is selection and distribution.

Meme Browser

• Product context: A young Filipino internet user who wants the joke without doing the work — someone who opens the app to scroll ready-made Cavite Mutiny memes and send the best one to friends. They also arrive anonymously.
• Primary goal: Browse the ready-made gallery of Cavite Mutiny memes and share one.
• Distinct accepted responsibilities: Scrolls the masonry of ready-made memes; reads each Taglish caption tag; selects a meme; invokes Share to hand it to an external destination.
• Relevant inputs or decisions: Which meme in the masonry is worth sharing, and which external destination receives it.
• Interactions with other accepted participants: The share recipient is an external group chat — outbound only, not a persona. The browser may cross into the Meme Generator if the gallery does not have what they want.
• Observable success: The masonry renders with each meme's image and Taglish caption tag fully readable, and the selected meme is delivered through the browser's native share affordance.
• What makes this role different: The Meme Browser never authors content and never touches the canvas, caption input, or template strip. Their lifecycle is browse → select → share, with no render step and no download step.

5. Core User Flows

Flow A — Meme Creator makes and downloads a Taglish Cavite Mutiny meme

1. Starting context: The Meme Creator lands on the Landing page anonymously. The hot-pink hero renders the headline "1872 CAVITE MUTINY, PERO MAKE IT MEME" with "MEME" in a lime capsule, a sample meme card tilted −4° shows a sample Taglish caption, and both CTAs are visible.
2. Entry decision: The creator presses the Gumawa ng Meme pill (#FF2D8A). The pill squashes 4% and springs back.
3. Arrival: The Meme Generator page opens in a two-zone split — a stack of capsule inputs and a template strip on the left, a sticky blush panel holding the live meme canvas on the right with the Download pill pinned beneath it.
4. Caption input: The creator types a Taglish caption into the capsule text field. The caption is a combination of Tagalog and English, written to be humorous and witty about the Cavite Mutiny of 1872. Motion never obscures the caption while they type.
5. Template selection: The creator scrolls the horizontally scrollable strip of tilted, sticker-shaped thumbnails (rotated 3–6°) and selects one. The chosen thumbnail wobbles into place. The template is a flat, high-contrast illustrated scene of 1872 Cavite — soldiers, friars, workers — drawn in rounded pop style.
6. Commitment: The creator presses the Generate pill. The pill squashes 4% and springs back.
7. Observable result: The live meme canvas gives a glossy highlight sweep and displays the rendered meme image — the selected 1872 Cavite illustration with the Taglish caption composited onto it. The canvas stays a clean rectangle inside the 48px-radius blush panel.
8. Failure/recovery (if rendering fails): The canvas keeps the last good frame and an inline message states the render did not complete. The caption text and the selected template are preserved. The creator presses Generate again without retyping.

9. Revision (optional): If the joke does not land, the creator edits the caption or switches templates and presses Generate again; the canvas sweeps again with the new render.
10. Download: The creator presses the Download pill pinned beneath the canvas. The meme image is saved to their device as a clean rectangle that looks native in a group chat.
11. Continuation: The creator can edit the caption and generate another meme, or move to the Gallery to browse ready-made memes.

Flow B — Meme Browser browses the gallery and shares a meme

1. Starting context: The Meme Browser lands on the Landing page anonymously and reads that the app is a Taglish, humorous Cavite Mutiny of 1872 meme generator with a ready-made gallery.
2. Entry decision: The browser presses the Tingnan ang Gallery pill, outlined in ink. The pill squashes 4% and springs back.
3. Arrival: The Gallery page opens. A curved 120px-radius arc divides the pink hero from the blush gallery section, with the lime marquee of Taglish punchlines ("grabe naman ang 1872", "chismis era") scrolling along the seam.
4. Browsing: The browser scrolls a masonry of ready-made Cavite Mutiny memes — deliberately not a uniform grid of identical hover-lift cards. Each meme carries a rotated sticker caption tag (3–6°) holding its Taglish punchline, drifting 2px on hover.
5. Reading: Each meme's image and its Taglish caption tag are fully readable as the browser scrolls.
6. Selection: The browser selects the meme worth sending.
7. Commitment: The browser invokes the meme's Share action.
8. Observable result: The meme image is handed to the browser's native share affordance and delivered to the chosen external destination — for example a group chat.
9. Failure/recovery (if the share is unavailable or cancelled): The browser stays on the Gallery with the meme still selected and can retry or choose another meme.
10. Failure/recovery (if the ready-made set is unavailable): The page states that no memes are available right now and offers a pill link to the Meme Generator so the visitor can still make one. If an individual meme image fails, its caption tag stays visible so the joke still lands, and the rest of the masonry is unaffected.
11. Continuation: The browser keeps scrolling the masonry, or crosses into the Meme Generator to make their own meme.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Karim Rashid — sensual pop minimalism for history's most extra mutiny. Headline idea: history's most extra mutiny, rendered as candy-coloured pop.

Colour tokens — light mode

No blue, no indigo, no gradient blobs — flat glossy colour fields with a white specular highlight.

Typography

• Headings: Baloo 2 at 800 weight, tight tracking (−0.02em), sentence case with occasional all-caps Taglish punchlines; oversized and rounded so headlines feel like inflatable letters.
• Body: Quicksand 500/600 with wide 1.6 line-height and generous letter-spacing (0.01em) for a soft, toy-like read.
• Type scale: 1.333 modular — 112 / 84 / 56 / 40 / 28 / 20 / 16. Display sizes run from 40px mobile to 112px desktop via clamp().

Shape language

• Capsules and blobs only. Buttons are full pills; panels are rounded rectangles with 32–48px radii and one soft offset shadow in #FF2D8A at 12% opacity.
• Section boundaries are curved — a 120px-radius arc where pink meets blush.
• Sticker-shaped tags rotate 3–6°.
• No sharp 90° corners anywhere except inside the meme canvas itself, which stays rectangular so the exported image looks like a real meme.

Layout

• Asymmetric single-column playground on a 12-column grid with a 96px gutter at 1280px.
• Landing: a curved pink field with a giant Taglish headline on the left and a floating meme card tilted −4° on the right.
• Generator: two-zone split — left is a stack of capsule inputs and a template strip; right is a sticky blush panel holding the live meme canvas with the Download pill pinned beneath it.
• Gallery: a masonry of meme cards with rotated sticker captions, not a uniform grid of identical hover-lift cards.
• At 375px everything stacks to one column, the canvas scales to 100% width, and controls wrap rather than shrink below 44px tap targets.

Imagery

• Glossy 3D blobs and candy-coloured props as decorative framing, plus flat sticker-style cut-outs (a musket, a fan, a gavel, a chismis speech bubble) rendered as pill-and-blob vector icons.
• The meme templates themselves are flat, high-contrast illustrated scenes of 1872 Cavite — soldiers, friars, workers — drawn in the same rounded pop style so the humour reads before the caption does.
• No stock photography, no sepia historical photos, no gradient blobs.

Readability rule (takes precedence over every decorative gesture): headlines, wordmarks, labels, numbers, and cards' text and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, and no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. Moving and scrollable content (the punchline marquee, the template strip) may cross the viewport or container edge by design; every item must become fully readable as it passes. Under prefers-reduced-motion, provide a usable static arrangement — wrap items into rows or allow horizontal scrolling so each item can be brought fully into view.

7. Signature Design Concept

The toy slab on a hot-pink field.

The public entry is a hot-pink #FF6FB5 field, not a white page. A 112px Baloo 2 headline in #1A0B14 runs edge-to-edge across the upper half — "1872 CAVITE MUTINY, PERO MAKE IT MEME" — with the word MEME set in a #B6FF3C lime capsule that breaks the line and interrupts the baseline. Below and to the right, a single meme card floats tilted −4° on a curved blush #FFF7FB panel, already showing a sample Taglish caption, with two capsule CTAs pinned beneath it: Gumawa ng Meme in #FF2D8A and Tingnan ang Gallery outlined in ink.

The concept carries through the whole product as one gesture: the working surface is a physical toy slab you decorate. On the Meme Generator, the meme canvas lives inside a sticky blush panel with a 48px radius and a soft offset pink shadow, so the canvas reads as an object you are handling rather than a form you are filling. The template picker is a horizontally scrollable strip of tilted, sticker-shaped thumbnails (3–6° rotation) that wobble into place on selection — never a grid of identical cards. A curved 120px-radius arc divides the pink hero from the blush gallery section, with a lime marquee of Taglish punchlines ("grabe naman ang 1872", "chismis era") scrolling along the seam. Every action button is a full pill that squashes 4% on press and returns with a spring — while the exported meme itself stays a clean rectangle so it looks native in a group chat.

At 375px the headline stacks to 40px, the card sits below it at full width, and both CTAs become full-width pills.

This concept recomposes only accepted content, states, and controls: the headline, the sample Taglish caption, the two CTAs, the template strip, the canvas, the Download pill, the gallery masonry, and the punchline marquee.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: The floating sample meme card, tilted −4° on its curved blush panel, carrying a sample Taglish caption about the 1872 Cavite Mutiny.
• Input → transformation → outcome thesis: The visitor's pointer or touch drifts across the hero → the tilted meme card and the glossy blob props shift in layered 2D depth, and the lime punchline marquee slides along the curved seam → the visitor reads the joke and the product's purpose before pressing either CTA.
• Motion vocabulary: Expressive but never chaotic. Capsule buttons squash 4% and spring back on press; template thumbnails wobble into place; the meme canvas gives a glossy highlight sweep when a new caption renders; sticker tags drift 2px on hover. Section transitions use a curved colour-block wipe (pink to blush) rather than a fade.
• Composed first frame: Hot-pink field filling the viewport. The 112px Baloo 2 headline spans the upper half with "MEME" popped into its lime capsule. The tilted meme card rests on the curved blush panel at lower right, sample Taglish caption legible. Both capsule CTAs sit pinned beneath the card. The lime punchline marquee is mid-scroll along the 120px-radius seam.
• Reduced-motion state: The curved colour-block wipe and the button squash are removed, leaving only instant state changes. The punchline marquee becomes a static wrapped row of punchlines, each fully readable. The template strip remains horizontally scrollable so every thumbnail can be brought fully into view. The hero renders as a composed still frame with the headline, card, and both CTAs fully visible and reachable.

No 3D/WebGL scene is required: the direction specifies layered_2d hero dimensionality, so no Canvas/R3F/Drei dependency is mandated.

9. Non-Functional Requirements

• NFR-1 — Tone and language (explicit). Meme captions must be Taglish — a combination of Tagalog and English — and the tone must be humorous and witty. Rationale: both are explicit hard constraints in the authoritative user evidence.
• NFR-2 — Subject fidelity (explicit). All templates and ready-made memes must depict the Cavite Mutiny of 1872. Rationale: explicit hard constraint.
• NFR-3 — Image output (explicit). The app must render the meme as an image and the user must be able to download it. Rationale: explicit requirement that the meme be delivered as an image.
• NFR-4 — Anonymous access (required_inference). Every accepted page must be reachable without establishing identity. Rationale: no accepted journey requires durable actor-specific state, a commitment bound to a participant, or a value transfer; the app is a toy, not a tool.
• NFR-5 — Readable text and controls at every viewport. Headlines, wordmarks, labels, numbers, and cards' text and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. Tap targets must not shrink below 44px. Rationale: creative-direction readability rule, which takes precedence over decorative gestures.
• NFR-6 — Reduced motion. Under prefers-reduced-motion, the curved colour-block wipe and the button squash must be removed, leaving only instant state changes, and moving or scrollable content must provide a usable static arrangement in which every item can be brought fully into view. Rationale: creative-direction motion rule.

• NFR-7 — Palette and typography fidelity. The specified palette (#FF6FB5, #FFF7FB, #1A0B14, #FF2D8A, #B6FF3C, #7A2E57) and fonts (Baloo 2 for headings, Quicksand for body) must be used as specified, with no blue, indigo, or violet primary/accent, no white or near-white page backgrounds, and no Inter, Roboto, Poppins, Arial, or system-ui for headings or body. Rationale: explicit creative direction and user design constraints.
• NFR-8 — Caption legibility during typing. Motion must never obscure the caption while the user is typing. Rationale: explicit creative-direction prohibition on bouncy motion that obscures the caption.
• NFR-9 — Export fidelity. The exported meme must remain a clean rectangle so it looks native in a group chat, even though all UI chrome uses capsules and blobs. Rationale: explicit creative-direction signature move.

10. Tech Stack

No technology choices were specified by the user. The following are coherent defaults for the accepted scope, labeled as defaults.

• Frontend: React with a component-based page structure for Landing, Meme Generator, and Gallery. [Default — not specified by user]
• Meme rendering: client-side canvas compositing of the Taglish caption onto the selected 1872 Cavite template, producing a downloadable image. [Default — not specified by user]
• Backend: Python / FastAPI serving the template set and the ready-made gallery collection. [Default — not specified by user]
• Storage: a lightweight store for the template set and the ready-made gallery collection. [Default — not specified by user]
• Packaging: Docker / docker-compose for the frontend and backend services. [Default — not specified by user]
• Fonts: Baloo 2 (headings) and Quicksand (body), as specified by the creative direction.

Kubernetes is not required for the accepted scope.

11. Assumptions and Constraints

Assumptions

• A-1. The app is delivered as a custom-UI web application with exactly three pages — Landing, Meme Generator, and Gallery — per the versioned page contract. [Assumption — from Planning Scope]
• A-2. All three pages are anonymously reachable; no account, login, or identity surface exists. [Assumption — required_inference from the absence of any accepted identity-bound journey]
• A-3. The ready-made gallery is product content curated by the app, not user-submitted content. [Assumption — no user submission capability was accepted]
• A-4. Sharing is performed through the browser's native share affordance to an external destination; the app does not own the destination. [Assumption — no in-app social or messaging capability was accepted]
• A-5. The template set consists of flat, high-contrast illustrated scenes of 1872 Cavite drawn in the rounded pop style described by the creative direction. [Assumption — from the creative direction's imagery specification]

Constraints

• C-1. Meme captions must be Taglish (Tagalog and English combination). (explicit)
• C-2. Meme subject matter is the Cavite Mutiny of 1872. (explicit)
• C-3. Tone must be humorous and witty. (explicit)
• C-4. The meme must be delivered as an image the user can download. (explicit)
• C-5. No blue, indigo, or violet primary/accent anywhere in the UI. (explicit)
• C-6. No white or near-white page backgrounds — the ground is always a colour field. (explicit)
• C-7. No gradient-blob heroes or soft violet-to-pink SaaS gradients. (explicit)
• C-8. No uniform grid of identical hover-lift cards for the gallery. (explicit)
• C-9. No sepia historical photography or solemn museum-plaque styling. (explicit)
• C-10. No Inter, Roboto, Poppins, Arial, or system-ui for headings or body. (explicit)
• C-11. No sharp 90° corners on UI chrome; the meme canvas is the only rectangle. (explicit)
• C-12. No bouncy motion that obscures the caption while the user is typing. (explicit)
• C-13. No stock photography, no sepia historical photos, no gradient blobs in imagery. (explicit)
• C-14. The generic indigo/blue-on-white SaaS template is forbidden for this project. (explicit)

12. Glossary

• Cavite Mutiny of 1872 — The historical event that is the subject matter of every template and every ready-made meme in this product.
• Taglish — A combination of Tagalog and English, used for all meme captions and for the product's punchline copy.
• Meme template — A flat, high-contrast illustrated scene of 1872 Cavite (soldiers, friars, workers) drawn in rounded pop style, onto which a Taglish caption is composited.
• Meme canvas — The rectangular working surface on the Meme Generator page where the rendered meme image appears; the only rectangle in the UI.
• Rendered meme image — The output of compositing a Taglish caption onto a selected template; a clean rectangle that looks native in a group chat.
• Ready-made meme — A pre-made Cavite Mutiny meme in the Gallery, carrying its own Taglish caption tag.
• Sticker caption tag — The rotated (3–6°) tag carrying a meme's Taglish punchline in the Gallery.
• Punchline marquee — The lime scrolling strip of Taglish punchlines ("grabe naman ang 1872", "chismis era") running along the curved seam between the pink hero and the blush gallery section.
• Meme Creator — The accepted persona who types a Taglish caption, picks a template, generates the meme image, and downloads it.
• Meme Browser — The accepted persona who browses the ready-made gallery and shares memes.