Hero248: Sketch to Photo Hero

A pinned scroll hero on warm drawing paper built on the sketch-to-photo component: on arrival a pen traces an ink drawing of the photo, and as the page scrolls a watercolor wash of the real colors blooms across the sheet until the photograph sharpens into place. A serif headline, an intro, an Arrow Pill and an underline link stay on the left throughout.

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

Base UI flavor

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

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

Quick start

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

import { Hero248, hero248Demo } from "@/components/beste/block/hero248";

export default function Page() {
  return <Hero248 {...hero248Demo} />;
}

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

import { Hero248 } from "@/components/beste/block/hero248";

export default function Page() {
  return (
    <Hero248
      eyebrow="Hollis & Vane, architecture and interiors"
      heading="Every house starts as a drawing."
      description="We design homes and interiors from the first sketch to the last fixture."
      buttons={[
        { label: "Start a project", href: "/start" },
        { label: "See our houses", href: "/houses" },
      ]}
      sketch={{
        imageSrc: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=2000&q=80",
        imageAlt: "A modern house with wide glass walls and a pool",
        paperColor: "var(--background)",
        inkColor: "var(--foreground)",
      }}
    />
  );
}

Props

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

Behavior notes

• Progress has 2 parts: an intro value animates to 0.4 over 3.4s after a 0.5s delay (the pen drawing), and scroll progress from 0.06 to 0.84 adds the remaining 0.6 (the wash and photo). The block sets progress itself with autoplay off.
• The section is 250vh tall with a sticky stage of 100svh - 78px (at least 640px).
• The section paints sketch.paperColor (falling back to var(--background)) as its background, so the sheet and the page are one surface. The demo passes var(--background) for the paper and var(--foreground) for the ink, so the sheet, the pen lines and the copy all follow the theme.
• The drawing frame only renders when sketch is set; without it the copy stands alone on the paper.
• If the WebGL program fails, SketchToPhoto shows the plain photograph as an img.
• With reduced motion the section is 1 screen tall with no pinning, and the finished photograph shows at progress 1.