←
Isometric 3D Revive Button

Isometric 3D Revive Button

Isometric 30°

Authentic 30° isometric 3D extruded button featuring dynamic spring depression, obsidian bevel walls, amber indicator flare, and blinding optical neon underglow.

Interactive Playground & Studio

Live Controls
isometric-revive-button.tsx

tus apr 29

10:05 am

Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Default Obsidiantheme="default"

tus apr 29

10:05 am

1:1 spec extruded obsidian bevels with amber indicator flare.

Amber Solar Flaretheme="amber"

tus apr 29

10:05 am

Warm golden amber underglow with dual bevel highlights.

Electric Cyantheme="cyan"

tus apr 29

10:05 am

Laser cyan neon underlayer with high-contrast obsidian slab.

Cyber Violettheme="violet"

tus apr 29

10:05 am

Ultraviolet neon underglow with cybernetic 3D extrusion.

UI Pirate Magmatheme="uipirate"

tus apr 29

10:05 am

Signature brand magma orange 3D isometric bevel slab.

Gold Luxurytheme="gold-luxury"

tus apr 29

10:05 am

Prestige champagne gold walls with golden beacon flare.

Emerald Pulsetheme="emerald"

tus apr 29

10:05 am

Toxic phosphor emerald underglow with high-precision bevel.

Crimson Reactortheme="crimson"

tus apr 29

10:05 am

High-alert crimson red reactor bloom with dark obsidian walls.

Features & Physics

✓Authentic 30° isometric matrix projection
✓Multi-layered extruded bevel side-walls
✓Optical neon ground reflection rim
✓Interactive 3D depression with spring damping

Code & Integration

Customized live with your active playground prop settings:

"use client";

import React, { useState } from "react";
import { motion } from "framer-motion";

export type IsometricReviveTheme = "default" | "amber" | "cyan" | "emerald" | "violet" | "crimson" | "uipirate";
export type IsometricReviveSize = "xs" | "sm" | "md" | "lg" | "xl";

export interface IsometricReviveButtonProps {
  label?: string;
  theme?: IsometricReviveTheme;
  size?: IsometricReviveSize;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}

export function IsometricReviveButton({
  label = "Revive Now",
  theme = "default",
  size = "md",
  onClick,
  disabled = false,
  className = "",
}: IsometricReviveButtonProps) {
  const [isHovered, setIsHovered] = useState(false);
  const [isPressed, setIsPressed] = useState(false);

  const scale = size === "sm" ? 0.8 : size === "lg" ? 1.2 : 1;

  return (
    <div
      className={`relative select-none ${className}`}
      style={{ perspective: 1000 }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        setIsPressed(false);
      }}
    >
      <motion.button
        type="button"
        disabled={disabled}
        onClick={onClick}
        onMouseDown={() => setIsPressed(true)}
        onMouseUp={() => setIsPressed(false)}
        animate={{
          rotateX: 25,
          rotateY: -20,
          rotateZ: 10,
          y: isPressed ? 4 : isHovered ? -8 : 0,
          scale: scale * (isPressed ? 0.98 : 1),
        }}
        transition={{ type: "spring", stiffness: 400, damping: 25 }}
        className="relative px-8 py-4 rounded-2xl bg-[#0D1015] border border-white/20 text-white font-bold text-sm shadow-[0_20px_40px_rgba(0,0,0,0.8),inset_0_1px_0_rgba(255,255,255,0.4)] cursor-pointer focus:outline-none flex items-center gap-3"
      >
        <span className="w-2 h-2 rounded-full bg-[#FFA000] shadow-[0_0_8px_#FFA000] animate-pulse" />
        <span className="tracking-wide uppercase text-xs font-mono">{label}</span>
      </motion.button>
    </div>
  );
}

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
labelstring"Revive Now"Text rendered on the isometric faceplate.
theme"default" | "amber" | "cyan" | "violet" | "uipirate" | "gold-luxury" | "emerald" | "crimson""default"Color theme for the isometric bevel extrusion.
size"xs" | "sm" | "md" | "lg" | "xl""md"Controls scale matrix factor.
onClick() => voidundefinedAction callback on 3D button press.