Glass pane

Liquid glass over whatever sits behind it: the backdrop bends at the rim the way a thick pane refracts it, with a soft frost, a bright edge and a sheen under the pointer.

enhancer
glass
refraction
panel
toolbar
backdrop
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Glass pane example

Code

It follows the controls above: change an option and the code changes with it.

<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>

<div class="m-glass-scene">
  <img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='420' viewBox='0 0 960 420'%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop stop-color='%23171a3a'/%3E%3Cstop offset='1' stop-color='%23442058'/%3E%3C/linearGradient%3E%3Crect width='960' height='420' fill='url(%23g)'/%3E%3Cg fill='none' stroke-width='14' opacity='.85'%3E%3Cpath stroke='%23f6a04d' d='M-40 330 L330 -40M60 450 L520 -10'/%3E%3Cpath stroke='%234ea1ff' d='M240 460 L700 0M400 460 L860 0'/%3E%3Cpath stroke='%233ccf8e' d='M560 460 L1000 20'/%3E%3Cpath stroke='%23ff6b8b' d='M720 470 L1060 130'/%3E%3C/g%3E%3Cg opacity='.9'%3E%3Ccircle cx='190' cy='120' r='62' fill='%23ffd27a'/%3E%3Ccircle cx='770' cy='300' r='80' fill='%23c084fc'/%3E%3Ccircle cx='870' cy='70' r='30' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E">
  <nav class="m-glass-bar" data-motion="glass-pane" aria-label="Quick actions">
    <a href="#" aria-label="Home"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/></svg></a>
    <a href="#" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></svg></a>
    <a href="#" aria-label="Saved"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></a>
    <a href="#" aria-label="Profile"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4.5 20.5c1.4-3.6 4.2-5.5 7.5-5.5s6.1 1.9 7.5 5.5"/></svg></a>
  </nav>
</div>

import { GlassPane } from "./motion/react/GlassPane";

<GlassPane>Your content</GlassPane>

<script setup lang="ts">
import GlassPane from "./motion/vue/GlassPane.vue";
</script>

<template>
  <GlassPane>Your content</GlassPane>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "glass-pane";

The wrappers: GlassPane.tsx (React, TypeScript) and GlassPane.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-radius`	`999`	corner radius; 999 makes a pill
`data-motion-bend`	`36`	how far the rim pulls the backdrop
`data-motion-rim`	`18`	how wide the bending rim is
`data-motion-frost`	`2`	blur of the backdrop

- The glass is decoration: two layers hidden from screen readers and from the pointer sit behind the element's own content, which keeps its roles, names and focus order. - Text on the glass is white with a soft shadow; put the pane over a picture or a dark backdrop, or set its color, so text keeps a 4.5:1 contrast. - Reduced motion changes nothing that moves on its own: the sheen only follows the pointer. - Chromium bends the backdrop at the rim; other browsers show the frost and the bright edge without the bend. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.

Size

glass-pane.js is 1.9 KB gzip, with components-kit.js 4.0 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.