Now in beta

Interfaces that feel alive

Move your cursor across the background. Click to send a ripple.

Controls

variant

color

accent

background

density

sizepx

speed

interaction

radiuspx

strength

opacity

mask

clickRippleinteractive

seed

fps

Hero Background

Interactive canvas backgrounds for hero sections: dot grids, warping grids, constellations, waves, flow fields and pixel mosaics that react to the cursor.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/hero-background

import { HeroBackground } from "@/components/hero-background"

export function Demo() {
  return (
    <HeroBackground
      mask="radial"
      className="min-h-[480px]"
    >
      <div className="relative z-10 grid min-h-[480px] place-items-center text-center">
        <h1 className="text-5xl font-semibold tracking-tight">Build something beautiful</h1>
      </div>
    </HeroBackground>
  )
}

Updates live as you change the controls. Only non-default props are included.