Emotional CSS 🎭

Adaptive CSS theming based on facial emotion detection — a playful engine that adjusts your website’s look and feel depending on the user’s emotions, using MediaPipe FaceMesh.

✨ Features

• 🎥 Webcam-powered emotion detection (happy, calm, confused, stressed, focused).
• 🎨 Automatic CSS theming via data-emotion attribute.
• ⚡ Lightweight engine written in TypeScript.
• 🧠 Temporal smoothing + dwell time to avoid “thrashing”.
• 🛠️ Simulation mode (trigger emotions via keyboard or API).
• ♿ Accessible: ARIA labels & reduced-motion aware.
• 💾 Persistent settings stored in localStorage.

📦 Installation

npm install emotional-css

or with Yarn:

yarn add emotional-css

🚀 Usage

1. Import and Start

import { EmotionalCSS } from "emotional-css";

// start emotion tracking
EmotionalCSS.start();

// lock emotion manually
EmotionalCSS.lock("happy");

// unlock
EmotionalCSS.unlock();

2. Apply Emotion Styles

In your CSS, target the data-emotion attribute:

:root[data-emotion="happy"] {
  --bg-color: #fffae6;
  --text-color: #ff9800;
}

:root[data-emotion="stressed"] {
  --bg-color: #1a1a1a;
  --text-color: #f44336;
}

🎛️ Available Emotions

• happy
• calm
• confused
• stressed
• focused

🧪 Development

Clone and build locally:

git clone https://github.com/prashantkhatiwada/emotional-css
cd emotional-css
npm install
npm run build

📂 Project Structure

emotional-css/
├─ src/
│  ├─ styles.css       # Emotion demo styles
│  ├─ engine.ts        # Core emotion detection logic
│  └─ index.ts         # Public API + re-exports
├─ dist/               # Compiled output (ignored in git)
├─ package.json
├─ README.md
├─ LICENSE
└─ .gitignore

📜 License

MIT © 2025 Prashant Khatiwada

Demo

https://emotionalcss.vercel.app