Design Atlas
Type
documentation
Verdict
Niche
Licence
Conditional licence, proprietary freeproprietary-freeThe public article and its examples are free to read. Aave's terms permit reasonable attributed documentation extracts for building or writing, but treat code samples as illustrative and reserve rights in the site and designs; check individual open-source licences for separately licensed components.
Agent channels
none
Pricing
free
Reviewed

← Atlas · Topics: 3d-and-shaders, motion, components

Aave Design & Engineering ​

Type
documentation
Verdict
Niche
Licence
Conditional licence, proprietary freeproprietary-freeThe public article and its examples are free to read. Aave's terms permit reasonable attributed documentation extracts for building or writing, but treat code samples as illustrative and reserve rights in the site and designs; check individual open-source licences for separately licensed components.
Agent channels
none
Pricing
free
Reviewed

What it is ​

Aave Labs' Design & Engineering page is a small official publication. Its current feature article, Building Glass for the Web, documents a cross-browser refractive glass effect and demonstrates it in switches, sliders, toggle groups, QR codes and a video player.

When to open it ​

Open the article when evaluating a glass treatment for real web controls or when a visual prototype needs to work beyond Chromium. It is useful as an engineering-backed motion and component reference, not as a general design system or component package.

Most useful ​

  • The live controls show how a glass lens can act as a switch thumb, slider handle or moving selection indicator while the underlying labels remain readable.
  • The parameter demo exposes lens width, height, corner radius, refraction scale, depth, curvature, chromatic fringe, blur and highlight.
  • The article explains when the same displacement map feeds an SVG filter for live DOM and when a WebGL renderer is needed for canvas or video content.
  • Browser-specific notes cover Safari filter caching, displacement-map work reduction and filter-size limits.

Using it with agents ​

There is no published MCP, API, CLI, registry, llms.txt or skill. The article is readable in a browser. Aave's terms permit sharing reasonable attributed excerpts of documentation for building or writing, but code samples are illustrative and have no warranty.

Watch out for ​

  • The publication is currently a very small site with one in-depth technique article, not a broad design reference library.
  • The article describes Aave's own implementation; test the effect in the browsers and content types your product supports.
  • Aave's terms reserve rights in the site's designs and content. Separate open-source tools follow their own licences; do not infer a reusable licence from the article alone.

Reusable ideas ​

  • Keep the content visible and interactive outside the visual lens; the article's technique refracts the element's own pixels rather than making the surface a dead overlay.
  • Reuse one displacement-map model across renderers, switching to WebGL where SVG filtering cannot reach the content.
  • Build a family of controls around one visual effect, then tune refraction strength to the information each control must preserve.

Liquid Glass, Canvas UI, Paper Shaders, shadercn