Insights
Every visit, drawn as one quiet line.
Bento glow
A grid of cards lit by one light that follows the pointer across them, catching every nearby edge, with a wave of light on click.
- enhancer
- cards
- grid
- glow
- pointer
- click
- 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
Bento glow example
Speed
Pages in a blink.
Focus
One task at a time.
Search that stays yours
No profile follows you around.
Together
Share in a click.
Trends
Up and to the right.
Insights
Every visit, drawn as one quiet line.
Speed
Pages in a blink.
Focus
One task at a time.
Search that stays yours
No profile follows you around.
Together
Share in a click.
Trends
Up and to the right.
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-bento" data-motion="bento-glow"><article class="m-bento-tile m-w2 m-h2"><svg class="m-bento-art" viewBox="0 0 300 120" width="300" height="120" aria-hidden="true"><path d="M0 98 C40 92 52 60 88 66 S136 98 168 70 214 22 252 34 286 14 300 10" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M0 98 C40 92 52 60 88 66 S136 98 168 70 214 22 252 34 286 14 300 10 V120 H0z" fill="#f6a04d" opacity=".16"/><circle cx="252" cy="34" r="6" fill="#f6a04d"/></svg><h4>Insights</h4><p>Every visit, drawn as one quiet line.</p></article><article class="m-bento-tile"><svg class="m-bento-art" viewBox="0 0 120 60" width="120" height="60" aria-hidden="true"><rect x="4" y="34" width="14" height="26" rx="3" fill="currentColor"/><rect x="26" y="24" width="14" height="36" rx="3" fill="currentColor"/><rect x="48" y="38" width="14" height="22" rx="3" fill="currentColor"/><rect x="70" y="14" width="14" height="46" rx="3" fill="currentColor"/><rect x="92" y="4" width="14" height="56" rx="3" fill="#f6a04d"/></svg><h4>Speed</h4><p>Pages in a blink.</p></article><article class="m-bento-tile"><svg class="m-bento-art" viewBox="0 0 60 60" width="60" height="60" aria-hidden="true"><circle cx="30" cy="30" r="22" fill="none" stroke="currentColor" stroke-width="7" opacity=".45"/><circle cx="30" cy="30" r="22" fill="none" stroke="#f6a04d" stroke-width="7" stroke-linecap="round" stroke-dasharray="104 200" transform="rotate(-90 30 30)"/></svg><h4>Focus</h4><p>One task at a time.</p></article><article class="m-bento-tile m-w2"><svg class="m-bento-art" viewBox="0 0 260 44" width="260" height="44" aria-hidden="true"><rect x="0" y="6" width="150" height="32" rx="16" fill="currentColor" opacity=".35"/><circle cx="20" cy="22" r="7" fill="none" stroke="currentColor" stroke-width="2.5"/><rect x="164" y="6" width="96" height="32" rx="16" fill="#f6a04d"/></svg><h4>Search that stays yours</h4><p>No profile follows you around.</p></article><article class="m-bento-tile"><svg class="m-bento-art" viewBox="0 0 100 40" width="100" height="40" aria-hidden="true"><circle cx="20" cy="20" r="14" fill="#f6a04d"/><circle cx="44" cy="20" r="14" fill="currentColor"/><circle cx="68" cy="20" r="14" fill="currentColor" opacity=".55"/></svg><h4>Together</h4><p>Share in a click.</p></article><article class="m-bento-tile"><svg class="m-bento-art" viewBox="0 0 80 40" width="80" height="40" aria-hidden="true"><path d="M8 32 L26 12 L40 24 L54 8 L72 28" fill="none" stroke="#f6a04d" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg><h4>Trends</h4><p>Up and to the right.</p></article></div>import { BentoGlow } from "./motion/react/BentoGlow";
<BentoGlow>Your content</BentoGlow><script setup lang="ts">
import BentoGlow from "./motion/vue/BentoGlow.vue";
</script>
<template>
<BentoGlow>Your content</BentoGlow>
</template>const el = document.querySelector("#title");
el.dataset.motion = "bento-glow";The wrappers: BentoGlow.tsx (React, TypeScript) and BentoGlow.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-color | #f6a04d | Color of the light |
data-motion-radius | 260 | How far the light reaches from the pointer |
data-motion-wave | true | Send a wave of light through the cards on click or tap |
Accessibility
The light is drawn with pseudo-elements that take no pointer events, over cards that keep their own markup, roles and links. Keyboard focus inside a card lights that card the way the pointer does. Touch: the light follows the finger and a tap sends the wave. Only transform, opacity and paint change, so nothing around it moves. Frames run through the shared loop, which stops off screen, in hidden tabs and under reduced motion; reduced motion shows the final state with no movement.
Size
bento-glow.js is 1.9 KB gzip. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.