Feature Card

The marketing feature tile whose hover glows rather than moves — top hairline, corner bloom, one-pixel lift.

The marketing feature tile: a tinted icon block, a title, a line of copy — and a hover that glows rather than moves. A hairline catches the light along the top edge, a soft bloom fades in at the corner, and the card lifts a single pixel.

Extracted from Yunxin, where the landing page and the Fellows page each hand-rolled it. Use it for uniform feature grids; BentoCard is the sibling for asymmetric bento layouts.

Import

tsx

1import { FeatureCard } from "@yuhuanowo/yunui/patterns";

Basic

Hover a card to see the glow.

Feature grid

Composed

Primitives, page-level patterns and AI components, typed end to end.

Token-driven

Light, dark and a true-black OLED theme — swap with one class.

Tokenless releases

Published to npm with provenance; no long-lived tokens in CI.

Staggered entrance

Pass delay when mapping a grid — index * 100 reproduces the house cascade.

tsx

1{features.map((f, i) => (
2  <FeatureCard key={f.title} {...f} delay={i * 100} />
3))}

Extra content

Anything you pass as children renders under the description — a link, a chip row, a small stat.

Props

FeatureCard also forwards any <div> HTML attributes.

Prop	Type	Default	Description
children	ReactNode	—	Extra content below the description (a link, a chip row).
delay	number	—	Stagger the entrance animation by this many milliseconds — pass `index * 100` when mapping a grid. Omit to render without animation.
description	ReactNode	—	Supporting copy.
icon	ReactNode	—	Glyph shown in the tinted icon tile above the title.
title*	ReactNode	—	Feature name.