Fast, lightweight JavaScript animation engine with an all-in-one API for timelines, staggering, SVG morphing, scroll sync and draggable physics.
AnimationJavaScriptSVG+2
animejs.com
Liquid Glass Web React
agpallav.com
MIT-licensed React component rendering Apple-style liquid glass lenses that refract live DOM — cross-browser SVG displacement, ~5 kB, zero dependencies.
What is Liquid Glass Web React?
liquid-glass-web-react generates a displacement map on the fly and feeds it to an SVG feDisplacementMap filter applied to real painted content, so text stays selectable and video keeps playing in Chrome, Safari and Firefox. The lens is draggable and animates by shifting only the filter region, with props for curvature, chromatic aberration, glow and edge highlight. Available on npm as liquid-glass-web-react, with a plain-DOM engine exported for non-React use.
Best for
- Apple-style glass overlays on UIs
- Animated selection highlight lenses
- Cross-browser refraction effects
Key features
- Refracts live DOM — text and video stay interactive
- Works in Chrome, Safari and Firefox without flags
- Zero dependencies, ~5 kB min+gzip, tree-shakeable
- Tunable curvature, aberration, glow and highlight props
- Imperative handle for per-frame updates without re-renders
Related resources
animejs.com
Open-source Liquid Glass components for React with real WebGL edge refraction, spring physics, and accessible primitives — shipped as a shadcn registry plus an MCP server.
ReactLiquid GlassWebGL+3
liquefy-ui.com
A headless React lens that recreates Apple's Liquid Glass on the web — real refraction of the live DOM in Safari, Firefox and Chrome, with zero dependencies.
ReactGlassmorphismAnimations+1
glass.samasante.com
Visitopens in a new tab