Anti-Gravity Bento
A premium glassmorphic bento grid where items float into zero-gravity on hover.
Component Showcase
Interactive Playground
Adjust sliders and values to preview changes in real-time
width400
The width of the bento card.
height400
The height of the bento card.
bgrgba(10, 10, 10, 0.6)
The background color (supports rgba for glassmorphism).
spotlightColorrgba(255, 92, 113, 0.15)
The color of the internal hover spotlight.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| width | string | number | 400 | The width of the bento card. |
| height | string | number | 400 | The height of the bento card. |
| bg | string | rgba(10, 10, 10, 0.6) | The background color (supports rgba for glassmorphism). |
| spotlightColor | string | rgba(255, 92, 113, 0.15) | The color of the internal hover spotlight. |
| items | React.ReactNode[] | DEFAULT_ITEMS | Array of custom components/React nodes. Modify this prop to pass your own cards, text, or images. |