Frost icons

Icon tiles of frosted glass over a tilted color plate that swings up and lights the glass when you point at or focus them.

enhancer
icons
glass
buttons
hover
tiles
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

Frost icons example

Code

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

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<div data-motion="frost-icons" aria-label="Apps">
  <a href="#" aria-label="Files"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg></a>
  <a href="#" aria-label="Books"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h11a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2zM5 18a2 2 0 0 1 2-2h11"/></svg></a>
  <a href="#" aria-label="Health"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="Weather"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18h10a4 4 0 0 0 .5-8A6 6 0 0 0 6 11a3.5 3.5 0 0 0 1 7z"/></svg></a>
  <a href="#" aria-label="Notes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h12v16H6zM9 9h6M9 13h6M9 17h3"/></svg></a>
  <a href="#" aria-label="Stats"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20V10M12 20V4M19 20v-7"/></svg></a>
</div>

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

<FrostIcons>Your content</FrostIcons>

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

<template>
  <FrostIcons>Your content</FrostIcons>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "frost-icons";

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

Options

Attribute	Default	What it does
`data-motion-colors`	`#4f7cff,#a259ff,#ff4f7b,#6c63ff,#ff9f3d,#22c38e`	plate colors, comma separated, used in turn (an item's data-color wins)
`data-motion-size`	`72`	tile size

- Every tile stays the page's own link or button and keeps its name (its aria-label or text); the label that appears below it on hover or focus is decoration, hidden from screen readers. - Keyboard focus swings the plate and lights the glass just as the pointer does, with a ring around the tile. - Reduced motion shows the lit state at once. 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

frost-icons.js is 1.3 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.