harmonia-core/ui
v1.2.6MIT LicenseReact 18+

Harmonia UI

Interfaces that adapt to human capacity.

Four inputs — cognitive, temporal, emotional, valence — derive a coherent interface mode. Components adapt density, motion, contrast, and focus. No guessing. No profiles. No surveillance.

Derivation pipeline

Cognitive·Temporal·Emotional·Valence→FieldManager→deriveMode()→density·motion·contrast·focus

Abyss Con — Gachiakuta Convention

See the framework in action — adaptive density, motion, and tone

Package

Now on npm

npm

Install the capacity system, hooks, and components into any React project. Requires React 18+ and @renge-ui/tokens.

1 — Install

npm

npm install @harmonia-core/ui @renge-ui/tokens

pnpm

pnpm add @harmonia-core/ui @renge-ui/tokens

2 — Setup

In your root layout, import the token CSS and wrap with CapacityProvider.

import '@renge-ui/tokens/renge.css'
import { CapacityProvider } from '@harmonia-core/ui'
export default function RootLayout({ children }) {
return (
<html data-profile="ocean" data-mode="dark">
<body>
<CapacityProvider>
{ children }
</CapacityProvider>
</body>
</html>
)
}

3 — Add capacity controls

Drop <CapacityControls /> anywhere in your app — it renders a floating panel (bottom-right) where users manually adjust their cognitive, temporal, emotional, and valence state.

import { CapacityControls } from '@harmonia-core/ui/components'
export default function RootLayout({ children }) {
return (
<html>
<body>
<CapacityProvider>
{ children }
<CapacityControls />// ← add this
</CapacityProvider>
</body>
</html>
)
}

4 — Use

Call useDerivedMode() in any component to read the current interface mode tokens.

import { useDerivedMode } from '@harmonia-core/ui'
import { Button } from '@harmonia-core/ui/components'
export function MyComponent() {
const mode = useDerivedMode()
// mode.density → 'low' | 'medium' | 'high'
// mode.motion → 'off' | 'soothing' | 'subtle' | 'expressive'
// mode.contrast → 'standard' | 'boosted'
return <Button mode={mode}>Save</Button>
}

Interactive

Live Demo

Adjust the capacity controls (bottom-right) to see how this card adapts in real-time.

Exploratory ModeYou're doing great!
Adaptive Interface
This card demonstrates how the capacity system adapts UI in real-time based on your current state.
  • Cognitive capacity controls visual density
  • Temporal capacity controls content length

Live State

Cog

0.7

density

Temp

0.7

length

Emo

0.7

motion

Val

+0.3

tone

Transparency

Mode Derivation

See exactly how your inputs become a coherent interface mode.

1Your Inputs
Cognitivemental bandwidth
70%
Temporaltime available
70%
Emotionalresilience
70%
Valencemood
+0.3
2Derived Mode
Exploratory
density:mediumguidance:lowchoices:normalmotion:expressivecontrast:standardfocus:gentle
3UI Effects
Fewer items shown, simpler layouts
Full feature display, dense grids
More labels, helper text visible
Reduced options, smart defaults
No animations, fully static UI
Slow rhythmic motion: breathe, float
Calm animations, no surprises
-> Playful micro-interactions
Higher contrast for accessibility
-> Soft highlight on important elements
Strong beacon glow on key elements

Derivation Rules

Cognitive controls density:

  • cognitive < 0.4 → density: low
  • cognitive > 0.7 → density: high
  • else → density: medium

Temporal controls choices:

  • temporal < 0.4 → choiceLoad: minimal
  • else → choiceLoad: normal

Emotional controls motion:

  • emotional < 0.15 → motion: off
  • emotional < 0.4 → motion: soothing
  • emotional > 0.6 & val > 0.15 → motion: expressive
  • else → motion: subtle

Valence controls tone:

  • valence < -0.15 → contrast: boosted
  • else → contrast: standard

Cognitive controls focus:

  • motion == off → focus: default
  • cognitive < 0.4 → focus: guided
  • cognitive < 0.7 → focus: gentle
  • else → focus: default

Roadmap

Done

Phase 1: Manual 4-input controls with mode derivation

Done

Phase 2: Automatic signals (scroll velocity, time-on-page, interaction patterns) modulate inputs passively — plus pattern-based prediction from past sessions

Done

Phase 3: Arousal dimension, multimodal feedback, proportional scaling systems

Roadmap

Development Phases

Phase 1Complete

Manual Inputs

  • 4-input capacity controls
  • FieldManager with derived fields
  • Mode derivation (4 modes)
  • Active token system
  • 4-tier motion system
  • prefers-reduced-motion override
Phase 2Complete

Automatic Signals

  • SignalAggregator (6 detectors)
  • Time, Session, Scroll detectors
  • Interaction, Input, Environment
  • Auto-mode with manual override
  • PatternStore + PatternExtractor
  • PredictionEngine + hook
Phase 3Complete

Extended Dimensions

  • Arousal dimension → pace token
  • Haptic feedback (Vibration API)
  • Sonic feedback (Web Audio API)
  • Fibonacci spacing scale
  • Golden ratio utilities
  • guidance + choiceLoad consumed