Build Interfaces with Optical Depth & Liquid Glass Physics
Zero-specificity reset (:where()), physical dual-specular caustics, 8-theme runtime engine, and 60fps pointer light tracking. Compressed under 12KB.
npm i synctonic-css
📋
Interactive 3D Specular Seam • Move your cursor or finger over the pill to inspect light reflection
1. Core Framework Innovations
Architectural breakthroughs designed for seamless enterprise integration and zero runtime overhead.
src/base/auto-styling.css
Zero-Specificity :where() Engine
All bare HTML selectors are wrapped in :where() pseudo-classes. This guarantees default glass styling across raw tags while providing 0 specificity, so any Tailwind, CSS Module, or utility class overrides it effortlessly without !important.
src/effects/glass.css
Dual-Mask Lens Caustics
Engineered with independent top specular seam masks (::before) and bottom caustic refraction bevels (::after), rendering authentic physical lens depth.
src/themes/themes.css
8-Theme Material Engine
Switch between Midnight OLED, Aurora Cyan, Nebula Purple, Sunset Coral, Rose Gold, and Emerald Lime via a single data-sync-theme attribute with 0 DOM re-renders.
synctonic.js (<1.5KB)
60fps Pointer Light Shaders
Dynamic calculation of incident light angles (--sync-glass-tilt) synchronized via requestAnimationFrame with zero layout thrashing or external libraries.
2. Next-Gen App Component Suite
visionOS Floating Dock, macOS glass code windows, tactile range sliders, and real-time chat bubbles.
visionOS / macOS Floating Liquid Dock
Hover and glide your cursor over the icons to experience spring magnification physics.
Tactile Glass Range Sliders
import { LiquidButton, GlassCard } from 'synctonic-css';
export default function StudioApp() {
return (
<GlassCard variant="liquid" tilt>
<h2>Enterprise Optics</h2>
<LiquidButton size="xl" shine>Launch</LiquidButton>
</GlassCard>
);
}Liquid Glass Real-Time Chat Bubbles
3. Form Material Varieties & Physics
Explore 4 distinct liquid glass form materials across registration, security, payments, and system settings.
4. Enterprise Component Library
Modular, accessible UI building blocks styled with zero-specificity glass primitives.
Button System & Shape Hierarchy
5. Live In-Browser Glass Lab & Token Generator
Design custom liquid glass materials in real-time, test against dynamic backgrounds, and export production :root CSS tokens with 1 click.
Optical Physics Controls
Live EngineReal-time shader reacts instantly to slider inputs
/* Modifying sliders will generate custom :root variables here */6. SaaS Pricing & Feature Tiers
Transparent pricing for open-source builders, scaling startups, and global enterprises.
Starter
For personal projects and side experiments.
- ✓ Core CSS Components
- ✓ Zero-specificity reset
- ✓ Light & Dark mode
- ✓ Community Discord Access
Pro Studio
Full Liquid Glass design system for production apps.
- ✓ Everything in Starter
- ✓ 8-Theme Material Engine
- ✓ Specular Refraction Physics
- ✓ Next-Gen Suite (Dock, Code, Chat)
- ✓ Interactive 3D Light Engine
Enterprise
Custom token systems and dedicated design support.
- ✓ Unlimited seat licenses
- ✓ Custom glass shader tokens
- ✓ Dedicated Slack Channel
- ✓ Priority 24/7 SLA
7. Developer Quickstart & Master Course
Install via npm or CDN, or explore our 9-module comprehensive textbook course.
# 1. Install via npm or pnpm
npm install synctonic-css
# 2. Or include via unpkg CDN in <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>Complete Master Course & Enterprise Manual
Learn optical refraction physics, zero-specificity engineering, 8-theme token re-mapping, component architecture, and production integrations in our complete textbook and printable PDF manual.