Resolver

Component

About

An animated SVG diagram of a rotary transformer (resolver) that turns a shaft angle into ideal sine and cosine secondary signal channels, drawable in plan, front, profile or isometric view and optionally dragged by the user.

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

Code

How Resolver is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { Resolver } from "@/components/ui/resolver";

export default function ResolverDemo() {
  const [angle, setAngle] = React.useState(90);
  return (
    <div className="flex flex-col items-center justify-center gap-10 p-8">
      <Resolver behavior="turn" showChannels view="iso" />
      <Resolver angle={angle} interactive onAngleChange={setAngle} />
    </div>
  );
}