Installation
Usage
import GlassAICard from "@/components/ruixen/glass-ai-card";
export default function App() {
return (
<GlassAICard
actionLabel="Summarize"
onAction={() => console.log("AI action")}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
lines | number[][] | See below | Skeleton line widths per group |
actionLabel | string | "Summarize" | Label for the action button |
onAction | () => void | - | Callback when the action button clicks |
sound | boolean | true | Enable haptic sound on click |
style | CSSProperties | - | Additional styles for the card |
Default Lines Layout
const DEFAULT_LINES = [
[100], // full-width line
[40, 20, 40], // three segments
[40, 20], // two segments
[20, 80], // two segments
];Features
- Dual-palette theme — automatic light/dark with CSS custom properties
- Shimmer animation — skeleton lines sweep with staggered timing
- Hue-rotating gradient border — pink-to-purple animated ring on the action button
- Sparkles icon — inline SVG, no icon library needed
- Haptic sound — 3ms white noise burst on button click
- Spring physics — button scales with spring animation on tap