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.
Web only — React, from @krizaka/ui/pointer-light. Beta: its API may still change in a minor version.
When to use
- Inside a group of cards that is not a
CardGrid(a flex row, a list, a carousel). - With
usePointerLightin a component of your own that lays cards out.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@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.
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/yin its CSS.
Related components
Generated from the code of @krizaka/ui 2.9.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Page hero
The first screen of a page: the way back, an eyebrow, the h1, a lead, what follows them (facts, actions) and an aside (the page's bird) — on the brand's backdrop, painted at once.
Stage banner
The announcement of a chapter: a stage and its name on one line, or, large, a stage above a title and a line — a sober eyebrow by default, a stage call that slams in for the arcade flavour.