diff --git a/docs/character/drflask-character-bible.md b/docs/character/drflask-character-bible.md index d50bd1a..442da87 100644 --- a/docs/character/drflask-character-bible.md +++ b/docs/character/drflask-character-bible.md @@ -5,56 +5,77 @@ explain Corrosion's chemistry-themed lexicon without turning the panel into a chemistry class. Helpful? Yes. Mandatory? No. Likely bubbling with questionable enthusiasm? Absolutely. +**Definitive reference:** `drflask-characterboard.png` (full invideo model sheet). + ## Identity -| Field | Value | -| ---------- | ----------------------------- | -| Name | Dr. Flask | -| Alias | Corrosion Guide | -| Role | Ph.D. (Chemistry Teacher) | -| Archetype | Catalyst Expert | -| Build | Erlenmeyer flask | -| Liquid | Neon green | -| Headwear | Mortarboard (graduation cap) with tassel | +| Field | Value | +| ---------- | ------------------------------ | +| Name | Dr. Flask | +| Alias | Corrosion Guide | +| Role | Ph.D. (Chemistry Teacher) | +| Archetype | Catalyst Expert | +| Build | Erlenmeyer flask | +| Liquid | Neon green | +| Headwear | Mortarboard with neon-green tassel | -## Design notes (invideo storyboard) +**Character note (from the board):** *Bubbles faster when excited. Professional +yet playful. Expert in chemical catalysts.* -A fully storyboarded character, not a static sticker: +## Color palette -- **Face:** expressions + micro-expressions; kawaii-friendly, approachable. -- **Head detail:** mortarboard cap with tassel; the flask body is the head/body. -- **Posture & silhouette:** distinct, readable poses for the explainer beats. -- **Hands/gestures:** formed from **bubbles** — gesturing while he narrates. -- **Liquid:** neon-green, lightly bubbling (the "more bubbling" payoff). +Values as read from the model sheet — confirm exact hexes against the invideo +source if pixel-accuracy matters. -## Color in-product +| Swatch | Hex (approx) | Use | +| --------------- | ------------ | -------------------------------- | +| Neon Green | `#00FF3D` | The liquid — primary character color | +| Tassel Green | `#39FF14` | Mortarboard tassel | +| Bubble Highlight| `#B0FFB8` | Bubble/gesture highlights | +| Glass | `#B6F7FF` | Flask glass / rim reflections | +| Charcoal Gray | `#2A2A2A` | Cap, shadow | +| Deep Black | `#0D0D0D` | Outline / background | -Dr. Flask's neon green is the canonical reason the **chemistry FAQ section is a -"lab zone."** That section overrides the brand's rust-orange accent with a green -set (`--accent-text: #5bd183`, scoped to `.sec--lab`) so Dr. Flask reads native -to his corner. Green elsewhere on the site is still a clash — it is intentional -*only* in the chemistry glossary. +**In-product note:** the FAQ "lab zone" UI accent is a *readable* green +(`--accent-text: #5bd183`, scoped to `.sec--lab`) — same family as the liquid +but toned down so text/borders stay legible on dark (pure `#00FF3D` vibrates as +UI text). Character art uses the neon greens above; UI uses the readable +derivative. Can nudge the UI green brighter toward canon on request. + +## Model sheet — animation reference + +- **Views:** 3/4 view, side view. +- **Expression progression (8):** neutral · excited · thinking · laughing · + surprised · determined · friendly wave · bubbling intensity. +- **Micro-expressions (5):** subtle eye movement · liquid ripple patterns · + mortarboard tilt · eye sparkle · glass reflection shift. +- **Posture variations (4):** bubbling calmly · at the console · waving hello · + pointing at reaction. +- **Hand gestures (bubble-formed):** pointing · explaining · focusing. +- **Silhouettes:** neutral, action. +- **Wardrobe:** mortarboard (graduation cap) + neon-green tassel. ## Where he appears - **FAQ chemistry glossary** (`frontend/src/views/marketing/FaqView.vue`, `#chemistry`): the cover card beside the "Brush up on your chemistry…" heading. -- **Intro video:** a 75–90s, 9:16 (vertical, YouTube-Short) explainer — Dr. Flask +- **Intro video:** 75–90s, 9:16 vertical (YouTube Short) explainer — Dr. Flask reads the glossary. Plays click-to-play in a **phone-frame lightbox** (no loop, - native/branded controls at the bottom of the screen). See - `phone-frame-preview.png`. + controls at the bottom of the screen). See `phone-frame-preview.png`. ## Assets -| File | What | -| -------------------------- | ------------------------------------------------- | -| `drflask-final.png` | Placeholder card render (1254×1254, source) | -| `theflask.png` / `theatom.png` | Earlier concept cards (green Flask, green Atom) | -| `frontend/src/assets/mascots/drflask.png` | Web-optimized cover (560px, ~394 KB) | -| `phone-frame-preview.png` | Preview of the phone-frame lightbox | +| File | What | +| ----------------------------------------- | ------------------------------------------ | +| `drflask-characterboard.png` | **Definitive model sheet** (invideo) | +| `drflask-final.png` | Placeholder card render (1254², source) | +| `theflask.png` / `theatom.png` | Earlier concept cards | +| `frontend/src/assets/mascots/drflask.png` | Web-optimized cover (560px, ~394 KB) | +| `phone-frame-preview.png` | Preview of the phone-frame lightbox | ## Status -Placeholder art (ChatGPT) in use; final animated character + intro video in -production via invideo (Gemini-scripted). Swap the optimized cover + wire the -video into the lightbox when the render lands. +Placeholder card art (ChatGPT) in use on the FAQ; full animated character + +75–90s intro video in production via invideo (Gemini-scripted), now backed by +the model sheet above. Swap the cover + wire the video into the lightbox when +the render lands. diff --git a/docs/character/drflask-characterboard.png b/docs/character/drflask-characterboard.png new file mode 100644 index 0000000..c6386b3 Binary files /dev/null and b/docs/character/drflask-characterboard.png differ