Skill

Interactive Icon Demos

Creates animated icon-based UI demos with hover effects, including network graphs, orbiting elements, and data grids for interactive cards.

Html

Css

Tailwind

frontend

design

npx claudepluginhub lunartech-x/superpowers --plugin superpowers

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Build animated icon arrangements and micro-visualizations that bring UI cards to life.

SKILL.md

Similar Skills

Micro-Interactions

Implements Tailwind CSS micro-interactions: hover card lifts, image scales, border glows, group hovers, and staggered animations for responsive UI feedback.

superpowers

hover-interactions

Guides hover effect creation using Disney's 12 principles, CSS patterns for card lifts, underlines, icon shifts, image zooms, and timing tables for responsive interactions.

dylantarre-animation-principles

animation-designer

Provides Framer Motion and CSS code for web animations including page transitions, component enter/exit, scroll effects, hover interactions, and modals.

2 files

daffy0208-ai-dev-standards

Stats

Stars13

Forks2

Last CommitMar 29, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Interactive Icon Demos

Build animated icon arrangements and micro-visualizations that bring UI cards to life.

Network/Graph Visualization

<div class="relative w-full h-32">
  <!-- Center Node -->
  <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 
              w-12 h-12 rounded-xl bg-brand-500 flex items-center justify-center shadow-lg z-10 
              group-hover:scale-110 transition-transform duration-500">
    <svg class="w-5 h-5 text-white"><!-- Icon --></svg>
  </div>
  
  <!-- Peripheral Nodes -->
  <div class="absolute left-2 top-2 w-8 h-8 rounded-lg bg-white shadow-md border border-zinc-100 
              flex items-center justify-center 
              group-hover:-translate-y-1 transition-transform duration-500">
    <div class="w-4 h-4 rounded-full bg-blue-200"></div>
  </div>
  <div class="absolute right-2 top-2 w-8 h-8 rounded-lg bg-white shadow-md border border-zinc-100 
              group-hover:-translate-y-1 transition-transform duration-500 delay-100">
    <div class="w-4 h-4 rounded-full bg-emerald-200"></div>
  </div>
  
  <!-- Connection Lines -->
  <svg class="absolute inset-0 w-full h-full opacity-20 group-hover:opacity-40 transition-opacity duration-500">
    <line x1="30" y1="25" x2="100" y2="65" stroke="#7C3AED" stroke-width="1.5" stroke-dasharray="4" />
  </svg>
</div>

Orbiting Elements

<div class="relative">
  <!-- Central element -->
  <div class="w-16 h-16 rounded-2xl bg-indigo-100 flex items-center justify-center 
              group-hover:scale-110 transition-transform duration-500">
    <svg class="w-7 h-7 text-indigo-500"><!-- Icon --></svg>
  </div>
  
  <!-- Orbiting dots -->
  <div class="absolute -left-6 top-0 w-6 h-6 rounded-full bg-emerald-50 border border-emerald-100 
              group-hover:-translate-x-1 group-hover:-translate-y-1 transition-transform duration-500">
    <div class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
  </div>
  <div class="absolute -right-6 top-0 w-6 h-6 rounded-full bg-blue-50 border border-blue-100 
              group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-500 delay-100">
    <div class="w-2 h-2 rounded-full bg-blue-400 animate-pulse" style="animation-delay: 0.5s;"></div>
  </div>
</div>

Data Type Grid

<div class="grid grid-cols-2 gap-2">
  <div class="bg-blue-50 rounded-xl p-3 border border-blue-100 
              group-hover:scale-105 group-hover:-rotate-1 transition-all duration-300">
    <div class="w-full h-8 rounded-lg bg-gradient-to-br from-blue-200 to-blue-100 mb-2 
                flex items-center justify-center">
      <svg class="w-4 h-4 text-blue-500"><!-- Image icon --></svg>
    </div>
    <p class="text-[9px] font-medium text-blue-700">CT / MRI</p>
  </div>
  <div class="bg-emerald-50 rounded-xl p-3 border border-emerald-100 
              group-hover:scale-105 group-hover:rotate-1 transition-all duration-300 delay-75">
    <div class="w-full h-8 rounded-lg bg-gradient-to-br from-emerald-200 to-emerald-100 mb-2 
                flex items-center justify-center">
      <svg class="w-4 h-4 text-emerald-500"><!-- DNA icon --></svg>
    </div>
    <p class="text-[9px] font-medium text-emerald-700">Genomics</p>
  </div>
