Motion & effects / WebGL effect
Libraries.dev Liquid Metal
Apply a metallic effect with a usable plain component underneath.
Understand the resource
What it is.
Libraries.dev documents a liquid-metal treatment for buttons, text and badges using WebGL in the web version. Its documentation describes a fallback to the child element when the rendering capability is unavailable.
When it is useful
A brand presentation needs one metallic accent without changing the action itself.
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
Wrap a synthetic promotional button, then compare the plain fallback, contrast and motion behavior.
Result to aim for
A decorative surface that preserves the original action.
Before you start
What you need.
- React 18 or newer and WebGL2 for the documented web effect, with a fallback.
The practical boundaries
What to watch for.
- Shader effects can increase GPU use and behave differently across devices.
- The documented fallback and compatibility were not runtime-tested; review the selected engine version and dependencies.
Review record
What we could establish.
- Public primary documentation and the bounded account-free checks below were reviewed. Switching between v1 and v2 changed the public demo state; twelve canvases were present. GPU output quality and fallback behavior were not scored.
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 between v1 and v2 changed the public demo state; twelve canvases were present. GPU output quality and fallback behavior were not scored.
Methods: Public HTTP response · Public browser sample. A completed check covers the stated sample; it is not a safety certification.
- Target
- https://libraries.dev/metal
- Version or capture
- Unversioned public page checked 2026-10-19
- Integrity scope
- sha256:f2137d37990753f3b5b811a8387649217bd1f2a918f14f921f127c93af8966ed
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; 26 captured button labels; 4 inputs; 12 canvases.
Metal effect version switch
passPublic browser sample: Activate v1 then v2 in the public effect playground
Observed: Visible state changed across version toggles=true; canvases=12. GPU quality not scored.
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
Canvas presence requires a separate fallback test
The observed playground used multiple canvases. A successful version switch does not establish WebGL availability, readable fallback content or acceptable power use.
Practical caveats
- Keep the action label and plain component usable when the metallic surface cannot render.
- Pin and recheck the selected version or sample before adoption; the observations apply only to the scope and date shown.
What remains untested
- No local install, WebGL-loss simulation, mobile GPU test, physical-device frame rate or paid studio access.
- 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 local install, WebGL-loss simulation, mobile GPU test, physical-device frame rate or paid studio access.
Evaluation sources
Follow the evidence
Sources and further reading.
Keep exploring