Building Interactive Cybersecurity Labs with React & Framer Motion

When I set out to build a portfolio that truly showcased my skills, I wanted something that went beyond static demos. I wanted interactive learning experiences that could teach complex security concepts through visualization.

The Challenge

Traditional cybersecurity tutorials are often:

• Text-heavy with minimal interactivity
• Require actual virtual machines or Docker containers
• Don't show real-time attack/defense visualization
• Hard to access on mobile devices

I wanted to solve all of these problems.

The Solution: Browser-Based Interactive Labs

Using React, TypeScript, Framer Motion, and Tailwind CSS, I built a complete suite of interactive security labs that run entirely in the browser.

Key Features

1. Real-Time Network Topology Visualization

// Animated network topology with dynamic connections
<motion.svg className="absolute inset-0">
  <motion.line
    x1="20%" y1="70%" x2="50%" y2="30%"
    stroke="#f97316"
    strokeWidth="2"
    initial={{ pathLength: 0 }}
    animate={{ pathLength: 1 }}
    transition={{ duration: 1, repeat: Infinity }}
  />
</motion.svg>

This shows students exactly how attacks flow through a network, from attacker to target.

2. Interactive Protocol Analysis

For modules like AS-REP Roasting and Kerberos attacks, I visualize every packet:

interface KerberosPacket {
  type: 'AS-REQ' | 'AS-REP' | 'KRB_ERROR';
  source: string;
  destination: string;
  encrypted: boolean;
  data?: string;
}

Students can see AS-REQ requests, AS-REP responses, and error messages in real-time.

3. Attack Phase Progression

Every lab has distinct phases (Enumeration → Extraction → Cracking → Complete) with:

• Progress bars
• Stage indicators
• Real-time statistics
• Detection risk meters

4. Responsive Theory + Simulation

Mobile: Theory-only view with detailed explanations

Desktop: Full simulation with collapsible theory panel

const { isMobile, isTablet } = useDeviceType();

if (isMobile || isTablet) {
  return <TheoryView />;
}

return <FullSimulation />;

Technical Deep Dive

State Management with Zustand

I use Zustand for global module completion tracking:

const useCybersecurityStore = create<CybersecurityStore>((set) => ({
  moduleProgress: {},
  markModuleComplete: (moduleId) => set((state) => ({
    moduleProgress: {
      ...state.moduleProgress,
      [moduleId]: { completed: true, completedAt: new Date() }
    }
  }))
}));

Animation with Framer Motion

Framer Motion handles all the smooth transitions:

<AnimatePresence>
  {packets.slice(-15).reverse().map((packet) => (
    <motion.div
      key={packet.id}
      initial={{ opacity: 0, x: -20 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0 }}
    >
      {/* Packet details */}
    </motion.div>
  ))}
</AnimatePresence>

Performance Optimization

With complex visualizations, performance is critical:

• Windowing: Only render last 15 packets
• Memoization: Expensive calculations cached
• Lazy loading: Components load on demand
• Conditional rendering: Hide inactive visualizations

{showPackets && packetLog.length > 0 && (
  <PacketVisualization packets={packetLog.slice(-15)} />
)}

Lab Examples

1. AS-REP Roasting Lab

• Network topology showing DC, attacker, and domain users
• Real-time Kerberos packet capture
• Interactive user selection with vulnerability status
• Detection risk tracking
• Hash extraction and offline cracking simulation

2. SQLMap Lab

• Target selection with vulnerability indicators
• Multiple injection technique visualization
• WAF detection and bypass
• Real-time database enumeration
• Complete data extraction visualization

3. Purple Team Labs

Each Purple Team lab shows both Red Team exploitation and Blue Team defense:

• Red perspective: How to attack
• Blue perspective: How to detect and prevent

Results

The response has been incredible:

• Highly interactive learning experience
• Visual understanding of complex protocols
• Mobile-accessible theory content
• No VM required - runs in browser
• Real-time feedback for every action

Key Lessons Learned

• Animation matters: Smooth animations make complex concepts easier to understand
• Progressive disclosure: Show basics first, reveal complexity gradually
• Visual feedback: Every action needs immediate visual response
• Mobile-first theory: Theory content must work on all devices
• State management: Clean state architecture prevents bugs

Tech Stack

• React 18 with Server Components
• TypeScript for type safety
• Next.js 14 for routing and SSR
• Framer Motion for animations
• Tailwind CSS for styling
• Zustand for state management
• Lucide Icons for consistent iconography

What's Next

I'm continuously expanding the lab suite:

• More Red Team attack modules
• Advanced Blue Team detection labs
• Purple Team dual-perspective scenarios
• OWASP Top 10 vulnerabilities
• API security testing

Conclusion

Building interactive security labs in the browser is challenging but incredibly rewarding. The combination of visual design, smooth animations, and educational content creates a learning experience that's both engaging and effective.

Want to see it in action? Check out the Red Team Lab or Purple Team Lab.

Built something similar? I'd love to hear about your approach!

James G. - AI Alchemist | Full-Stack Developer