HUD Button

Buttons 85

About

This is a styled HUD-themed button showcase page that demonstrates two custom design systems (style1 and style2) with animated entrance effects using framer-motion. Style 1 features a diagonal, tech-inspired layout, while Style 2 includes hexagonal variants in small, default, and large sizes. Buttons are interactively clickable and tailored to simulate futuristic UI components. Perfect for sci-fi interfaces, game UIs, or immersive apps where you want buttons that feel like part of a heads-up display or control deck.

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

Code

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

Usage.tsx

"use client";

import { motion } from "framer-motion"
import {HudButton} from "@/components/ui/hud-button"

export default function Page() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.2,
      }
    }
  }

  const itemVariants = {
    hidden: { 
      opacity: 0, 
      y: 20,
      scale: 0.95,
    },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: {
        type: "spring",
        stiffness: 400,
        damping: 25,
      }
    }
  }

  return (
    <div className="min-h-screen p-8 bg-background flex items-center justify-center">
      <motion.div 
        className="max-w-6xl w-full space-y-12"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >

        {/* Style 1 Examples */}
        <motion.div variants={itemVariants} className="space-y-6">
          <h2 className="text-2xl font-semibold text-foreground">Style 1 - Diagonal Design</h2>
          <div className="flex flex-wrap gap-6 justify-center">
            <HudButton 
              style="style1" 
              variant="primary"
              onClick={() => console.log("Primary clicked!")}
            >
              Primary Button
            </HudButton>
            <HudButton 
              style="style1" 
              variant="secondary"
              onClick={() => console.log("Secondary clicked!")}
            >
              Secondary Button
            </HudButton>
          </div>
        </motion.div>

        {/* Style 2 Examples */}
        <motion.div variants={itemVariants} className="space-y-6">
          <h2 className="text-2xl font-semibold text-foreground">Style 2 - Hexagonal Design</h2>
          
          {/* Primary Variants */}
          <div className="space-y-4">
            <h3 className="text-lg font-medium text-foreground">Primary Variants</h3>
            <div className="flex flex-wrap gap-6 justify-center">
              <HudButton 
                style="style2" 
                variant="primary" 
                size="small"
                onClick={() => console.log("Small primary clicked!")}
              >
                Small
              </HudButton>
              <HudButton 
                style="style2" 
                variant="primary" 
                size="default"
                onClick={() => console.log("Default primary clicked!")}
              >
                Default
              </HudButton>
              <HudButton 
                style="style2" 
                variant="primary" 
                size="large"
                onClick={() => console.log("Large primary clicked!")}
              >
                Large Button
              </HudButton>
            </div>
          </div>

          {/* Secondary Variants */}
          <div className="space-y-4">
            <h3 className="text-lg font-medium text-foreground">Secondary Variants</h3>
            <div className="flex flex-wrap gap-6 justify-center">
              <HudButton 
                style="style2" 
                variant="secondary" 
                size="small"
                onClick={() => console.log("Small secondary clicked!")}
              >
                Small
              </HudButton>
              <HudButton 
                style="style2" 
                variant="secondary" 
                size="default"
                onClick={() => console.log("Default secondary clicked!")}
              >
                Default
              </HudButton>
              <HudButton 
                style="style2" 
                variant="secondary" 
                size="large"
                onClick={() => console.log("Large secondary clicked!")}
              >
                Large Button
              </HudButton>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </div>
  );
}