</div>

Shield with Orbiting Security

<div class="relative">
  <!-- Central Shield -->
  <div class="w-20 h-24 relative group-hover:scale-110 transition-transform duration-500">
    <svg viewBox="0 0 24 24" class="w-full h-full text-brand-500">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" 
            fill="currentColor" fill-opacity="0.1" />
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" 
            stroke="currentColor" stroke-width="1" fill="none" />
    </svg>
    <!-- Lock Icon overlay -->
    <div class="absolute inset-0 flex items-center justify-center">
      <svg class="w-5 h-5 text-brand-600"><!-- Lock --></svg>
    </div>
  </div>
  
  <!-- Orbiting badges -->
  <div class="absolute -left-4 top-2 w-8 h-8 rounded-lg bg-emerald-50 border border-emerald-100 
              group-hover:-translate-x-1 transition-transform duration-500">
    <svg class="w-3 h-3 text-emerald-500"><!-- Check --></svg>
  </div>
</div>

Decision Tree

<div class="relative w-full max-w-[200px]">
  <!-- Root Node -->
  <div class="flex justify-center mb-3">
    <div class="w-12 h-12 rounded-xl bg-brand-500 flex items-center justify-center shadow-md 
                group-hover:scale-110 transition-transform duration-300">
      <svg class="w-5 h-5 text-white"><!-- AI icon --></svg>
    </div>
  </div>
  
  <!-- Branches -->
  <div class="flex justify-center gap-8">
    <div class="flex flex-col items-center group-hover:-translate-x-1 transition-transform duration-300 delay-100">
      <div class="w-px h-4 bg-zinc-300"></div>
      <div class="w-8 h-8 rounded-lg bg-emerald-50 border border-emerald-100">
        <svg class="w-3 h-3 text-emerald-500"><!-- Check --></svg>
      </div>
      <p class="text-[8px] text-zinc-500 mt-1">Low Risk</p>
    </div>
    <div class="flex flex-col items-center group-hover:translate-x-1 transition-transform duration-300 delay-200">
      <div class="w-px h-4 bg-zinc-300"></div>
      <div class="w-8 h-8 rounded-lg bg-amber-50 border border-amber-100">
        <svg class="w-3 h-3 text-amber-500"><!-- Alert --></svg>
      </div>
      <p class="text-[8px] text-zinc-500 mt-1">Review</p>
    </div>
  </div>
</div>

AI Agent Interface

<div class="bg-zinc-50 rounded-2xl p-4 border border-zinc-100">
  <div class="flex items-center gap-3 mb-3">
    <div class="w-8 h-8 rounded-lg bg-brand-500 flex items-center justify-center">
      <svg class="w-4 h-4 text-white"><!-- Sparkle --></svg>
    </div>
    <div class="bg-brand-50 rounded-xl px-3 py-2 flex-1">
      <p class="text-[9px] font-semibold text-brand-700">AI Agent Active</p>
      <p class="text-[8px] text-brand-600 mt-0.5">Processing analysis...</p>
    </div>
  </div>
  <div class="space-y-2">
    <div class="flex items-center gap-2 group-hover:translate-x-1 transition-transform duration-300">
      <div class="w-4 h-4 rounded-full bg-emerald-100 flex items-center justify-center">
        <svg class="w-2 h-2 text-emerald-600"><!-- Check --></svg>
      </div>
      <span class="text-[10px] text-zinc-600">Step complete</span>
    </div>
    <div class="flex items-center gap-2 group-hover:translate-x-1 transition-transform duration-300 delay-75">
      <div class="w-4 h-4 rounded-full border-2 border-brand-300 animate-spin" 
           style="animation-duration: 2s;"></div>
      <span class="text-[10px] text-zinc-600">Processing...</span>
    </div>
  </div>
</div>

Animation Guidelines

Use group-hover for parent-triggered animations
Stagger with delay-75, delay-100, delay-200
Keep transforms subtle (scale 1.05-1.1, translate 1-4px)
Use transition-transform for performance
Pair with animate-pulse for activity indicators