Analog Stick

A metallic stick that tilts into the press. Hover a quadrant and the cap leans, the shadow shifts, and the matching arrow goes amber.

byUrvish Mali from Uselayouts

Installation

terminal

pnpm dlx layro-cli add @iurvish/analog-stick

npx layro-cli add @iurvish/analog-stick

npx layro-cli add @iurvish/analog-stick

bunx layro-cli add @iurvish/analog-stick

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";

export type DirectionIcon = {
  className: string;
  path: string;
  viewBox: string;
};

const rowClassName = cn(
  "row relative flex h-[320px] w-full items-center justify-center overflow-hidden bg-transparent",
  "[@media(hover:hover)_and_(pointer:fine)]:[&:has(.t1:hover)_.button-wrapper]:[transform:translate(0,-5px)_rotateX(8deg)]",
  "[@media(hover:hover)_and_(pointer:fine)]:[&:has(.t1:hover)_.button-wrapper]:[transform-style:preserve-3d]",