About
A draggable analog joystick control that reports normalized -1..1 x/y axes while the knob is dragged, for touch/game-style directional input.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Joystick to your project and fits it to your theme.
Code
How Joystick 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 { Joystick } from "@/components/ui/joystick";
export default function JoystickDemo() {
const [pos, setPos] = React.useState({ x: 0, y: 0 });
return (
<div className="flex min-h-screen w-full flex-col items-center justify-center gap-4 bg-background p-10 text-foreground">
<Joystick
onMove={(x, y) => setPos({ x, y })}
onRelease={() => setPos({ x: 0, y: 0 })}
/>
<p className="text-sm text-muted-foreground">
X {pos.x.toFixed(2)} · Y {pos.y.toFixed(2)}
</p>
</div>
);
}
More by f0rextasy
View all
Newsletter Signup Card
6
Stamp Seal
6
Network Graph
5
Board Checklist
4
Time Input
3
Data Table
3
Empty State Card
2
Running Order Timeline
2