# Kinko — Work Showcase & Handoff

This package collects the explorations, prototypes, and mascot-animation work
produced for **Kinko**, a health-insurance app. It is **fully self-contained and
works offline** — every font and JS library is vendored locally and there are
zero CDN / external URLs. Hand this folder to another assistant who needs to
understand WHAT was built and HOW.

> **Start here:** open **`index.html`** (a clickable launcher for every prototype,
> viewer, and doc) or read **`LINKS.md`** (a flat manifest of every artifact path).

> **Brand basics**
> - Product: Kinko — health-insurance app
> - Primary color (Kinko green): `#009b1a`
> - Font: Plus Jakarta Sans
> - Mascot: a koala-style character (called "tedi"/"Kinko" in different threads)

---

## How to open everything

Most files are plain HTML and run with no build step. Because some pages
`fetch()` local JSON/SVG, **serve the folder over HTTP** rather than opening via
`file://` (browsers block fetch on `file://`):

```bash
cd Kinko-Showcase
python3 -m http.server 8000
# then visit http://localhost:8000/
```

No internet is required. The React prototype
(`01-app-prototypes/policy-analyser`) and the Babel-based coverage calculator load
React/Framer-Motion/Babel from their own local `vendor/` folders, and all pages use
the locally vendored Plus Jakarta Sans font under `vendor/fonts/`.

---

## Folder map

```
Kinko-Showcase/
├── index.html                      ← clickable launcher (open this first)
├── LINKS.md                        ← flat manifest of every artifact path
├── README.md                       ← you are here (start here)
├── vendor/fonts/                   ← vendored Plus Jakarta Sans (offline)
├── 01-app-prototypes/              ← the product UI prototypes
│   ├── policy-analyser/            ← React funnel prototype
│   ├── life-simulator-game/        ← gamified "Why Insurance Matters" flow (the GAME)
│   ├── policy-gap-explorations/    ← static HTML concept boards for "policy gaps"
│   ├── insurance-illustration.svg  ← hero illustration in the house style
│   └── README.md
├── 02-mascot-animation/            ← the "animation AI" R&D + deliverables
│   ├── source-poses/               ← original + path-surgery-rigged SVGs, PNG renders
│   ├── lottie-json/                ← Lottie/dotLottie animation files (the JSON)
│   ├── rigging-scripts/            ← Python scripts that generate the rigged Lottie JSON
│   ├── raster-frames/              ← PNG frame sequences (source for raster Lotties)
│   ├── webp/                       ← animated WebP deliverables
│   ├── viewers/                    ← the WEBPAGES that display the animations
│   └── README.md
└── 03-learnings-and-reference/     ← the accumulated knowledge / design rules
    ├── mascot-animation-learnings.md   ← the full "AI learning" log (read this!)
    ├── life-simulator-game-notes.md     ← the game's full build/QA history
    ├── illustration-style.md
    ├── policy-analyser-build-notes.md
    └── ui-design-trends-2026.md
```

---

## The two webpages people usually ask about

1. **"The page that displays all mascot poses"**
   → `02-mascot-animation/viewers/koala-lottie-all.html`
   (and `downloads.html`, which is the same gallery but with a **Download JSON**
   button on each pose). Both load the seven `koala-poseN-rigged.json` Lottie
   files and play them in a grid.

2. **"The page that generates illustrations from the JSON file (the different one)"**
   → `02-mascot-animation/viewers/exploration.html`
   This page `fetch()`es the raw pose **SVGs**, rigs them live in the browser
   (JS finds the eye/arm/ear paths and applies CSS keyframe motion), and renders
   2–3 motion *directions* per pose side-by-side. It is the "creative direction"
   board — different in kind from the Lottie galleries above, which just play
   pre-baked JSON.
   - `onboarding.html` is the polished output of that exploration: a 3-scene
     onboarding slideshow driven by the per-part-rigged vector SVGs.
   - `koala-onboarding.json` is a *structurally different* Lottie — it embeds the
     poses as base64 PNGs and crossfades them (a raster Lottie), as opposed to
     the smaller hand-rigged vector `koala-poseN-rigged.json` files.

---

## What each top-level area is

### 01 — App prototypes
The actual product UI. Two headline pieces:
- **Policy Analyser** — a 7-screen mobile funnel (upload a policy PDF → score →
  gaps → lead capture → full report → CTAs), built in React + Framer Motion as
  an infographic-heavy experience.
- **Life Simulator (the game)** — a gamified "Why Insurance Matters" flow: the
  player walks a character through 9 life events making A/B insurance choices and
  sees the financial impact. Vanilla HTML/JS, inlines the Kinko Design System,
  uses the rigged Lottie mascot poses, with dynamic results and motion polish.
  This is the most complex prototype. See its own README inside the folder.

The `policy-gap-explorations` are earlier static-HTML concept boards for
visualizing coverage gaps. See `01-app-prototypes/README.md`.

### 02 — Mascot animation ("animation AI")
This is the research-and-build work that turns a flat single-pose koala SVG into
a living, animated Lottie mascot. The core technique is **path surgery**:
detecting whether a limb is "baked into" the body outline and, if so, splitting
the outline path so the limb can be rotated without leaving a ghost. Seven poses
were rigged this way and exported to Lottie JSON. See `02-mascot-animation/README.md`
and the deep log in `03-learnings-and-reference/mascot-animation-learnings.md`.

### 03 — Learnings & reference
The durable knowledge: the full animation-method log (path indices, pivots,
tooling, verification protocol), the illustration style guide, the Policy
Analyser build plan, and 2026 UI design rules. Read these first if you intend to
*continue* the work rather than just view it.

---

## Not included here (could be added)

This package focuses on the explorations, prototypes, and mascot work. The
following exist in the wider Kinko workspace but were intentionally left out —
add them if a fuller handoff is needed:

- **Kinko_Native** — the active cross-platform monorepo (pnpm + Turborepo) with
  the `@kinko/ui` React Native component library. This is the real successor app;
  this showcase is the prototype/exploration layer that fed into it.
- **Full Kinko Design System (KDS)** — the complete `components/`, `css/`,
  `tokens/`, and screen library (claims, home, login, onboarding, coverage
  calculator, etc.). Only the slice needed by the bundled game is included here.
- **Figma source files** — the KDS, Insurance-App (claims/explorations), and
  Insurance-B2B (life simulator) Figma files. Node IDs are referenced in the
  learnings docs but the designs live in Figma.
- **Conversation transcripts** — the raw build-session logs (a separate
  `Kinko_Portable` archive captures these).
- **Other prototypes/screens** — claims card states, login flow, home, and the
  coverage-calculator as a standalone prototype.

Say the word and any of these can be folded into the zip.

## Notes for whoever picks this up next

- Nothing here contains secrets or credentials.
- Fully offline: `lottie.min.js`, React, ReactDOM, Framer Motion, htm, Babel and
  the Plus Jakarta Sans font are all vendored locally — no CDN, no network calls.
- The rigged vector Lotties (`koala-poseN-rigged.json`) are the production-grade,
  small-file deliverables. The `-base.json` files are intermediate (pre-rig)
  exports; the many `koala-pose1-*` variants are tuning experiments kept for
  reference.
- The Python `rig_*.py` scripts in `rigging-scripts/` show exactly how each
  rigged JSON was generated — they are the reproducible "source" for the
  animations.