Otis

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

1. 01

   Pull-to-stretch face

   Grab opaque pixels, stretch like taffy, release into a random expression.

2. 02

   Patience meter

   Pulls drain patience; the bust flushes red as the bar runs out.

3. 03

   Light and dark

   One token set for page, ink, and cobalt disc. Toggle theme in the header.

4. 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