ANIMATION: clip-path
NAME: Clip Path Morph
CATEGORY: Animated

DESCRIPTION: Elements morph between geometric shapes using animated clip-path polygons. The animation cycles through hexagonal and star-like forms with smooth ease-in-out transitions. Pure CSS implementation with no JavaScript required for the animation loop.

IMPLEMENTATION RULES:
- Native browser APIs only — no external libraries
- Use useRef + useEffect with proper cleanup
- CSS @keyframes, @property, IntersectionObserver, requestAnimationFrame
- Performance: prefer CSS animations over JS when possible
- Responsive: reduce animation complexity on prefers-reduced-motion

CODE EXAMPLE:
function ClipPathMorph({ children }) {
  return (
    <>
      <style>{`
        @keyframes clip-morph {
          0% { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
          33% { clip-path: polygon(25% 0%, 100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%); }
          66% { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%, 50% 0%); }
          100% { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
        }
        .clip-morph { animation: clip-morph 6s ease-in-out infinite; }
      `}</style>
      <div className="clip-morph">{children}</div>
    </>
  );
}
