Arc Steps

Pinned "How it works" section. A marker travels along a half circle from step to step as you scroll, the passed arc draws in, and the whole section flips to each step's solid color.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/arc-steps

import { ArcSteps } from "@/components/arc-steps"

const steps = [
  { title: "Install", description: "One command adds the component and its dependencies to your project.", color: "#0a0a0a", foreground: "#ededed" },
  { title: "Customize", description: "It's your code. Tweak props, colors and timing until it feels like yours.", color: "#ff4d12", foreground: "#0a0a0a" },
  { title: "Ship", description: "Server-rendered, accessible and light. Deploy it with the rest of your app.", color: "#f5f0e8", foreground: "#0a0a0a" },
  { title: "Iterate", description: "Pull updates when you want them, keep your changes when you don't.", color: "#1f3a2e", foreground: "#f5f0e8" },
]

export function Demo() {
  return (
    <ArcSteps steps={steps} />
  )
}

Updates live as you change the controls. Only non-default props are included.