Hero

Iridescent Sweep Hero

An editorial, holographic-foil hero. Conic-gradient foil drifts under a turbulence grain; a soft sheen ribbon sweeps across on a slow cadence; the headline ships with a one-shot foil sheen on mount. CSS + SVG + motion only — no WebGL.

UniqueUI CLI

npx uniqueui add hero-iridescent-sweep

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/hero-iridescent-sweep.json -y

Preview

Edition · MMXXVI

Pressed in light.

Conic foil under a turbulence grain, with a sheen that sweeps across the type on a slow cadence. Editorial energy, zero plug-ins.

Usage

import { IridescentSweepHero } from "@/components/ui/hero-iridescent-sweep";

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

Scenarios

Hue-shifted edition

Shift the whole foil into a cooler register.

import { IridescentSweepHero } from "@/components/ui/hero-iridescent-sweep";

export default function Cool() {
  return <IridescentSweepHero backgroundProps={{ hue: 140, speed: 28 }} />;
}

Lower grain

Reduce the turbulence grain for a cleaner foil.

import { IridescentSweepHero } from "@/components/ui/hero-iridescent-sweep";

export default function Clean() {
  return <IridescentSweepHero backgroundProps={{ grain: 0.12 }} />;
}

Background only

Use just the foil layer behind a custom composition.

import { IridescentSweepBackground } from "@/components/ui/hero-iridescent-sweep";

export default function BgOnly() {
  return (
    <section className="relative isolate min-h-screen">
      <IridescentSweepBackground />
      <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`	`{ speed?: number; hue?: number; grain?: number; className?: string }`	Forwarded to the background layer.