New: Liquid Glass v1.1 Documentation Added

Build faster.
Ship better.

The complete knowledge base for Avenra's high-performance library ecosystem. Engineered for speed, designed for clarity.

TypeScriptReact 19Next.jsZero DependenciesSpring Physics
live preview · @avenra/liquid-glass
0+Packages
0Dependencies
0%TypeScript
0KBGzip Bundle
Built Different

Why Avenra libraries stand out

Every decision is made with physics accuracy, performance, and developer experience at the core.

Physics-Based Rendering

Built on Snell's Law of refraction — the same optics that govern real glass. Every button simulates actual light bending through a medium.

Spring physics + Snell's Law

Zero Dependencies

The entire library ships as ~2KB gzipped with absolutely no external dependencies. Zero bloat, maximum performance, works everywhere JavaScript runs.

~2KB gzip · No npm install chain

TypeScript First

Full type definitions, strict event maps, and precise option interfaces. Your IDE becomes the documentation — inline completion for every config option.

100% typed · Strict event maps
Ecosystem

Featured Products

Select a package to view its documentation and integration guides.

Liquid Glass

Physics-based SVG displacement lens library.

liquid glass
SVG Displacement · Snell's Law
  • Snell's Law Refraction
  • Spring Physics
  • Zero Dependencies
  • Typed Events
  • SVG Filter Pipeline
  • React 19 Ready
View Documentation

React Step Form

Multi-step form toolkit for React.

Read Docs

MetadataX

SEO metadata utilities for Next.js.

Read Docs
API

Simple API,
powerful results.

Three functions. Infinite configurations. The Liquid Glass API is designed to get out of your way — no boilerplate, just physics.

  • createLiquidButton()

    Physics button with full Snell's law refraction

  • createLiquidSlider()

    Draggable slider with spring momentum physics

  • createLiquidSwitch()

    Toggle with real glass lens refraction effect

liquid-glass.ts
$npm install @avenra/liquid-glass
1import { createLiquidButton } from '@avenra/liquid-glass';
2 
3// Grab any DOM element
4const button = document.querySelector('#cta');
5 
6// Apply liquid glass physics
7const glass = createLiquidButton(button, {
8 label: 'Get Started',
9 refractiveIndex: 1.5, // Snell's Law intensity
10 blur: 14, // Glass depth in px
11 bezelWidth: 0.03, // Edge thickness 0–1
12});
13 
14// Clean up lifecycle
15glass.destroy();
Shared Knowledge

Shared Guides

Access shared guidelines for every Avenra team. From architecture decisions to UI patterns, keep your documentation aligned across projects.

Architecture
Best Practices
Team Patterns
Explore Guides