A developer framework for interfaces that emit light.
// the light library
Each module emits its own band of the visible spectrum. Compose interfaces by selecting wavelengths the way a colorist mixes light.
Heat-warm core primitives. Buttons, focus rings, and pulse states that feel like a tungsten coil reaching working temperature. Filament is the runtime that ignites the rest of the framework.
import { Filament } from '@luminant/core'
const ui = Filament({ kelvin: 2700 })Surface materials with subsurface scattering. Cards, sheets, and modals that hold light beneath their skin and release it slowly when the cursor approaches.
const sheet = ui.surface({
material: 'ember',
scatter: 0.42
})Typography that reads like signage at dusk. Variable-axis display faces, text-shadow primitives, and a luminance-aware contrast engine that keeps glyphs legible against any radiant ground.
const headline = ui.type({
axis: { wght: 520, opsz: 96 },
glow: 0.3
})Persistence-of-vision animation. Trails, motion lines, and decay envelopes that mirror the way old phosphor screens held an image after the beam had moved on.
ui.animate(node, {
trail: 12,
decay: 'exp(-t/0.4)'
})Layout and grid as a luminance field. Container queries, optical-center alignment, and a column system measured in lux rather than pixels — denser where the eye expects more light.
const grid = ui.field({
unit: 'lux',
density: 680
})State as discrete photons. A reactive store where every update is a packet — observable, attributable, and re-emittable. The shortest wavelength carries the highest energy and the strictest types.
const store = ui.quanta<Mode>({
mode: 'idle'
})
store.emit({ mode: 'glow' })// the spectrum
Every component aligns to a wavelength. Sweep the spectrum to preview luminance, color temperature, and energy curves for each band.
// install
One package. Tree-shakable wavelengths. Works in any framework — or none.
$ npm install @luminant/core @luminant/spectrumNo build step required. Works in Vite, Next, Astro, and plain HTML.
import { Filament, Phosphor, Quanta } from '@luminant/core'
const ui = Filament({ kelvin: 2700 })
const store = Quanta({ mode: 'idle' })
export function App() {
return ui.surface({
glow: 0.42,
wavelength: 540,
children: ui.type({
text: 'hello, light',
shadow: 20
})
})
}