Motion & effects / Refraction component
Liquid Glass by Sam Asante
Add a refractive surface while keeping content readable.
Understand the resource
What it is.
The primary documentation describes a headless React Glass component that refracts DOM content or uses WebGL for video and canvas. It distinguishes the visual lens from the crisp content layer on top.
When it is useful
A decorative surface needs a specific glass treatment and a plain fallback is acceptable.
A proposed application
Put it to work.
This example illustrates a possible use. The proposed workflow and expected result are separate from the bounded checks recorded below.
Try this
Place a nonessential glass frame behind a card, then test contrast over light, dark and moving backgrounds.
Result to aim for
A decorative effect with stable readable content.
Before you start
What you need.
- React 18 or newer per the documentation; evaluate the selected DOM or WebGL mode.
The practical boundaries
What to watch for.
- Refraction can distort nearby information and consume rendering resources.
- Browser-compatibility and accessibility claims were not tested; media modes also need asset permissions and network review.
Review record
What we could establish.
- Public primary documentation and the bounded account-free checks below were reviewed. Switching the documentation example to npm produced its install command. The refractive DOM/WebGL component itself was not executed in this pass.
The source-review notes describe documentation and identity. The account-free evaluation below records exactly which public interaction or local fixture was checked, what happened, and what remains untested.
Check current access, terms, licensing and data handling before using a resource with your own material.
Runtime and security evaluation
What the evaluation covers.
Switching the documentation example to npm produced its install command. The refractive DOM/WebGL component itself was not executed in this pass.
Methods: Public HTTP response · Public browser sample. A completed check covers the stated sample; it is not a safety certification.
- Target
- https://glass.samasante.com/
- Version or capture
- Unversioned public page checked 2026-10-19
- Integrity scope
- sha256:776e9f0cceb2448675744483190f75bdcf03aaa795de99e44b22f771d27b0e6b
Test conditions
- Chromium 155.0.8059.82 on Windows; fresh temporary profile and fresh account-free contexts.
- Public HTTPS GET/HEAD requests only; telemetry/auth routes and WebSockets blocked. No account storage or credential environment variables.
Individual checks and observations
Public document and DOM
passPublic browser sample: Fresh Chromium GET, then inspect rendered controls after hydration delay
Observed: HTTP 200; 6 captured button labels; 0 inputs; 0 canvases.
Package-manager documentation switch
passPublic browser sample: Switch installation example from pnpm to npm and inspect command output
Observed: npm install command rendered=true. Refractive rendering not exercised on docs view.
Security findings and boundaries
Passive inspection of the public response headers, requested hosts and the named browser sample. No active exploitation, authenticated permissions test or complete security audit.
Observed · caution
Installation instructions do not establish rendering safety
The docs switch worked, but browser support, DOM capture behavior, GPU cost and fallback readability remain untested.
Practical caveats
- Try the exact mode with synthetic content and inspect what it captures before putting sensitive application UI behind it.
- Pin and recheck the selected version or sample before adoption; the observations apply only to the scope and date shown.
What remains untested
- No package install, DOM/WebGL rendering, capture privacy, GPU profiling or cross-browser fallback test.
- Fresh-browser restrictions can affect external assets and hydration. Initial failed selectors and limited probes remain in the evidence; they are not blanket product failures.
Security limits
- No authenticated workspace, private content, production backend permissions or data-retention verification.
- No package install, DOM/WebGL rendering, capture privacy, GPU profiling or cross-browser fallback test.
Evaluation sources
Follow the evidence
Sources and further reading.
Keep exploring