Hero276: Ripple Water Hero

A calm hero over the ripple-gradient component: the lower half is water, with soft rings spreading and meeting beneath large centered type, and the water fades up into the page color so the rings rise out of the paper.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero276?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero276?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero276.tsx plus the ripple-gradient background and the button23 and button2 buttons it uses.

Quick start

The installed file exports hero276Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero276, hero276Demo } from "@/components/beste/block/hero276";

export default function Page() {
  return <Hero276 {...hero276Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero276 } from "@/components/beste/block/hero276";

export default function Page() {
  return (
    <Hero276
      eyebrow="Stillwater, thermal pools and sound baths in Reykjavík"
      heading="Let the water hold the sound."
      description="Warm pools, singing bowls and a resident cellist in the evenings."
      buttons={[
        { label: "Book a soak", href: "/book" },
        { label: "Visit the pools", href: "/visit" },
      ]}
      ripples={{
        colors: ["#9cc9d6", "#5fa8bf", "#e8c9a0", "#3f7f99"],
        baseColor: "var(--background)",
        sources: 3,
        softness: 0.75,
      }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• The water fills the bottom 56% of the section. Its top half fades from the page color to transparent, and because the page is painted with ripples.baseColor, the seam disappears into the paper.
• Text and buttons use theme tokens (foreground, muted-foreground, primary), and the demo baseColor is var(--background) (also the fallback), so the page and the water around the rings follow light and dark mode while the ring colors stay fixed. If you set a fixed baseColor, check it against the theme's foreground.
• The copy keeps to the upper half through a bottom padding of 48vh.
• On load the rings spread out from their sources through the component's own intro while the copy rises in.
• The component pauses offscreen and on hidden tabs; with prefers-reduced-motion the copy renders without its rise and the water holds still.