Hero211: Magnetic Field Hero

A full-height hero over the magnetic-field background, a Canvas 2D grid of iron filings that swing along the lines between two drifting poles while the cursor takes over one pole and clicks send shockwaves, with an oversized headline, an intro and two Turn Arrow block buttons rising in at the bottom.

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

Base UI flavor

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

This installs the block to components/beste/block/hero211.tsx plus the magnetic-field background and the button24 Turn Arrow button it uses.

Quick start

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

import { Hero211, hero211Demo } from "@/components/beste/block/hero211";

export default function Page() {
  return <Hero211 {...hero211Demo} />;
}

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

import { Hero211 } from "@/components/beste/block/hero211";

export default function Page() {
  return (
    <Hero211
      eyebrow="Contactless position sensing"
      heading="Read the field."
      description="Magnetic encoders for robot joints, surgical arms and satellite gimbals."
      buttons={[
        { label: "Order a sample kit", href: "/samples" },
        { label: "Browse datasheets", href: "/datasheets" },
      ]}
      field={{
        inkColor: "var(--foreground)",
        paperColor: "var(--background)",
        spacing: 24,
        secondPole: true,
        shockwave: 0.5,
        pulseInterval: 6.5,
      }}
    />
  );
}

Props

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

Behavior notes

• The field fills the section behind the copy; its ink and paper default to var(--foreground) and var(--background), so it follows the theme when field is left out.
• The cursor leads one pole and a click or tap sends a radial shockwave; left alone the field pulses on its own every pulseInterval seconds. The whole section shows a crosshair cursor.
• A gradient from the background color covers the lower 60% of the section, so the headline stays readable over dense filings.
• The field adapts its filing count to the device, pauses offscreen and draws one settled frame for reduced motion.
• The eyebrow, headline and the intro column rise in on mount at 0.05s, 0.15s and 0.3s; reduced motion shows them in place.
• The section is at least 640px or the viewport minus 78px tall, with the copy pushed to the bottom.