A visual archive of feelings that exist before language reaches them. Each emotion is rendered through a symbolic grammar of shape, color, and motion — form as the first language.
| Name | Definition |
|---|---|
| Vellichor | Strange wistfulness of used bookshops |
| Onism | Awareness you'll only live one life |
| Sonder | Everyone has a life as vivid as yours |
| Monachopsis | Feeling subtly out of place |
| Énouement | Wishing you could send news back to your past self |
| Liberosis | Desire to care less about things |
| Kenopsia | Eerie emptiness of a place that's usually full |
| Lachesism | Craving disaster to feel something real |
| Occhiolism | Awareness of how small your perspective is |
| Anemoia | Nostalgia for a time you've never known |
| Jouska | Compulsive rehearsal of a conversation |
| Rückkehrunruhe | Feeling that home has changed while you were gone |
| Altschmerz | Weariness with the same old problems you've always had |
| Chrysalism | Tranquility of being indoors during a storm |
| Adronitis | Frustration at how long it takes to know someone |
Each emotion is constructed from three elements:
- Shape — the structural logic of the feeling (circular, angular, dissolving, nested…)
- Color temperature — the energy quality (cool urgency, warm release, hollow violet…)
- Motion — how the feeling moves through you
Dashed lines signal incompleteness. Repetition encodes scale or recursion. Offset and misalignment mean alienation.
unnamed-emotions/
├── index.html — page shell and markup
├── styles.css — all layout, typography, and visual styles
├── emotions.js — the 15 emotion objects with draw functions
├── main.js — renders the grid and detail panel
└── README.md
No build step, no dependencies. Just open index.html in a browser — or serve the folder with any static server:
# Python
python -m http.server 8000
# Node (npx)
npx serve .Then visit http://localhost:8000.
Note: the page loads two fonts from Google Fonts (Cormorant Garamond and DM Mono). It works offline but will fall back to system serif and monospace fonts without an internet connection.
Open emotions.js and add a new object to the emotions array:
{
id: 15, // next available id
name: "Your emotion name",
hint: "One-line definition",
color: "#hexcode", // accent color for this emotion
colorName: "descriptive name", // e.g. "muted violet"
shape: "What the symbol looks like",
shapeReason: "Why this shape encodes this feeling",
motion: "How it moves",
energy: "Hot/cool, heavy/light…",
texture: "Worn/sharp/soft…",
tags: ["keyword", "keyword", "keyword"],
draw: (svg, scale) => {
// Use el() and attr() helpers to append SVG elements to svg
// All coordinates should be multiplied by `scale`
// Base coordinate space: ~100×80 units
}
}The grid and detail panel update automatically — no changes needed elsewhere.
MIT