# Lodestone: Two Paths

> A hero with a primary and a secondary call to action. The field rests on the primary; lean toward the other and its `strength` takes over, so the field swings across in a wave from that button.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/lodestone-paths-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/lodestone-paths-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/lodestone-paths-demo-light-c1d3ab3a24b18e21.png
- Registry item: https://keyframeui.com/r/lodestone-paths-demo.json
- Categories: background, interaction, canvas
- Listed: 2026-10-15, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/lodestone-paths-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/lodestone.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/lodestone#lodestone-paths-demo

## Files

### `registry/demos/lodestone-paths-demo.tsx`

```tsx
"use client";

import * as React from "react";

import { Lodestone, LodestoneQuiet, LodestoneTarget } from "@/components/ui/lodestone";

type Path = "build" | "sales";

export function LodestonePathsDemo() {
  // The field rests on the primary path and follows whichever one the visitor leans toward.
  const [leaning, setLeaning] = React.useState<Path | null>(null);
  const active = leaning ?? "build";

  const lean = (path: Path) => ({
    strength: active === path ? 1 : 0.12,
    onPointerEnter: () => setLeaning(path),
    onPointerLeave: () => setLeaning(null),
    onFocus: () => setLeaning(path),
    onBlur: () => setLeaning(null),
  });

  return (
    <Lodestone
      cursor={0.6}
      className="flex h-[var(--demo-height,32rem)] w-full flex-col items-center justify-center rounded-2xl border border-border bg-background px-6 text-center text-foreground"
    >
      <LodestoneQuiet className="flex flex-col items-center">
        <h2 className="max-w-[16ch] text-4xl/[1.05] font-semibold tracking-tight text-balance sm:text-5xl/[1.03]">
          Your first agent ships this afternoon
        </h2>
        <p className="mt-4 max-w-sm text-base/7 text-pretty text-muted-foreground">
          Start from a template on your own, or walk through your stack with an engineer.
        </p>
      </LodestoneQuiet>

      <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
        <LodestoneTarget {...lean("build")}>
          <a
            href="#start"
            className="inline-flex h-11 items-center rounded-full bg-foreground px-6 text-sm font-medium text-background"
          >
            Start building free
          </a>
        </LodestoneTarget>
        <LodestoneTarget {...lean("sales")}>
          <a
            href="#sales"
            className="inline-flex h-11 items-center rounded-full border border-border bg-background px-6 text-sm font-medium transition-colors hover:bg-muted"
          >
            Talk to an engineer
          </a>
        </LodestoneTarget>
      </div>
    </Lodestone>
  );
}
```