One SDK. Your UI adapts its colors, motion, and mood in real-time based on how your user feels. No design system rewrite needed.
npm install @alrehla/atmosferaMove the sliders. Watch the panel transform. This is exactly what your users will experience.
Not another design system. A living layer that breathes with your users.
Colors shift based on 5 emotional states, tension levels, and time of day. Backed by HSL color theory โ not random gradients.
Pure TypeScript. No React, no framework lock-in. Works with Vue, Svelte, vanilla JS, or anything that has a DOM.
Optional audio layer syncs with the emotional state. Crossfade transitions. Custom track support. User-controlled volume.
Automatically adjusts spacing, border radius, blur, and animation speed. Crisis mode โ zen layout. Flow state โ dense information.
Auto-detects time of day and user preference. Smooth 2-second transitions. No flash of unstyled content.
Server-side theme generation via API. Perfect for SSR, email templates, or generating design tokens on the fly.
3 lines. That's all it takes.
// 1. Install
npm install @alrehla/atmosfera
// 2. Generate a theme
import { Atmosfera } from '@alrehla/atmosfera';
const theme = Atmosfera.generate({
emotion: { state: 'stable', tension: 30, shadow: 20, engagement: 70 },
mode: 'auto',
});
// 3. Apply to your app
Atmosfera.apply(theme);
// That's it. Your entire UI now breathes.Join the waitlist for early access to the Atmosfera SDK and API.
Request Early Access โ