accent-animations

What this skill does

# Accent Animations Skill

Expert knowledge for decorative accent animations - floating shapes, glowing orbs, animated borders, sparkle effects, and embellishments that add visual polish and delight to interfaces.

## When to Use

Activate this skill when:
- User wants decorative floating elements
- Adding glowing or shimmer effects
- Creating animated borders or outlines
- Building sparkle or confetti effects
- Need subtle ambient animations
- Adding visual polish to sections

## File Patterns

- `**/*.tsx` with decorative components
- `**/components/Accent*.tsx`
- `**/components/Decoration*.tsx`
- `**/components/*Sparkle*.tsx`

## Accent Animation Types

### 1. Floating Shapes

#### Floating Orbs
```tsx
import { motion } from 'framer-motion';

interface OrbProps {
  color?: string;
  size?: number;
  blur?: number;
  duration?: number;
}

export function FloatingOrb({
  color = '#667eea',
  size = 300,
  blur = 80,
  duration = 20,
}: OrbProps) {
  return (
    <motion.div
      className="absolute rounded-full pointer-events-none"
      style={{
        width: size,
        height: size,
        background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
        filter: `blur(${blur}px)`,
      }}
      animate={{
        x: [0, 100, -50, 0],
        y: [0, -80, 40, 0],
        scale: [1, 1.2, 0.9, 1],
      }}
      transition={{
        duration,
        repeat: Infinity,
        ease: 'easeInOut',
      }}
    />
  );
}

export function FloatingOrbs() {
  return (
    <div className="absolute inset-0 -z-10 overflow-hidden">
      <FloatingOrb color="#667eea" size={400} className="top-20 left-20" />
      <FloatingOrb color="#764ba2" size={300} duration={25} className="bottom-40 right-20" />
      <FloatingOrb color="#f093fb" size={250} duration={18} className="top-1/2 left-1/3" />
    </div>
  );
}
```

#### Floating Geometric Shapes
```tsx
const shapes = ['circle', 'square', 'triangle'] as const;

interface FloatingShapeProps {
  shape: typeof shapes[number];
  size?: number;
  color?: string;
  duration?: number;
  delay?: number;
}

export function FloatingShape({
  shape,
  size = 20,
  color = 'rgba(99, 102, 241, 0.3)',
  duration = 15,
  delay = 0,
}: FloatingShapeProps) {
  const shapeStyles = {
    circle: { borderRadius: '50%' },
    square: { borderRadius: '4px' },
    triangle: {
      clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',
      borderRadius: '0',
    },
  };

  return (
    <motion.div
      style={{
        width: size,
        height: size,
        backgroundColor: color,
        ...shapeStyles[shape],
      }}
      animate={{
        y: [0, -30, 0],
        x: [0, 15, -15, 0],
        rotate: [0, 180, 360],
        opacity: [0.3, 0.6, 0.3],
      }}
      transition={{
        duration,
        delay,
        repeat: Infinity,
        ease: 'easeInOut',
      }}
    />
  );
}

export function FloatingShapes({ count = 15 }: { count?: number }) {
  const items = Array.from({ length: count }, (_, i) => ({
    id: i,
    shape: shapes[i % shapes.length],
    size: Math.random() * 30 + 10,
    x: Math.random() * 100,
    y: Math.random() * 100,
    duration: Math.random() * 10 + 10,
    delay: Math.random() * 5,
  }));

  return (
    <div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none">
      {items.map((item) => (
        <div
          key={item.id}
          className="absolute"
          style={{ left: `${item.x}%`, top: `${item.y}%` }}
        >
          <FloatingShape
            shape={item.shape}
            size={item.size}
            duration={item.duration}
            delay={item.delay}
          />
        </div>
      ))}
    </div>
  );
}
```

### 2. Glow Effects

#### Pulsing Glow
```tsx
export function PulsingGlow({
  color = '#667eea',
  size = 200,
}: {
  color?: string;
  size?: number;
}) {
  return (
    <motion.div
      className="absolute rounded-full pointer-events-none"
      style={{
        width: size,
        height: size,
        background: `radial-gradient(circle, ${color}40 0%, transparent 70%)`,
      }}
      animate={{
        scale: [1, 1.5, 1],
        opacity: [0.5, 0.8, 0.5],
      }}
      transition={{
        duration: 3,
        repeat: Infinity,
        ease: 'easeInOut',
      }}
    />
  );
}
```

