Block

Hero Mesh

A hero block with smooth mesh glow blobs and layered depth.

Hero block

A smooth mesh glow that keeps focus on the headline

Layered color blobs create depth while staying within your token system. Pair it with tight copy and clear calls to action.

Soft transitions

Mesh layers shift gently to keep the page alive.

Token friendly

Uses primary, secondary, and muted shades only.

Balanced layout

Text and highlights stay readable on every device.

Using shadcn CLI

npx shadcn add hero-mesh --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install framer-motion