Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/hud-button"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>
);
}