Pointer light

Web uniquement — React, depuis @krizaka/ui/pointer-light. Bêta : son API peut encore changer à une version mineure.

Installation

Installer

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

Styles

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

Importer

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

Exemples

Props

Accessibilité

• 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.

Bonnes pratiques

• 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.

Composants liés

• Card gridA responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.
• Glow cardA card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.
• Link cardAn entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page, lifting and lighting under the pointer or the focus.

Générée depuis le code de @krizaka/ui 2.8.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub