Cybernetic Team Showcase

Component 44

About

creative and interactive "Cybernetic Team Showcase" section. It displays your team members in a futuristic grid. When you hover over a card, a "cybernetic" scanning effect animates over their photo, and their social links appear with a glitchy animation.

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

Code

How Cybernetic Team Showcase is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import React, { useState, useEffect } from "react";
import { Sun, Moon } from "lucide-react";
import ModernTeamShowcase from "@/components/ui/cybernetic-team-showcase";

// --- TYPE SAFETY ---
interface TeamMember {
  name: string;
  title: string;
  avatar: string;
  socials: Record<"github" | "linkedin" | "twitter", string>;
}

// --- THEMING & POLISHING DETAILS ---
const ThemeSwitcher = ({ setTheme }) => {
  return (
    <div className="fixed top-4 right-4 z-50">
      <button
        onClick={() => setTheme("light")}
        className="p-2 bg-card rounded-l-md text-foreground border border-border"
      >
        <Sun />
      </button>
      <button
        onClick={() => setTheme("dark")}
        className="p-2 bg-card rounded-r-md text-foreground border border-border"
      >
        <Moon />
      </button>
    </div>
  );
};

export default function DemoOne() {
  const [theme, setTheme] = useState("dark");

  // --- SSR & CLIENT-ONLY GUARDS ---
  useEffect(() => {
    // Guard against running on the server
    if (typeof window !== "undefined") {
      const root = window.document.documentElement;
      root.classList.remove("light", "dark");
      root.classList.add(theme);
    }
  }, [theme]);

  // Team data is now strongly typed and defined separately.
  const teamData: TeamMember[] = [
    {
      name: "Eva Rostova",
      title: "Lead Architect",
      avatar:
        "https://cdn.21st.dev/assets/mirror/b2/b2733c5e9619cb247cb76083a10220c8c90ed7a7a59705ed409e856d1cb99d71.jpg",
      socials: { github: "#", linkedin: "#", twitter: "#" },
    },
    {
      name: "Kenji Tanaka",
      title: "Quantum Engineer",
      avatar:
        "https://cdn.21st.dev/assets/mirror/db/db76da0d17c8068f20c02962581a4cc7cf9721733cb15721376fb29a486d0fbd.jpg",
      socials: { github: "#", linkedin: "#", twitter: "#" },
    },
    {
      name: "Aria Vance",
      title: "AI Ethicist",
      avatar:
        "https://cdn.21st.dev/assets/localized/eb196d378acfeb336ffa5ecf64e935e83cc75f8b9223cd53f1232342d69cc115.jpg",
      socials: { github: "#", linkedin: "#", twitter: "#" },
    },
    {
      name: "Jax Corrigan",
      title: "Systems Operator",
      avatar:
        "https://cdn.21st.dev/assets/mirror/dd/dd0c7c21753682f6161fba775a0015bd36dc3127a8562a3c3222dce6c43b34cd.jpg",
      socials: { github: "#", linkedin: "#", twitter: "#" },
    },
  ];

  return (
    <main>
      <ThemeSwitcher setTheme={setTheme} />
      <ModernTeamShowcase teamMembers={teamData} />
    </main>
  );
}