Hero

Liquid Aurora Mesh Hero

An aurora-mesh hero whose colour ribbons drift through an SVG turbulence-displacement filter for an organic, fluid look. Mouse-reactive light pool follows the cursor with a spring; headline words rise on mount via per-word reveal. Pure CSS + SVG + motion — no WebGL deps.

UniqueUI CLI

npx uniqueui add hero-liquid-aurora-mesh

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/hero-liquid-aurora-mesh.json -y

Preview

Liquid · Aurora · Mesh

Light,madefluid.

A displacement-warped aurora mesh that drifts behind your headline. Mouse where you want the light to pool.

Usage

import { LiquidAuroraMeshHero } from "@/components/ui/hero-liquid-aurora-mesh";

export default function Demo() {
  return <LiquidAuroraMeshHero />;
}

Scenarios

Custom palette

Pass three accent stops to retune the aurora.

import { LiquidAuroraMeshHero } from "@/components/ui/hero-liquid-aurora-mesh";

export default function Cool() {
  return (
    <LiquidAuroraMeshHero backgroundProps={{ palette: ["#3b82f6", "#22d3ee", "#a78bfa"], speed: 18 }} />
  );
}

Override content

Pass children to drop in your own headline / CTAs.

import { LiquidAuroraMeshHero } from "@/components/ui/hero-liquid-aurora-mesh";

export default function Custom() {
  return (
    <LiquidAuroraMeshHero>
      <h1 className="text-5xl font-semibold">Ship it.</h1>
    </LiquidAuroraMeshHero>
  );
}

Background only

Reuse just the layer behind a totally different composition.

import { LiquidAuroraMeshBackground } from "@/components/ui/hero-liquid-aurora-mesh";

export default function BgOnly() {
  return (
    <section className="relative isolate min-h-screen">
      <LiquidAuroraMeshBackground />
      <div className="relative">…</div>
    </section>
  );
}

Props

Prop	Type	Description
`children`	`ReactNode`	Slotted hero content. Omit for the default headline + CTAs.
`className`	`string`	Classes for the outer `<section>`.
`backgroundProps`	`{ palette?: [string, string, string]; speed?: number; className?: string }`	Forwarded to the background layer.