EmotiArt

How EmotiArt Works

EmotiArt detects your emotions through live camera and voice recording or written text, then turns that emotional data into a fully animated, generative art piece in real time.

Live Analysis

Record yourself speaking or expressing emotion — face-api.js and Whisper work together to detect what you're feeling.

01

Start Recording

Grant camera and microphone access, then hit Start Recording. EmotiArt captures your facial expressions and speech in real time.

02

AI Emotion Detection

While you record, face-api.js reads your facial expressions frame by frame and Whisper transcribes your speech. Both signals are combined to determine your dominant emotion.

03

Stop & Process

Hit Stop & Finish. EmotiArt aggregates the emotion frames from the whole session and picks the strongest result, along with a confidence score.

04

Vibrant Art Generated

The detected emotion drives a fully animated canvas — gradient backgrounds, glowing shapes, floating particles, and layered depth all shift to match your emotional state.

Text Analysis

Paste any text and EmotiArt scores it against 7 emotion keyword sets to find the dominant tone.

01

Paste Your Text

Copy in any text — a journal entry, a message, an email — and paste it into the text input panel.

02

Keyword Analysis

EmotiArt scans your text for emotion-specific keywords across all 7 emotion categories and scores which one dominates.

03

Analyze & Generate

Hit Analyze Text. The dominant emotion and a confidence percentage are shown instantly, and the art canvas updates to reflect it.

04

Download Your Art

Save your generated artwork as a PNG directly from the canvas to keep or share.

The Art Engine

Every emotion drives a distinct visual system rendered on an HTML canvas with continuous animation.

Animated Gradient Backgrounds

Each emotion gets a unique color palette that fills the background with moving radial gradients and orbiting glow blobs.

40 – 120 Layered Shapes

Shapes are spread across three depth layers — background, midground, foreground — for a rich, full-canvas look.

Continuous Animation

Everything on the canvas is always moving: shapes pulse, drift, sway, and rotate at speeds tuned to each emotion's character.

Glow & Bloom Effects

Foreground shapes emit multi-layered glows and shadow blurs for an intense, luminous feel.

Floating Particles

50 ambient particles drift across the canvas, fading in and out to fill the space with life.

Emotion-Specific Motion

Calm waves drift gently sideways. Angry triangles sway at moderate speed. Each emotion's shapes behave differently.

Emotion to Art Map

Each of the 7 emotions maps to a unique color, shape type, and motion behavior.

Happy
Circles
Glowing, pulsing circles with bright highlights
Calm
Waves
Slow, horizontally drifting sine waves
Sad
Arcs
Layered downward arcs with soft glow
Angry
Triangles
Sharp triangles with a slow sway
Anxious
Dots
Scattered dot clusters connected by faint lines
Excited
Starbursts
12-point stars with a white-hot center bloom
Overwhelmed
Squares
Layered overlapping rectangles

Ready to see it in action?