// features

The whole toolkit.

Real-time refraction, adjustable bevels, frosted blur, specular highlights, tilt. The library does the maths so the page can do the design.

  • auto_awesome

    Real-time refraction

    Static, video, and animated content — all refracted live in WebGL.

  • tune

    Adjustable bevel

    Tune depth and width of the rim refraction to taste.

  • blur_on

    Frosted blur

    Optional blur radius for a privacy-pane diffusion. Zero keeps it crystal clear.

  • flare

    Specular highlights

    Animated light highlights that move with time. Off if you want flat.

  • view_in_ar

    Interactive tilt

    Subtle 3D parallax on cursor movement. Tunable depth.

  • zoom_in

    Magnification

    Zoom lens contents from 0.001× through 3×. Real lens, real maths.

  • gradient

    Soft drop-shadow

    A grounded shadow underneath. Cheap on the GPU.

  • animation

    Animate lenses

    Animate transform, border-radius, opacity at 60fps with GSAP.

  • movie

    Auto video refract

    Videos in the snapshot are detected and re-captured per frame.

  • swap_vert

    Scroll sync

    Drop-in support for Lenis, Locomotive Scroll, and GSAP ScrollTrigger.

  • inventory_2

    Lightweight bundle

    ~50KB by default. html2canvas only loads if your page actually needs it.

  • bolt

    on.init callback

    Hook the moment the first frame paints. Chain reveal animations from there.

// what's new

Rebuilt on snapdom.

Captures used to be the slow part. Glassworks ships snapdom as the default backend with an html2canvas hybrid fallback. On a typical page, captures drop from ~300ms to ~80ms.

~4×

Faster captures

snapdom's foreignObject pipeline does in ~80ms what html2canvas does in ~300ms.

~50KB

Lighter by default

html2canvas only loads if your page needs it — when an absolute overlay is detected on the snapshot target.

0px

Drift on long pages

Patched the upstream bug where multiple in-flow lenses collapsed the snapshot. Lenses stay perfectly aligned, even far down the page.

Drop-in API.

Same liquidGL({...}) call, same options, same behaviour. Existing code keeps working — just point the script tag at the new build.

Legacy build still ships.

Want the html2canvas-only pipeline? Pass engine: "html2canvas" or load liquidGL-legacy.js. Drift fix applied either way.

// quick start

Drop it in.

Two scripts, one selector, a few options. That's it.

<!-- 1. snapdom: capture backend -->
<script src="https://cdn.jsdelivr.net/npm/@zumer/snapdom/dist/snapdom.js" defer></script>

<!-- 2. glassworks -->
<script src="/scripts/liquidGL.js" defer></script>

// initialise after DOMContentLoaded
const glass = liquidGL({
  target: ".liquidGL",
  refraction: 0.026,
  bevelDepth: 0.119,
  bevelWidth: 0.057,
  specular: true,
  shadow: true,
});

Full options, presets, and FAQ in the README →

// demos

Five ways to see it.

Each demo is a self-contained page. View source if you want to copy the setup.

D1

Nav bar

A sticky nav backed by a refracting lens. The classic app-bar pattern, refracting whatever scrolls past.

View demo →
D2

Bank card

A frosted credit-card surface over a moving background. Perfect for fintech UIs.

View demo →
D3

Animated lenses

Lens transforms animated with GSAP. Border-radius, scale, position — all live.

View demo →
D4

Multiple lenses

Many cards, one shared canvas. Built so you don't blow the WebGL context budget.

View demo →
D5

Reveal & morph

Circular morphs that reveal scenes as the lens transforms.

View demo →
README

Full docs & presets

Every option, five copy-paste presets, and the FAQ. The reference doc.

Open README ↗