MelonUI LogoMelon UI

Zero Gravity Shards

A highly interactive 'zero gravity' shard interface where glassmorphic cards drift organically using Framer Motion physics, snap to the cursor on hover, and seamlessly morph into full-screen bento grids using layoutId when clicked.

Component Showcase

Zero Gravity Shards

A highly interactive 'zero gravity' shard interface where glassmorphic cards drift organically using Framer Motion physics, snap to the cursor on hover, and seamlessly morph into full-screen bento grids using layoutId when clicked.

Framer MotionMorphingLayout IDInteractiveZero GravityBento

Interactive Playground

Adjust sliders and values to preview changes in real-time

coreLabel

The label text on the central core button.

coreSublabel

The sublabel text on the central core button.

glowColor

The glow color of the central core button.

API Reference (Props)

Component properties and type specifications

PropTypeDefaultDescription
coreLabelstring"Initialize"The label text on the central core button.
coreSublabelstring"Core Offline"The sublabel text on the central core button.
glowColorstring"#7fff5e"The glow color of the central core button.