"use client"; import React, { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; export interface TactileCyberBadgeProps extends React.ComponentPropsWithoutRef<"div"> { name?: string; role?: string; idNumber?: string; primaryColor?: string; accentColor?: string; companyName?: string; } export const TactileCyberBadge: React.FC = ({ name = "ALEX CHEN", role = "LEAD ENGINEER", idNumber = "M-99201", primaryColor = "#ff5c71", accentColor = "#7fff5e", companyName = "MELON_UI //", className = "", style, ...props }) => { const containerRef = useRef(null); // Motion values for drag const x = useMotionValue(0); const y = useMotionValue(0); // Smooth springs for physics const springConfig = { damping: 15, stiffness: 120, mass: 1.2 }; const springX = useSpring(x, springConfig); const springY = useSpring(y, springConfig); // 3D Tilt based on drag offset const rotateX = useTransform(springY, [-300, 300], [25, -25]); const rotateY = useTransform(springX, [-300, 300], [-25, 25]); // Lanyard string physics const lanyardPath = useTransform([springX, springY], ([latestX, latestY]) => { const bX = latestX as number; const bY = latestY as number; // Top-center anchor point (assuming 600px container, so -300 from center) const startX = 0; const startY = -300; // Badge attachment point (top center of the badge) const endX = bX; const endY = bY - 180; // Control point for realistic gravity sag const ctrlX = (startX + endX) / 2; // Add extra slack when badge is pulled up const slack = Math.max(0, 150 - Math.abs(endY - startY)); const ctrlY = Math.max(startY, endY) + 50 + slack; return `M ${startX} ${startY} Q ${ctrlX} ${ctrlY} ${endX} ${endY}`; }); return (

{/* Background Subtle Grid */}

{/* Floating Ambience Particles (Deterministic) */}

{[...Array(6)].map((_, i) => ( ))}

{/* Dynamic Lanyard SVG (Centered origin) */}

{/* The Badge */} {/* Badge Glass Body */}

{/* Subtle noise texture */}

{/* Top Metallic Clip Section */}

{/* The Hole for Lanyard */}

{companyName}

{/* Holographic Element */}

{/* Profile Section */}

{/* Avatar Mock */}

{name}

{role}

ID NO.

{idNumber}

{/* Barcode Mock */}

{[2,1,3,1,1,2,3,1,2,1].map((w, i) => (

))}

{/* Bottom Edge LED Strip */}

{/* 3D Glare Overlay Effect */} { // Normalize position relative to drag bounds const posX = ((x as number) + 300) / 600 * 100; const posY = ((y as number) + 300) / 600 * 100; return `radial-gradient(circle at ${posX}% ${posY}%, rgba(255,255,255,0.4) 0%, transparent 50%)`; } ) }} />

); };

Component Showcase

Choose Installation Method

AI Automation Agent Prompt