Compare approaches: Your Current • Tailwind UI

Shadcn Icon Components

Interactive icon components from shadcn/ui with advanced animation patterns. These demos approximate the shadcn styles using CSS.

1. Icon Button (Shadcn Style)

Hover to see: scale to 1.05x, background color shift, and icon fill transition. Active state would include particle bursts and radial pulses.

Key Features:

  • Outline-to-fill transition on hover
  • Scale to 1.05x on hover, 0.95x on click
  • Circular background with color fade-in
  • Original includes radial gradient pulse and 6-point particle burst when active

2. Magnetic Button (Simplified)

The original has animated particles that spring toward center on hover. This CSS approximation shows the visual style with background particles.

Key Features:

  • 12 particles positioned randomly around button
  • Particles spring toward center on hover (requires JS)
  • Opacity shifts from 40% to 100% when attracting
  • Spring physics for natural motion (stiffness: 50, damping: 10)

3. Ripple Button (Hover-Only Demo)

Material design ripple effect. The original emanates from click position; this CSS version shows the hover scale effect.

Key Features:

  • Ripple emanates from exact click coordinates
  • 20px circle scales to 10x size over 600ms
  • Multiple overlapping ripples supported
  • Auto-cleanup after animation completes
  • Variant system matches button styles

Shadcn vs. Current Icon Styles

Comparing these advanced shadcn patterns to the icon styles on the icon-demos page.

Shadcn Approach

  • Tech Stack: React + Framer Motion (~80-120KB)
  • Animations: Spring physics, particle systems, multi-layer effects
  • Visual Style: Dramatic, attention-grabbing
  • Performance: Requires client-side JavaScript
  • Best For: Web apps, dashboards, interactive tools

Current Approach

  • Tech Stack: Pure Astro + Tailwind CSS (minimal bundle)
  • Animations: Hardware-accelerated CSS transitions
  • Visual Style: Subtle, refined, professional
  • Performance: No JavaScript needed for hover effects
  • Best For: Content sites, portfolios, marketing pages

Recommendation: The shadcn patterns are impressive for interactive web apps, but your current capsule-based icons (especially Option B from icon-demos) are more appropriate for a professional consulting site. They provide clear hover feedback without the performance cost or visual heaviness of particle systems.