Hero236: Candle Flame Hero

A dark, warm split hero with a serif headline, an intro, an Arrow Pill and an underline link on the left, and the candle-flame component on the right: a single WebGL flame with a slow flicker, warm light breathing on the room and the wax pillar, and a wisp of smoke now and then.

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

Base UI flavor

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

This installs the block to components/beste/block/hero236.tsx plus the candle-flame component and the button23 and button2 buttons it uses.

Quick start

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

import { Hero236, hero236Demo } from "@/components/beste/block/hero236";

export default function Page() {
  return <Hero236 {...hero236Demo} />;
}

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

import { Hero236 } from "@/components/beste/block/hero236";

export default function Page() {
  return (
    <Hero236
      eyebrow="Tallowmere, hand-poured in Bruges"
      heading="Light that takes its time."
      description="Beeswax and rapeseed pillars, poured by hand in small batches and cured for six weeks."
      buttons={[
        { label: "Shop the pillars", href: "/shop" },
        { label: "Visit the studio", href: "/studio" },
      ]}
      candle={{
        flameColor: "#ff9a3c",
        groundColor: "#120d0a",
        candle: true,
        waxColor: "#efe3cf",
        flicker: 0.5,
      }}
    />
  );
}

Props

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

Behavior notes

• The section paints candle.groundColor (falling back to #120d0a) as its background, so the flame's room and the page are one surface; the copy is a fixed white (text-white with opacity steps). A candle is lit in the dark, so this ground and ink stay the same in every theme.
• The cursor acts as a breath: it bends the flame away and makes it gutter on a quick pass.
• CandleFlame pauses through an IntersectionObserver and on hidden tabs and respects prefers-reduced-motion; if the WebGL program fails, it shows a soft radial glow in glowColor at the candle position.
• On phones the flame sits below the copy in a 28rem tall frame; from md the grid is 5 and 7 columns and the flame fills the full height.
• With reduced motion the copy and flame appear without their rise and 2s fade.