SYNCTONIC LABS
INNOVATION · ENGINEERING · DESIGN
Created and maintained by Synctonic Labs. An open-source, zero-specificity CSS design system featuring dual-specular caustics, 8-theme runtime re-mapping, and 60fps pointer light-tracking under 12KB.
# Install via package manager
npm install synctonic-css
# Or include directly via CDN in your <head>
<link rel="stylesheet" href="https://unpkg.com/synctonic-css/dist/synctonic.min.css">
<script src="https://unpkg.com/synctonic-css/dist/synctonic.js" defer></script>
Unlike flat blur hacks, Synctonic computes real-world incident light reflection crests using hardware-accelerated ::before XOR perimeter gradient masks with 180% optical saturation boosting.
Every semantic HTML tag is wrapped in the :where() pseudo-class with a cascade weight of (0,0,0). You get instant beautiful styling while custom developer classes win effortlessly without !important.
Switch color channels instantly at runtime using data-sync-theme across Midnight, Aurora, Nebula, Ocean, Sunset, Rose, Emerald, and Mono palettes in both dark and light modes.
The zero-dependency synctonic.js companion calculates pointer trigonometry in real-time, dynamically rotating --sync-glass-tilt and internal spotlight coordinates in under 1.5KB.
| Feature / Metric | Synctonic CSS | Tailwind CSS | Bootstrap 5 |
|---|---|---|---|
| Liquid Glass Physical Caustics | Native Built-in | Manual Utility Build | Not Supported |
| Specificity Impact | (0, 0, 0) Zero Cascade Weight | (0, 1, 0) Class Weight | High Multi-Class Specificity |
| Compressed Bundle Size | < 12KB Gzipped | Purged (varies) | ~24KB Gzipped |
| 3D Pointer Light-Tracking | Native 60fps (1.4KB) | Requires External Libs | Not Supported |
| Runtime RGB Theming | 8 Themes via HTML attribute | CSS Variables / Config | SASS Recompile |