🌀 SVG Animation Guide

VibeDev Motion treats SVGs as Physical Entities, not just static vectors. This guide covers the two primary SVG components: VibeChain and VibePath.

---

1. VibeChain (The Physical Rope)

🧩 What it does

VibeChain takes a standard SVG path and decomposes it into a series of physical segments connected by joints (via the Rapier WASM core). This transforms a static line into a rope, cable, or chain that reacts to gravity, wind, and user interaction.

🎯 Use Cases

• Interactive "Strings": Pulling a light-switch or a decorative cord.
• Dynamic Connectors: Cables connecting UI nodes that sway when moved.
• Elastic Dividers: Visual separator lines that "bounce" when the page scrolls.

🛠️ Props Reference

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | path | string | Required | The SVG path data (d attribute). | | segmentCount | number | 15 | Number of physical joints in the chain. | | color | string | 'currentColor' | Stroke color of the chain. | | width | number | 2 | Stroke width. | | physics | boolean | true | Whether to enable the physical simulation. |

🚀 Demo Source Code

import { VibeChain } from 'vibedev-motion';

const InteractiveRope = () => (
  <div style={{ height: '400px', width: '100%' }}>
    <VibeChain 
      path="M 100 0 L 100 300" // A straight vertical line
      segmentCount={20}
      color="#7e22ce"
      width={4}
      physics={true}
    />
  </div>
);

---

2. VibePath (Elastic Drawing)

🧩 What it does

VibePath is an enhanced version of motion.path. It specializes in the "Drawing" effect (using pathLength). It wraps standard Framer Motion values in an elastic spring layer, giving every line a snappy, tactile feel during reveals or state changes.

🎯 Use Cases

• High-end Icon Reveals: Icons that "snap" into existence.
• Kinetic Handwritten Text: Signatures or sketches that feel physical as they draw.
• Bouncy Progress Borders: Circular or linear progress indicators with overshoot and resonance.

🛠️ Props Reference

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | elastic | boolean | true | Enables spring-based overshoot for drawing values. | | intensity | number | 100 | Controls the stiffness of the spring (Higher = Snappier). | | ...motionPathProps | any | - | Accepts all standard Framer Motion path props. |

🚀 Demo Source Code

import { VibePath } from 'vibedev-motion';

const BouncyCheckmark = () => (
  <svg viewBox="0 0 100 100">
    <VibePath
      path="M 20 50 L 45 75 L 80 25"
      fill="none"
      stroke="#10b981"
      strokeWidth={8}
      initial={{ pathLength: 0 }}
      animate={{ pathLength: 1 }}
      intensity={150} // Extra snappy checkmark
      elastic={true}
    />
  </svg>
);

---

🏗️ Performance & Optimization

1. Segment Count: For VibeChain, keep segmentCount under 30 per component to maintain 60fps on lower-end devices.
2. ViewBox Optimization: Always use overflow: visible on the parent SVG when using VibeChain, as physical simulation may push the path outside the initial bounding box.
3. Hardware Acceleration: VibePath automatically uses transformBox: fill-box to ensure rotation and scaling are hardware-accelerated.