PremiumNew

HolographicBadge

Badge with rainbow holographic shimmer effect using animated CSS gradients and transforms.

Creative & Uniqueholographicrainbowbadgeshimmereffect

Dependencies

shadcn/ui components needed:

npx shadcn@latest add lucide-react

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Shield, Crown, Gem, Award } from "lucide-react";
4
5const badges = [
6  { label: "Pro Member", icon: Crown, tier: "gold" },
7  { label: "Diamond Tier", icon: Gem, tier: "diamond" },
8  { label: "Verified", icon: Shield, tier: "silver" },
9  { label: "Top Contributor", icon: Award, tier: "rainbow" },
10];
11
12export default function HolographicBadge() {
13  return (
14    <div className="flex flex-col items-center gap-10 py-12">
15      <style>{`
16        @keyframes holo-shimmer {
17          0% { background-position: 0% 50%; }
18          50% { background-position: 100% 50%; }
19          100% { background-position: 0% 50%; }
20        }
21        @keyframes holo-rotate {
22          0% { filter: hue-rotate(0deg); }
23          100% { filter: hue-rotate(360deg); }
24        }
25        .holo-badge {
26          position: relative;
27          overflow: hidden;
28        }
29        .holo-badge::before {
30          content: "";
31          position: absolute;
32          inset: 0;
33          background: linear-gradient(
34            135deg,
35            rgba(255, 0, 150, 0.15) 0%,
36            rgba(0, 255, 255, 0.15) 20%,
37            rgba(255, 255, 0, 0.15) 40%,
38            rgba(0, 255, 150, 0.15) 60%,
39            rgba(150, 0, 255, 0.15) 80%,
40            rgba(255, 0, 150, 0.15) 100%
41          );
42          background-size: 300% 300%;
43          animation: holo-shimmer 4s ease-in-out infinite;
44          pointer-events: none;
45          border-radius: inherit;
46        }
47        .holo-badge::after {
48          content: "";
49          position: absolute;
50          inset: 0;
51          background: linear-gradient(
52            105deg,
53            transparent 40%,
54            rgba(255, 255, 255, 0.3) 45%,
55            rgba(255, 255, 255, 0.1) 50%,
56            transparent 55%
57          );
58          background-size: 250% 100%;
59          animation: holo-shimmer 3s ease-in-out infinite;
60          pointer-events: none;
61          border-radius: inherit;
62        }
63      `}</style>
64
65      <div className="flex flex-wrap items-center justify-center gap-4">
66        {badges.map((badge) => (
67          <div
68            key={badge.label}
69            className="holo-badge flex items-center gap-2.5 rounded-full border border-white/20 bg-zinc-900 px-5 py-2.5 shadow-lg"
70            style={badge.tier === "rainbow" ? { animation: "holo-rotate 6s linear infinite" } : undefined}
71          >
72            <badge.icon className="relative z-10 h-4.5 w-4.5 text-white" />
73            <span className="relative z-10 text-sm font-bold text-white">{badge.label}</span>
74          </div>
75        ))}
76      </div>
77
78      {/* Large showcase badge */}
79      <div className="holo-badge flex flex-col items-center gap-3 rounded-2xl border border-white/20 bg-zinc-900 px-12 py-8 shadow-2xl">
80        <Gem className="relative z-10 h-10 w-10 text-white" />
81        <span className="relative z-10 text-2xl font-extrabold tracking-tight text-white">LEGENDARY</span>
82        <span className="relative z-10 text-xs font-medium tracking-widest text-white/60 uppercase">Top 0.1% of users</span>
83      </div>
84    </div>
85  );
86}