Salon Banner

A two-line headline in the theme's heading face, set inside a tilted ring of twelve 4:3 plates. By default the plates are a tonal ladder mixed from the page, muted, primary and foreground tokens and shaded with a halftone field, so the gallery follows light, dark and every palette. The ring rests until a pointer is over it, then comes up to one orbit every 15 seconds and settles back to a stop on leave. The four original galleries — matte (sprung), glitch, riso and halftone — remain available through variant, each with its own palette, field, typeface and orbit.

Installation

CLI

npx @modus-ui/cli add salon-banner

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/salon-banner.tsx.
3. Paste the code.

Usage

import { SalonBanner } from "@/components/ui/salon-banner";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <SalonBanner variant="horizontal-sweep" text={"NEW WORK\nON THE WALL"} />
    </div>
  );
}

Props