Overview
Otis is an interactive portfolio hero. Grab the cartoon face and pull it like taffy: it stretches into a tube, wobbles back, swaps to a new expression, and flushes red as the patience bar runs out. Stack: Vite, React 19, TypeScript, Tailwind CSS 4, and a Canvas 2D face engine (no Three.js). Includes light and dark theme toggle, mood meter, and a subscribe demo UI. Static build ready for GitHub Pages.
Highlights
- 01
Pull-to-stretch face
Grab opaque pixels, stretch like taffy, release into a random expression.
- 02
Patience meter
Pulls drain patience; the bust flushes red as the bar runs out.
- 03
Light and dark
One token set for page, ink, and cobalt disc. Toggle theme in the header.
- 04
Static and fork-ready
Vite build to dist/. Open live preview or download and run locally.
You get
- Full Vite + React 19 + TypeScript source (Otis)
- Canvas 2D face engine and expression cutouts
- Mood / patience UI and subscribe demo
- Light and dark theme toggle
- Static build ready for GitHub Pages
