Glow card
A 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.
Web uniquement — React, depuis @krizaka/ui/glow-card. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Cards that invite a choice: plans, products, the entry points of a landing page.
- One featured card among others (
alive): its ring turns at rest.
Quand ne pas l’utiliser
- For the cards of an app's lists and feeds: a calm card reads better there.À la place : Card
- Around content the reader studies (a form, a table): light that moves distracts.
Installation
Installer
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { GlowCard } from "@krizaka/ui/glow-card";Exemples
Plans
Three plans: the light follows the pointer across them; the featured one's ring turns at rest.
Community
Free
Self-hosted, every feature.
Team
€19
Shared workspaces and roles.
Sovereign
Custom
Your servers, our support.
A card that is a link
asChild on an <a>, glow="border": the focus lights the ring.
Spotlight only
glow="spotlight": the bloom alone, for a dense grid.
Tips
90 % to the creator
Unlocks
90 % to the creator
Auctions
90 % to the creator
Challenges
90 % to the creator
Props
A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours.
| Prop | Type | Défaut | Description |
|---|---|---|---|
alive | boolean | false | The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused. |
asChild | boolean | — | Renders your element (a link, an article) with the card's look and behaviour. |
glow | "both" | "border" | "spotlight" | both | What answers: border (the turning gradient ring), spotlight (the bloom under the pointer), or both. |
Accessibilité
- Decorative light only (pseudo-elements): nothing is added to the accessibility tree; the card's semantics are yours.
- Under
prefers-reduced-motionthe ring rests at a fixed angle — still lit on hover and focus, never turning. - Its loops pause off screen and while the page settles (MotionObserver).
Clavier
| Touches | Action |
|---|---|
| Tab | Focusing the card (or a control inside it) lights its ring, as the pointer does. |
Bonnes pratiques
- One grid of glowing cards per page;
aliveon one card at most. - Make the whole card the link with
asChildwhen it leads somewhere — the focus lights it like the pointer. - Colours come from the brand (
.brand-<id>): never pass one.
Composants liés
Générée depuis le code de @krizaka/ui 2.3.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Card
The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.
Iso
The isometric kit: luminous objects built from the Krizaka vocabulary (hexagons, cut corners, the node) on a perspective grid — a hero driven by data (IsoHub) or composed from primitives.