Pointer light

The light that follows the pointer over a group of cards: one passive listener writes the pointer's position into the card it is over, the card's CSS draws the light.

WebBetaBlocks

Web only — React, from @krizaka/ui/pointer-light. Beta: its API may still change in a minor version.

Why it is here. Builds the card grid (the light that follows the pointer).

When to use

Inside a group of cards that is not a CardGrid (a flex row, a list, a carousel).
With usePointerLight in a component of your own that lays cards out.

When not to use

Inside a CardGrid: it lights its cards already.Use instead: Card grid
On one card alone, with a ring of the brand's gradient.Use instead: Glow card

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { PointerLight, usePointerLight } from "@krizaka/ui/pointer-light";

Examples

A row of cards

Two link cards in a flex row, lit by the pointer.

Tokens

Every colour, radius and shadow.

Tailwind preset

The tokens as utilities.

Props

Drop it inside any group of cards (a grid, a list) — it listens on its parent element. Renders an empty, hidden span. CardGrid includes it already.

Prop	Type	Default	Description
`target`	`string`	`[data-kz-light]`	The cards to light, as a selector inside the parent element.

Accessibility

Purely decorative: it renders a hidden, empty element and adds nothing to the accessibility tree.
Nothing runs on touch screens or under prefers-reduced-motion; nothing loops.

Best practices

One light per group: drop it once, as the last child of the group.
The cards of the blocks carry data-kz-light; a card of your own adds it and draws --kz-pointer-x/y in its CSS.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub