Hero257: Photo Dust Hero

A pinned scroll hero built on the photo-dust WebGL component: a cloud of fine dust drifts on a slow wind over the theme background, and as the page scrolls the grains settle from the bottom up into your photograph until the real photo fades in at full detail; the headline holds from the start, and the intro and two buttons settle in once the picture is whole.

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

Base UI flavor

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

This installs the block to components/beste/block/hero257.tsx plus the photo-dust component and the button23 and button2 buttons it uses.

Quick start

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

import { Hero257, hero257Demo } from "@/components/beste/block/hero257";

export default function Page() {
  return <Hero257 {...hero257Demo} />;
}

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

import { Hero257 } from "@/components/beste/block/hero257";

export default function Page() {
  return (
    <Hero257
      eyebrow="Perfumers in Grasse since 1962"
      heading="Made of almost nothing."
      description="Each perfume is built from a handful of rare materials, weighed by the grain."
      buttons={[
        { label: "Discover the collection", href: "/collection" },
        { label: "Book a scent consultation", href: "/consultation" },
      ]}
      dust={{
        imageSrc: "https://images.unsplash.com/photo-1622618991746-fe6004db3a47?w=1600&q=80",
        imageAlt: "A clear glass perfume bottle and two small jars casting amber shadows on warm paper",
        groundColor: "var(--background)",
        density: 0.6,
        focusX: 0.4,
        focusY: 0.5,
      }}
    />
  );
}

Props

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

Behavior notes

• The section is h-[260svh] with a sticky frame, and the grains settle as scroll progress runs from 0.04 to 0.75.
• dust.groundColor (default var(--background)) paints both the section and the dust surface, so the two never show a seam and the ground follows the theme; the copy uses text-foreground and text-muted-foreground, so it reads on any ground color that follows the theme.
• The intro and buttons appear at 0.72 progress and hide again below 0.6, so they never linger half visible; while hidden they are aria-hidden, ignore the pointer and the links leave the tab order. On phones the same copy sits under the photograph and follows the same rule.
• The cursor blows settled grains aside when interactive is on; touch is ignored.
• The photo host must allow cross-origin loading (Unsplash does). The plain img stays in the page with its alt, and the canvas covers it once the grains are ready.
• With reduced motion, the section is not pinned and the plain photograph and all copy are shown. Without WebGL, the plain photograph is shown as well.