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.
Dependencies
- framer-motion
Files
- components/blocks/hero-mesh.tsx
Installation
Using shadcn CLI
npx shadcn add hero-mesh --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install framer-motion