Hero270: Smoke Type Hero

A dark hero where the smoke-gradient component shows only through the letters of a giant one word headline: warm plumes rise and curl inside the type while the rest of the frame stays black.

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/hero270?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Hero270, hero270Demo } from "@/components/beste/block/hero270";

export default function Page() {
  return <Hero270 {...hero270Demo} />;
}

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

import { Hero270 } from "@/components/beste/block/hero270";

export default function Page() {
  return (
    <Hero270
      eyebrow="Maison Halden, fragrance no. 3"
      heading="Ember"
      description="Smoked cedar, black tea and a little amber, blended in Grasse."
      buttons={[
        { label: "Order a sample set", href: "/samples" },
        { label: "Read the notes", href: "/notes" },
      ]}
      smoke={{
        colors: ["#3a1638", "#e0603a", "#ffb86b", "#f6e0c0"],
        baseColor: "#2a1420",
        plumes: 4,
        grain: 0.2,
      }}
    />
  );
}

Props

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

Behavior notes

• A black layer with the headline in white sits over the smoke with mix-blend-mode: multiply: where the letters are white the smoke comes through, everywhere else the frame is black. The section is isolate, so the blend stays inside the hero. The headline is ordinary text, readable by assistive tech and selectable.
• The smoke's baseColor fills the letters where no plume passes, so a deep tone (the demo uses #2a1420) keeps the word legible at all times; a black base would hide it between plumes.
• The word fades and settles in over 2.4 seconds, in step with the smoke's own soft arrival.
• The cursor still parts the smoke inside the letters, since the component listens on the window.
• The headline scales with the viewport (clamp(6rem, 24vw, 22rem)); keep it short so it fits on one line.
• The smoke pauses offscreen and holds a still frame for reduced motion; the copy then renders without its rise.