Premium glassmorphism component library with spring physics animations
npm install liqgui
Glassmorphism UI components that actually feel good. Built with spring physics.
Most glass-effect libraries look nice but feel off—stiff transitions, janky hovers, no thought put into motion. liqgui uses real spring physics (not just ease-in-out) so everything moves like it has weight.
- 15 components — buttons, cards, modals, toasts, the works
- Spring animations — physics-based, not CSS keyframe guesswork
- 3D effects — tilt on hover, ripples, glow trails
- Dark/light themes — one CSS variable swap
- Accessible — keyboard nav, focus traps, ARIA done right
- No dependencies — just TypeScript, works with anything
``bash`
npm install liqgui
`html
`
html
Default
Primary
Outline
Ghost
Loading...
`$3
html
Enable feature
Select option
`$3
html
Card with glow effect
Card without 3D tilt
Brand
Link
CTA
`$3
html
Modal content
Tooltip text
Popover content
`$3
javascript
import { GlassToast } from 'liqgui';
GlassToast.show('Success!', 'success');
GlassToast.show('Error!', 'error');
`$3
html
AB
A
B
New
75%
50%
Loading
`$3
html
Question 1
Answer content here.
Question 2
More content.
`Core Utilities
javascript
import {
springAnimate, bouncySpring,
motion,
setTheme
} from 'liqgui';// Spring animation
springAnimate(0, 100, v => el.style.left =
${v}px, bouncySpring);// Motion library
motion.fadeIn(element);
motion.scaleIn(element);
motion.slideInUp(element);
// Theming
setTheme('dark');
`CSS Custom Properties
css
:root {
--lg-blur: 20px;
--lg-radius: 20px;
--lg-accent: var(--lg-accent-blue);
--lg-bg: var(--lg-bg-dark);
}
`Component List
| Category | Components |
|----------|-----------|
| Actions |
|
| Forms | glass-input, glass-toggle, glass-slider, glass-dropdown |
| Layout | glass-card, glass-tabs, glass-navbar, glass-accordion |
| Overlays | glass-modal, glass-tooltip, glass-popover, glass-toast |
| Data | glass-avatar, glass-badge, glass-progress |Browser Support
Modern browsers only (Chrome, Firefox, Safari, Edge). Uses Web Components and
backdrop-filter`.If you find this useful, consider supporting my work:
 
MIT — do whatever you want with it.