prismorphism
v0.6.0
Published
CSS-first design system with prismatic glassmorphism and a time-of-day Chronos layer
Maintainers
sajarinReadme
Install
bun add prismorphism # or npm / yarn / pnpm<link rel="stylesheet" href="https://unpkg.com/prismorphism/dist/prismorphism.min.css">Use
<body class="pm-ambient pm-scrollbar pm-selection">
<div class="pm-glass pm-glass-shine pm-card">
<p>Hello, Prismorphism.</p>
<button class="pm-btn pm-btn-primary">Click me</button>
</div>
</body>Everything is a pm- class on plain HTML — no JS runtime required.
Dark by default; add class="light" for light mode. Theme with three
space-separated channel tokens:
:root {
--pm-app-accent: 99 102 241; /* your brand */
--pm-prismatic-1: 255 30 140; /* the triad */
--pm-prismatic-2: 26 229 229;
--pm-prismatic-3: 255 232 59;
}starter.html— minimal starting pointtest.html— kitchen-sink demo of every classdocs.html— literate walkthrough of the design language- Tailwind:
presets: [require('prismorphism/tailwind')]
Chronos — colour that follows the sun
Chronos computes the real sun's position (timezone → longitude, no permission prompt) and drifts the prismatic triad through it: dawn rose → noon prism → dusk amber → deep-indigo night. Tint, don't paint — your brand accent and base palette stay put.
<html data-chronos> <!-- triad + glow follow the sun -->
<html data-chronos="full"> <!-- + canvas deepens at night -->import { start } from 'prismorphism/chronos';
start(document.documentElement); // live, updates each minuteReact: useChronos() from prismorphism/react. Own colour scheme, no
package? Vendor one file. Full guide: CHRONOS.md.