Block
Hero Mesh
A hero block with smooth mesh glow blobs and layered depth.
Preview
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.
See full preview above
Installation
Using shadcn CLI
npx shadcn add hero-mesh --url https://ui.hampton.ioDependencies
npm install framer-motion