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.8.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.
Table of contents
The sections of a reading page: sticky beside the content on a wide screen, a row of chips that scrolls sideways on a phone, the section being read marked — with TocLayout to place it.