docs(character): add Dr. Flask model sheet + sync bible to the board
invideo produced a full character design board (turnarounds, 8-expression progression, micro-expressions, postures, bubble-hand gestures, silhouettes, color palette). Committed as the definitive reference and folded its details (palette, expression/posture/gesture lists, character note) into the bible. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -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.
|
||||
|
||||
BIN
docs/character/drflask-characterboard.png
Normal file
BIN
docs/character/drflask-characterboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
Reference in New Issue
Block a user