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 only — React, from @krizaka/ui/glow-card. Beta: its API may still change in a minor version.
When to use
- 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.
When not to use
- For the cards of an app's lists and feeds: a calm card reads better there.Use instead: Card
- Around content the reader studies (a form, a table): light that moves distracts.
Installation
Install
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { GlowCard } from "@krizaka/ui/glow-card";Examples
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 | Default | 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. |
Accessibility
- 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).
Keyboard
| Keys | Action |
|---|---|
| Tab | Focusing the card (or a control inside it) lights its ring, as the pointer does. |
Best practices
- 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.
Related components
Generated from the code of @krizaka/ui 2.3.0: its meta.ts, its examples and its types.Edit this documentation on 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.