#### Glow Border
```tsx
export function GlowBorder({
  children,
  color = '#667eea',
}: {
  children: React.ReactNode;
  color?: string;
}) {
  return (
    <div className="relative">
      <motion.div
        className="absolute -inset-0.5 rounded-xl opacity-75 blur-sm"
        style={{ background: color }}
        animate={{
          opacity: [0.5, 0.8, 0.5],
        }}
        transition={{
          duration: 2,
          repeat: Infinity,
          ease: 'easeInOut',
        }}
      />
      <div className="relative bg-slate-900 rounded-xl">{children}</div>
    </div>
  );
}
```

#### Rainbow Glow Border
```tsx
export function RainbowGlowBorder({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative group">
      <motion.div
        className="absolute -inset-1 rounded-xl opacity-75 blur"
        style={{
          background: 'linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000)',
          backgroundSize: '400%',
        }}
        animate={{
          backgroundPosition: ['0% 50%', '100% 50%', '0% 50%'],
        }}
        transition={{
          duration: 5,
          repeat: Infinity,
          ease: 'linear',
        }}
      />
      <div className="relative bg-slate-900 rounded-xl">{children}</div>
    </div>
  );
}
```

### 3. Sparkle Effects

#### Sparkle Component
```tsx
interface SparkleProps {
  size?: number;
  color?: string;
}

export function Sparkle({ size = 20, color = '#FFC700' }: SparkleProps) {
  return (
    <motion.svg
      width={size}
      height={size}
      viewBox="0 0 160 160"
      fill="none"
      initial={{ scale: 0, rotate: 0 }}
      animate={{
        scale: [0, 1, 0],
        rotate: [0, 180],
        opacity: [0, 1, 0],
      }}
      transition={{
        duration: 0.8,
        ease: 'easeOut',
      }}
    >
      <path
        d="M80 0C80 0 84.2846 41.2925 101.496 58.504C118.707 75.7154 160 80 160 80C160 80 118.707 84.2846 101.496 101.496C84.2846 118.707 80 160 80 160C80 160 75.7154 118.707 58.504 101.496C41.2925 84.2846 0 80 0 80C0 80 41.2925 75.7154 58.504 58.504C75.7154 41.2925 80 0 80 0Z"
        fill={color}
      />
    </motion.svg>
  );
}
```

#### Sparkle Wrapper
```tsx
export function SparkleWrapper({
  children,
  sparkleCount = 3,
}: {
  children: React.ReactNode;
  sparkleCount?: number;
}) {
  const [sparkles, setSparkles] = useState<Array<{ id: number; x: number; y: number; size: number; color: string }>>([]);

  useEffect(() => {
    const interval = setInterval(() => {
      const sparkle = {
        id: Date.now(),
        x: Math.random() * 100,
        y: Math.random() * 100,
        size: Math.random() * 15 + 10,
        color: ['#FFC700', '#FF6B6B', '#4ECDC4', '#45B7D1'][Math.floor(Math.random() * 4)],
      };
      setSparkles((prev) => [...prev.slice(-sparkleCount + 1), sparkle]);
    }, 500);

    return () => clearInterval(interval);
  }, [sparkleCount]);

  return (
    <span className="relative inline-block">
      {sparkles.map((sparkle) => (
        <span
          key={sparkle.id}
          className="absolute pointer-events-none"
          style={{
            left: `${sparkle.x}%`,
            top: `${sparkle.y}%`,
            transform: 'translate(-50%, -50%)',
          }}
        >
          <Sparkle size={sparkle.size} color={sparkle.color} />
        </span>
      ))}
      <span className="relative z-10">{children}</span>
    </span>
  );
}
```

### 4. Animated Borders

#### Gradient Border Animation
```tsx
export function AnimatedGradientBorder({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative p-[2px] rounded-xl overflow-hidden">