3D Tilt Shimmer Button

A premium glassmorphic button with real-time 3D cursor tilt, rotating rainbow border, soft ambient glow, and sweep sheen.

Open in

Installation

bunx shadcn@latest add https://jackui.com/r/3d-tilt-shimmer-button.json

npx shadcn@latest add https://jackui.com/r/3d-tilt-shimmer-button.json

pnpm dlx shadcn@latest add https://jackui.com/r/3d-tilt-shimmer-button.json

The CLI will automatically install the required dependencies (such as motion) and copy the component file into your project at:

components/jackui/buttons/3d-tilt-shimmer-button.tsx

Usage

"use client";

import React from "react";
import { ThreeDTiltShimmerButton } from "@/components/jackui/buttons/3d-tilt-shimmer-button";

export function ThreeDTiltShimmerButtonDemo() {
  return (
    <div className="flex h-40 w-full items-center justify-center bg-slate-950">
      <ThreeDTiltShimmerButton 
        size="md" 
        onClick={() => console.log("Button clicked!")}
      >
        Explore Galaxy
      </ThreeDTiltShimmerButton>
    </div>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	Optional. The content to render inside the button (e.g. text label and/or icon). Default: `"Hover me"`.
`size`	`"sm" \| "md" \| "lg"`	Optional. Sizing variant adjusting padding, font size, and border radius. Default: `"md"`.
`colorTheme`	`"indigo" \| "emerald" \| "amber" \| "rose" \| "mono" \| "sunset" \| "yellow" \| "rainbow"`	Optional. The color theme variant for the borders and ambient glow. Default: `"rainbow"`.
`tiltMaxX`	`number`	Optional. Maximum X-axis tilt angle in degrees when cursor reaches the vertical boundaries. Default: `10`.
`tiltMaxY`	`number`	Optional. Maximum Y-axis tilt angle in degrees when cursor reaches the horizontal boundaries. Default: `18`.
`perspective`	`number`	Optional. 3D perspective depth in pixels applied to the tilt effect. Default: `800`.
`showRainbowBorder`	`boolean`	Optional. Whether to render the rotating gradient neon border ring. Default: `true`.
`showGlow`	`boolean`	Optional. Whether to show the soft moving ambient shadow glow behind the button. Default: `true`.
`showShimmerSweep`	`boolean`	Optional. Whether to show the linear light sheen sweep across the button surface on hover. Default: `true`.
`showPulseDot`	`boolean`	Optional. Whether to display the breathing gradient pulse indicator dot next to the label. Default: `false`.
`glowDuration`	`number`	Optional. Duration in seconds for a complete rotation of the rainbow glow background. Default: `6`.
`shimmerDuration`	`number`	Optional. Duration in seconds for a complete sweep of the light sheen shimmer. Default: `2.2`.
`...props`	`React.ButtonHTMLAttributes<HTMLButtonElement>`	Optional. Any additional standard HTML button element properties (e.g. `onClick`, `disabled`, `type`, `aria-*`) can be passed and are spread onto the button.

Motion & Design System

Continuous 3D Perspective Tilt: Tracks the mouse position with normalized coordinates and responsive spring physics (stiffness: 280, damping: 22), tilting up/down and left/right naturally under the user's cursor.
Dynamic Projected Depth Shadow: The drop shadow offsets dynamically in real-time counter to the tilt angle, giving the button volumetric presence above the canvas.
Z-Axis Elevated Parallax: Text and icons float forward 18px in 3D space (translateZ(18px)), creating an authentic multi-layer glass card feel.
Tactile Click Feedback: Integrated click burst flash and immediate spring compression (scale: 0.965) provides instant validation for mouse clicks and keyboard activations (Enter / Space).
Reduced Motion Respect: Automatically flattens 3D transformations, stops sheen sweeps, and swaps animated spotlights with clean static gradients when prefers-reduced-motion is enabled.

3D Tilt Shimmer Button

Installation

Usage

Props

Motion & Design System

On this page