# Clear glass icons with edge light

> App icons in clear glass whose rim lights up where the light hits; the light follows your cursor and you can tint them.

- Category: [Liquid Glass](https://library.aimran.es/components/liquid-glass)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/uv-lg-clear-icons
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

A home screen grid in the clear icon style: each tile is frosted glass with a backdrop blur, a conic gradient on a masked rim that brightens on the side facing the light and on the opposite edge, and a soft inner gloss. When idle the light circles slowly, and on hover it points towards your cursor.

Switch between clear and tinted with the segmented control, set the tint with the main color and adjust the blur. Rename the apps or swap the line icons to build launchers, dashboards or app showcase sections.

## Code

### HTML

```html
<div class="uvq11-ico"><div class="wp" aria-hidden="true"></div><div class="gr"><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 12c0-3 1-6 3.5-6S17 10 12 12zM12 12c3 0 6 1 6 3.5S14 17 12 12zM12 12c0 3-1 6-3.5 6S7 14 12 12zM12 12c-3 0-6-1-6-3.5S10 7 12 12z"/></svg></span><span class="nm">Photos</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z"/><circle cx="12" cy="11" r="2.2"/></svg></span><span class="nm">Maps</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></svg></span><span class="nm">Music</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h12v16H6zM9 9h6M9 13h6M9 17h3"/></svg></span><span class="nm">Notes</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 7.5V12l3 2"/></svg></span><span class="nm">Clock</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="9" r="3"/><path d="M9 3v1M3 9h1M4.8 4.8l.7.7M13.2 4.8l-.7.7M8 19h9a3.5 3.5 0 0 0 0-7 5 5 0 0 0-9.6 1.5A2.8 2.8 0 0 0 8 19z"/></svg></span><span class="nm">Weather</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.5-2h7L17 8h3v11H4z"/><circle cx="12" cy="13" r="3.2"/></svg></span><span class="nm">Camera</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8"/></svg></span><span class="nm">Settings</span></button></div><div class="md" role="radiogroup" aria-label="Icon style"><label><input type="radio" name="uvq11-ico-m" value="c" checked><span>Clear</span></label><label><input type="radio" name="uvq11-ico-m" value="t"><span>Tinted</span></label></div></div>
```

### CSS

```css
.uvq11-ico {
  --c1: #ff8a3d;
  --c2: #2563eb;
  --s: 16px;
  /* tamaño */
  --k: 1;
  /* velocidad */
  --bl: 8px;
  /* desenfoque */
  --fg: #1d1d1f;
  /* texto */
  --bg: #f5f5f7;
  /* fondo */
}

@property --uvq11-ia {
  syntax: "<angle>";
  inherits: true;
  initial-value: 135deg;
}

.uvq11-ico {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 20em;
  height: 14em;
  border-radius: 1.6em;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  animation: uvq11-ico calc(8s / var(--k)) linear infinite;
}

.uvq11-ico .wp {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 74% 30%,transparent 2.2em,rgba(255,255,255,.85) 2.25em 2.4em,transparent 2.45em),radial-gradient(1.1em 1.1em at 22% 66%,#ffe066 95%,transparent),repeating-linear-gradient(125deg,transparent 0 1.6em,rgba(255,255,255,.12) 1.6em 1.75em),radial-gradient(70% 60% at 18% 12%,var(--c1),transparent 62%),radial-gradient(60% 70% at 88% 45%,#ff4f8b,transparent 62%),radial-gradient(80% 60% at 45% 105%,var(--c2),transparent 70%),linear-gradient(160deg,#1a1446,#0e2a5c);
}

.uvq11-ico .gr {
  position: absolute;
  left: 50%;
  top: 1.1em;
  display: grid;
  grid-template-columns: repeat(4,3.2em);
  gap: .55em 1.15em;
  transform: translateX(-50%);
}

.uvq11-ico .ap {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  justify-items: center;
  gap: .3em;
  transition: transform calc(0.35s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq11-ico .ap:active {
  transform: scale(.88);
}

.uvq11-ico .ap:focus-visible {
  outline: 0;
}

.uvq11-ico .ap:focus-visible .gl {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.uvq11-ico .gl {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  border-radius: .9em;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(var(--bl)) saturate(1.8) brightness(1.15);
  backdrop-filter: blur(var(--bl)) saturate(1.8) brightness(1.15);
  box-shadow: 0 .5em .9em -.45em rgba(0,0,0,.45),inset 0 0 .7em rgba(255,255,255,.1);
  transition: background calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq11-ico .gl::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background: conic-gradient(from var(--ang,var(--uvq11-ia)),rgba(255,255,255,.98),rgba(255,255,255,.2) 45deg,rgba(255,255,255,.06) 120deg,rgba(255,255,255,.7) 180deg,rgba(255,255,255,.06) 240deg,rgba(255,255,255,.2) 315deg,rgba(255,255,255,.98));
}

.uvq11-ico .gl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(calc(var(--ang,var(--uvq11-ia)) + 180deg),rgba(255,255,255,.28),transparent 48%);
  pointer-events: none;
}

.uvq11-ico .gl svg {
  width: 1.55em;
  height: 1.55em;
  color: rgba(255,255,255,.95);
  filter: drop-shadow(0 .06em .12em rgba(0,0,0,.3));
  transition: color calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq11-ico .nm {
  font-size: .56em;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.uvq11-ico:has(input[value=t]:checked) .gl {
  background: color-mix(in srgb,var(--c1) 42%,transparent);
}

.uvq11-ico:has(input[value=t]:checked) .gl svg {
  color: color-mix(in srgb,var(--c1) 25%,#fff);
}

.uvq11-ico .md {
  position: absolute;
  left: 50%;
  bottom: .85em;
  display: flex;
  padding: .22em;
  border-radius: 2em;
  transform: translateX(-50%);
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.2);
}

.uvq11-ico .md label {
  position: relative;
  cursor: pointer;
}

.uvq11-ico .md input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.uvq11-ico .md span {
  display: block;
  padding: .45em .95em;
  border-radius: 2em;
  font-size: .68em;
  font-weight: 700;
  transition: all calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq11-ico .md input:checked+span {
  color: #1d1d1f;
  background: rgba(255,255,255,.92);
  box-shadow: 0 .15em .4em rgba(0,0,0,.2);
}

.uvq11-ico .md input:focus-visible+span {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes uvq11-ico {
  to {
    --uvq11-ia: 495deg;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq11-ico,.uvq11-ico *,.uvq11-ico *::before,.uvq11-ico *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
```

### JavaScript

```js
document.querySelectorAll(".uvq11-ico").forEach(el => {
  const gs=[...el.querySelectorAll(".gl")];el.addEventListener("pointermove",e=>gs.forEach(g=>{const r=g.getBoundingClientRect(),a=Math.atan2(e.clientX-(r.left+r.width/2),-(e.clientY-(r.top+r.height/2)))*180/Math.PI;g.style.setProperty("--ang",a.toFixed(1)+"deg")}));el.addEventListener("pointerleave",()=>gs.forEach(g=>g.style.removeProperty("--ang")))
});
```

### React

```tsx
// @ts-nocheck: setup() es JavaScript del DOM sin tipos, el mismo de la pestaña JS.
import { useEffect, useRef, type CSSProperties } from "react";

const css = `
@property --uvq11-ia {
  syntax: "<angle>";
  inherits: true;
  initial-value: 135deg;
}

.uvq11-ico {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 20em;
  height: 14em;
  border-radius: 1.6em;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  animation: uvq11-ico calc(8s / var(--k)) linear infinite;
}

.uvq11-ico .wp {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 74% 30%,transparent 2.2em,rgba(255,255,255,.85) 2.25em 2.4em,transparent 2.45em),radial-gradient(1.1em 1.1em at 22% 66%,#ffe066 95%,transparent),repeating-linear-gradient(125deg,transparent 0 1.6em,rgba(255,255,255,.12) 1.6em 1.75em),radial-gradient(70% 60% at 18% 12%,var(--c1),transparent 62%),radial-gradient(60% 70% at 88% 45%,#ff4f8b,transparent 62%),radial-gradient(80% 60% at 45% 105%,var(--c2),transparent 70%),linear-gradient(160deg,#1a1446,#0e2a5c);
}

.uvq11-ico .gr {
  position: absolute;
  left: 50%;
  top: 1.1em;
  display: grid;
  grid-template-columns: repeat(4,3.2em);
  gap: .55em 1.15em;
  transform: translateX(-50%);
}

.uvq11-ico .ap {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  justify-items: center;
  gap: .3em;
  transition: transform calc(0.35s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq11-ico .ap:active {
  transform: scale(.88);
}

.uvq11-ico .ap:focus-visible {
  outline: 0;
}

.uvq11-ico .ap:focus-visible .gl {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.uvq11-ico .gl {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  border-radius: .9em;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(var(--bl)) saturate(1.8) brightness(1.15);
  backdrop-filter: blur(var(--bl)) saturate(1.8) brightness(1.15);
  box-shadow: 0 .5em .9em -.45em rgba(0,0,0,.45),inset 0 0 .7em rgba(255,255,255,.1);
  transition: background calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq11-ico .gl::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background: conic-gradient(from var(--ang,var(--uvq11-ia)),rgba(255,255,255,.98),rgba(255,255,255,.2) 45deg,rgba(255,255,255,.06) 120deg,rgba(255,255,255,.7) 180deg,rgba(255,255,255,.06) 240deg,rgba(255,255,255,.2) 315deg,rgba(255,255,255,.98));
}

.uvq11-ico .gl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(calc(var(--ang,var(--uvq11-ia)) + 180deg),rgba(255,255,255,.28),transparent 48%);
  pointer-events: none;
}

.uvq11-ico .gl svg {
  width: 1.55em;
  height: 1.55em;
  color: rgba(255,255,255,.95);
  filter: drop-shadow(0 .06em .12em rgba(0,0,0,.3));
  transition: color calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq11-ico .nm {
  font-size: .56em;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.uvq11-ico:has(input[value=t]:checked) .gl {
  background: color-mix(in srgb,var(--c1) 42%,transparent);
}

.uvq11-ico:has(input[value=t]:checked) .gl svg {
  color: color-mix(in srgb,var(--c1) 25%,#fff);
}

.uvq11-ico .md {
  position: absolute;
  left: 50%;
  bottom: .85em;
  display: flex;
  padding: .22em;
  border-radius: 2em;
  transform: translateX(-50%);
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.2);
}

.uvq11-ico .md label {
  position: relative;
  cursor: pointer;
}

.uvq11-ico .md input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.uvq11-ico .md span {
  display: block;
  padding: .45em .95em;
  border-radius: 2em;
  font-size: .68em;
  font-weight: 700;
  transition: all calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq11-ico .md input:checked+span {
  color: #1d1d1f;
  background: rgba(255,255,255,.92);
  box-shadow: 0 .15em .4em rgba(0,0,0,.2);
}

.uvq11-ico .md input:focus-visible+span {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes uvq11-ico {
  to {
    --uvq11-ia: 495deg;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq11-ico,.uvq11-ico *,.uvq11-ico *::before,.uvq11-ico *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

// Interacción en JavaScript del DOM: la misma que en la pestaña JS.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setup(el: any) {
  const gs=[...el.querySelectorAll(".gl")];el.addEventListener("pointermove",e=>gs.forEach(g=>{const r=g.getBoundingClientRect(),a=Math.atan2(e.clientX-(r.left+r.width/2),-(e.clientY-(r.top+r.height/2)))*180/Math.PI;g.style.setProperty("--ang",a.toFixed(1)+"deg")}));el.addEventListener("pointerleave",()=>gs.forEach(g=>g.style.removeProperty("--ang")))
}

export default function LgClearIcons() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current?.firstElementChild;
    return el ? setup(el) : undefined;
  }, []);

  return (
    <>
      <style>{css}</style>
      <div
        ref={ref} style={{
          "--c1": "#ff8a3d",
          "--c2": "#2563eb",
          "--s": "16px",
          "--k": "1",
          "--bl": "8px",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq11-ico"><div className="wp" aria-hidden="true"></div><div className="gr"><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 12c0-3 1-6 3.5-6S17 10 12 12zM12 12c3 0 6 1 6 3.5S14 17 12 12zM12 12c0 3-1 6-3.5 6S7 14 12 12zM12 12c-3 0-6-1-6-3.5S10 7 12 12z" /></svg></span><span className="nm">Photos</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z" /><circle cx="12" cy="11" r="2.2" /></svg></span><span className="nm">Maps</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M9 18V6l10-2v12" /><circle cx="6.5" cy="18" r="2.5" /><circle cx="16.5" cy="16" r="2.5" /></svg></span><span className="nm">Music</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M6 4h12v16H6zM9 9h6M9 13h6M9 17h3" /></svg></span><span className="nm">Notes</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8" /><path d="M12 7.5V12l3 2" /></svg></span><span className="nm">Clock</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="9" cy="9" r="3" /><path d="M9 3v1M3 9h1M4.8 4.8l.7.7M13.2 4.8l-.7.7M8 19h9a3.5 3.5 0 0 0 0-7 5 5 0 0 0-9.6 1.5A2.8 2.8 0 0 0 8 19z" /></svg></span><span className="nm">Weather</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 8h3l1.5-2h7L17 8h3v11H4z" /><circle cx="12" cy="13" r="3.2" /></svg></span><span className="nm">Camera</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3" /><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8" /></svg></span><span className="nm">Settings</span></button></div><div className="md" role="radiogroup" aria-label="Icon style"><label><input type="radio" name="uvq11-ico-m" value="c" checked={true} /><span>Clear</span></label><label><input type="radio" name="uvq11-ico-m" value="t" /><span>Tinted</span></label></div></div>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Clear glass icons with edge light” block (Liquid Glass) from AIMRAN Library to my project.

## What it is
App icons in clear glass whose rim lights up where the light hits; the light follows your cursor and you can tint them.

## Chosen settings
- Main color: #ff8a3d
- Secondary color: #2563eb
- Size: 16px (from 12 to 24px)
- Speed: 1x (from 0.5 to 2x)
- Blur: 8px (from 2 to 20px)

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
// @ts-nocheck: setup() es JavaScript del DOM sin tipos, el mismo de la pestaña JS.
import { useEffect, useRef, type CSSProperties } from "react";

const css = `
@property --uvq11-ia {
  syntax: "<angle>";
  inherits: true;
  initial-value: 135deg;
}

.uvq11-ico {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 20em;
  height: 14em;
  border-radius: 1.6em;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  animation: uvq11-ico calc(8s / var(--k)) linear infinite;
}

.uvq11-ico .wp {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 74% 30%,transparent 2.2em,rgba(255,255,255,.85) 2.25em 2.4em,transparent 2.45em),radial-gradient(1.1em 1.1em at 22% 66%,#ffe066 95%,transparent),repeating-linear-gradient(125deg,transparent 0 1.6em,rgba(255,255,255,.12) 1.6em 1.75em),radial-gradient(70% 60% at 18% 12%,var(--c1),transparent 62%),radial-gradient(60% 70% at 88% 45%,#ff4f8b,transparent 62%),radial-gradient(80% 60% at 45% 105%,var(--c2),transparent 70%),linear-gradient(160deg,#1a1446,#0e2a5c);
}

.uvq11-ico .gr {
  position: absolute;
  left: 50%;
  top: 1.1em;
  display: grid;
  grid-template-columns: repeat(4,3.2em);
  gap: .55em 1.15em;
  transform: translateX(-50%);
}

.uvq11-ico .ap {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  justify-items: center;
  gap: .3em;
  transition: transform calc(0.35s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq11-ico .ap:active {
  transform: scale(.88);
}

.uvq11-ico .ap:focus-visible {
  outline: 0;
}

.uvq11-ico .ap:focus-visible .gl {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.uvq11-ico .gl {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  border-radius: .9em;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(var(--bl)) saturate(1.8) brightness(1.15);
  backdrop-filter: blur(var(--bl)) saturate(1.8) brightness(1.15);
  box-shadow: 0 .5em .9em -.45em rgba(0,0,0,.45),inset 0 0 .7em rgba(255,255,255,.1);
  transition: background calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq11-ico .gl::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background: conic-gradient(from var(--ang,var(--uvq11-ia)),rgba(255,255,255,.98),rgba(255,255,255,.2) 45deg,rgba(255,255,255,.06) 120deg,rgba(255,255,255,.7) 180deg,rgba(255,255,255,.06) 240deg,rgba(255,255,255,.2) 315deg,rgba(255,255,255,.98));
}

.uvq11-ico .gl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(calc(var(--ang,var(--uvq11-ia)) + 180deg),rgba(255,255,255,.28),transparent 48%);
  pointer-events: none;
}

.uvq11-ico .gl svg {
  width: 1.55em;
  height: 1.55em;
  color: rgba(255,255,255,.95);
  filter: drop-shadow(0 .06em .12em rgba(0,0,0,.3));
  transition: color calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq11-ico .nm {
  font-size: .56em;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.uvq11-ico:has(input[value=t]:checked) .gl {
  background: color-mix(in srgb,var(--c1) 42%,transparent);
}

.uvq11-ico:has(input[value=t]:checked) .gl svg {
  color: color-mix(in srgb,var(--c1) 25%,#fff);
}

.uvq11-ico .md {
  position: absolute;
  left: 50%;
  bottom: .85em;
  display: flex;
  padding: .22em;
  border-radius: 2em;
  transform: translateX(-50%);
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.2);
}

.uvq11-ico .md label {
  position: relative;
  cursor: pointer;
}

.uvq11-ico .md input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.uvq11-ico .md span {
  display: block;
  padding: .45em .95em;
  border-radius: 2em;
  font-size: .68em;
  font-weight: 700;
  transition: all calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq11-ico .md input:checked+span {
  color: #1d1d1f;
  background: rgba(255,255,255,.92);
  box-shadow: 0 .15em .4em rgba(0,0,0,.2);
}

.uvq11-ico .md input:focus-visible+span {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes uvq11-ico {
  to {
    --uvq11-ia: 495deg;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq11-ico,.uvq11-ico *,.uvq11-ico *::before,.uvq11-ico *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

// Interacción en JavaScript del DOM: la misma que en la pestaña JS.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setup(el: any) {
  const gs=[...el.querySelectorAll(".gl")];el.addEventListener("pointermove",e=>gs.forEach(g=>{const r=g.getBoundingClientRect(),a=Math.atan2(e.clientX-(r.left+r.width/2),-(e.clientY-(r.top+r.height/2)))*180/Math.PI;g.style.setProperty("--ang",a.toFixed(1)+"deg")}));el.addEventListener("pointerleave",()=>gs.forEach(g=>g.style.removeProperty("--ang")))
}

export default function LgClearIcons() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current?.firstElementChild;
    return el ? setup(el) : undefined;
  }, []);

  return (
    <>
      <style>{css}</style>
      <div
        ref={ref} style={{
          "--c1": "#ff8a3d",
          "--c2": "#2563eb",
          "--s": "16px",
          "--k": "1",
          "--bl": "8px",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq11-ico"><div className="wp" aria-hidden="true"></div><div className="gr"><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 12c0-3 1-6 3.5-6S17 10 12 12zM12 12c3 0 6 1 6 3.5S14 17 12 12zM12 12c0 3-1 6-3.5 6S7 14 12 12zM12 12c-3 0-6-1-6-3.5S10 7 12 12z" /></svg></span><span className="nm">Photos</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z" /><circle cx="12" cy="11" r="2.2" /></svg></span><span className="nm">Maps</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M9 18V6l10-2v12" /><circle cx="6.5" cy="18" r="2.5" /><circle cx="16.5" cy="16" r="2.5" /></svg></span><span className="nm">Music</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M6 4h12v16H6zM9 9h6M9 13h6M9 17h3" /></svg></span><span className="nm">Notes</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8" /><path d="M12 7.5V12l3 2" /></svg></span><span className="nm">Clock</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="9" cy="9" r="3" /><path d="M9 3v1M3 9h1M4.8 4.8l.7.7M13.2 4.8l-.7.7M8 19h9a3.5 3.5 0 0 0 0-7 5 5 0 0 0-9.6 1.5A2.8 2.8 0 0 0 8 19z" /></svg></span><span className="nm">Weather</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 8h3l1.5-2h7L17 8h3v11H4z" /><circle cx="12" cy="13" r="3.2" /></svg></span><span className="nm">Camera</span></button><button type="button" className="ap"><span className="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3" /><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8" /></svg></span><span className="nm">Settings</span></button></div><div className="md" role="radiogroup" aria-label="Icon style"><label><input type="radio" name="uvq11-ico-m" value="c" checked={true} /><span>Clear</span></label><label><input type="radio" name="uvq11-ico-m" value="t" /><span>Tinted</span></label></div></div>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````