Gestures

Drag, hover, tap, and pan interactions. Foundation for node manipulation in diagrams.

Basic Drag

Drag elements freely with 3D rotation based on position.

🤖

const x = useMotionValue(0);
const y = useMotionValue(0);
const rotateX = useTransform(y, [-100, 100], [30, -30]);
const rotateY = useTransform(x, [-100, 100], [-30, 30]);

<motion.div
  drag
  dragElastic={0.1}
  style={{ x, y, rotateX, rotateY }}
  whileDrag={{ scale: 1.1 }}
/>

Drag Constraints

Constrain drag to a specific area. Essential for canvas boundaries.

📦

⚡

🪙

const constraintsRef = useRef(null);

<motion.div ref={constraintsRef}>
  <motion.div
    drag
    dragConstraints={constraintsRef}
    dragElastic={0.1}
    whileDrag={{ scale: 1.05 }}
  />
</motion.div>

Hover & Tap States

Visual feedback for interactive elements.

📐Scale

✨Glow

🔄Rotate

🎨Border

<motion.div
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
/>

<motion.div
  whileHover={{ boxShadow: "0 0 25px rgba(0,0,0,0.5)" }}
/>

<motion.div
  whileHover={{ rotate: 10 }}
  whileTap={{ rotate: -10 }}
/>

Drag to Connect

Prototype for node connection via drag. Drag from one node to another.

🤖Agent

⚡Action

🪙Token

Connections: 0

const handleDragEnd = (nodeId, event) => {
  const elements = document.elementsFromPoint(x, y);
  const target = elements.find(el => el.dataset.nodeId);

  if (target && target.dataset.nodeId !== nodeId) {
    addConnection(nodeId, target.dataset.nodeId);
  }
};

Pan & Zoom Canvas

Drag to pan the canvas. Foundation for large diagram navigation.

🏠

🌳

🚗

x: 0, y: 0

<motion.div
  drag
  dragMomentum={false}
  onDrag={(_, info) => {
    setPosition({ x: info.offset.x, y: info.offset.y });
  }}
  style={{ touchAction: 'none' }}
>
  {/* Canvas content */}
</motion.div>