Hero Dipole Field

A full-bleed hero section where a canvas field of iron-filing strokes solved from a two-pole dipole field forms the headline's letters as the cursor approaches, with the CTA acting as a fixed magnetic pole that bends the field on hover.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Dipole Field to your project and fits it to your theme.

import LodestoneHero from "@/components/ui/hero-dipole-field";

export default function Preview() {
  return (
    <div className="w-full h-screen">
      <LodestoneHero />
    </div>
  );
}