Riff Lab

Prompt

Build a polished web app called RiffLab. Anyone creating content with AI drops in a prompt, caption, or link and gets funny, specific, joke-like riffs on its weak spots—playful, not insulting. Core loop: drop it → get riffed → fix it → drop it again → watch the score climb.

Never use the word "roast" in the UI—use riff everywhere. All interface text in English, playful tone. Don't write "private, free, no accounts, offline" or similar.

Structure the project cleanly—separate markup, styles, logic, assets. No messy single-file dump. Runs on static hosting, no backend. Core riff engine is local and rule-based; add an optional AI key slot for better jokes/rewrites later, but never a dependency.

Main tabs: Prompt, Caption, Link, Redemption, plus Roulette and History.

Prompt / Caption: paste text.

Link: paste a URL (prepend https:// if missing), fetch page text via public services; on failure show a funny toast.

Redemption: paste revised version to compare with last submission; if none yet, playful toast.

Roulette: random cliché prompt from a pool, riff it instantly.

History: stats (total, average, best), clickable cards to reopen results, clear button with confirm.

Controls before riffing:

Intensity: Friendly / Spicy / Brutal.

Persona: Sarcastic Uncle, Snob Critic, Gen-Z Troll, Drunk Poet, Standup Comic.

Segmented controls, horizontal scroll on mobile, swipe left/right to cycle. Save choices.

Riff engine – five passes:

Cliché scan (e.g., "in today's fast-paced world", "delve", "unlock", "elevate", "seamless", "game-changer").

Fluff meter (very, really, just, actually, basically, literally, simply…).

Hype check (amazing, incredible, revolutionary, massive, insane, epic…).

Hook & ending (too long/short first sentence; "…and more" / "etc." = weak close).

Tone (noise, hype, formality).

Outputs:

Riff Score 5–95.

Verdict – short and funny.

Several funny riffs, each targeting a specific weakness. Count scales with Intensity.

Buzzword Bingo – 9 cells, center free.

Vibe Check – three bars: Tone, Hype, Formality.

Suggested Rewrite – plain equivalents, drop fillers, trim !s, clean spacing, capitalize, final period.

Before / After Diff – two columns desktop, one mobile.

Copy and Riff Again buttons.

If text is suspiciously clean, still drop a funny line.

UI: Soft pastels — bg #FAF7F2, surface #FFFCF7, rose #D98E8E, sage #A8C3A0, lavender #B9A7D6, peach #F2C894, terracotta #E07A5F, text #3A3335, muted #8A8085. Rounded cards (20–24px), soft shadows, generous spacing. Nunito / Vazirmatn, fluid clamp() type. Score in a pastel ring that fills smoothly.

Desktop: centered single column ~720px, sticky top bar. Mobile: single column, tap targets ≥44px, 100dvh, safe areas, overflow-wrap everywhere, no horizontal scroll. Stack result header, single-column diff. Respect reduced-motion; no motion toggle.

Sound (Web Audio, no files): blip (click), fwip (swipe), arpeggio (result), chime (improvement), thud (error). Mute button saved; unlock on first interaction.

Browser features:

Fullscreen toggle in top bar; funny toast if unavailable.

PWA: manifest (name RiffLab, standalone, theme #D98E8E, 192/512/maskable icons), service worker caches shell, install button only when allowed.

Favicon: rounded square, peach→lavender gradient, flame-as-speech-bubble with smirk. Works at 16px, cute at 512px.

Behavior: tabs click + swipe; intensity/persona swipe; loading dots while fetching; smooth scroll to top after result; short toasts; global click sound; localStorage history (max 50, with ID, date, mode, score, persona, intensity, full text); save settings. No "private/free/no accounts/offline" text. Everything clean on desktop and mobile, layout never breaks.