← all projects

affect-kit

open-source web components for capturing how someone feels, and affectful, the feelings notebook built on them.

why i built it

Capturing how someone feels is usually either too blunt or too cumbersome: a 1 to 10 scale is too blunt to mean much, and clinical questionnaires are too long for a moment in someone's day. I wanted something in between, useful first to the person using it, and meaningful and insightful over time.

The science behind it, in short: feelings aren't a list of boxes. They sit in a space of how pleasant and how energized you feel (Russell's circumplex), so you place a face in that space first, because feeling comes before naming. Then you pick from 55 words, each placed in the same space by a peer-reviewed lexicon of 20,000. The face is built from facial movements that read the same across cultures, the colors follow research on how cultures pair color and emotion, and over time what matters is how your feelings move and recover, not a single score. It's a logbook, never a diagnosis.

the research behind it →

what it is

Open-source web components: drag a face across a pad to set a gut feeling, then tap the words that fit. They work anywhere the web does.

Affectful is the reference app: a feelings notebook. Move a face until it looks right, find the words, and add a note about what's going on. Your check-ins stay on your phone.

It's also where I explore how the data could give something back without interpreting it for you. When you tap Done, Affectful reads your note for the parts of life it mentions, like sleep or weather, and suggests them as chips you can keep or take off. It never guesses your feelings: those are always the words you pick. The reading runs on your phone with a small model, and an opt-in labs switch adds Jev, TypeSafe's decision model, for the areas the phone reads less well, like family, friends and health.

The Words view then draws a thin line wherever a feeling and a part of life were logged together. No causes, scores or advice: just what showed up together.

affectful's check-in: the face is dragged from neutral to a gentle smile, then content, grateful and serene are picked from the feeling words affectful's check-in: the face is dragged from neutral to a gentle smile, then content, grateful and serene are picked from the feeling words
move the face, then tap the words that fit. tap again for stronger.
affectful's log: today's check-in with the word serene, a sleep tag, and the note 'ten minutes of breathing before bed. slept well.'
the log: each check-in, its words and a note.
affectful's week view: each feeling named this week as a row, with a colored dot on the days it came up, and below them the areas of life logged
a week at a glance: which feelings came up, and when.
affectful's words view, 'feelings and what was going on': feelings on the left joined by thin curves, in each feeling's color, to areas like sleep, work and community on the right
feelings and what was going on, logged together.

how it's built

  • typescript
  • lit
  • web components
  • sveltekit
  • indexeddb
  • onnx runtime web
  • jev (labs)
  • cloudflare workers

The components are built with Lit, so they work in any framework or none. The face is drawn from code, blending smoothly between expressions as you move.

Affectful is a static SvelteKit app you can install on your phone. Check-ins live only on your device, with no account and no copy on a server, and notes are read right on the phone by a small model running in the browser.

publishedface · wordsstays herecoreface · words · colorweb componentslit · rater · resultnpmaffect-kitaffectfulsveltekit · offlineyour phoneindexeddb · on-device model
one open-source kit, and a notebook that never leaves your phone.
  • core to web components
  • web components to npm: published
  • web components to affectful: face · words
  • affectful to your phone: stays here

what's next

keep building affectful as the reference implementation of affect-kit. it will always be free and local-first: your check-ins stay on your phone, and you own your data.