### Install svelte-motion

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/README.md

Install the svelte-motion library using npm. This is the first step to using its animation capabilities in your Svelte project.

```bash
npm install svelte-motion
```

--------------------------------

### Direct Import Example

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/index.js.md

Demonstrates importing multiple core utilities directly from the package root for convenience.

```javascript
import { Motion, animate, useMotionValue } from 'svelte-motion';
```

--------------------------------

### Install Svelte Motion

Source: https://github.com/michael-obele/svelte-motion/blob/master/README.md

Install the svelte-motion package using npm. This is a development dependency.

```bash
npm install --save-dev svelte-motion
```

--------------------------------

### Initialize and Use PanSession

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/gestures.md

Manages pointer tracking for drag and pan gestures. Use this to define callbacks for session start, pan start, move, and end events.

```js
import { PanSession } from 'svelte-motion/gestures/PanSession';

// Create a new pan session
const panSession = new PanSession(event, {
  onSessionStart: (event) => {
    console.log('Session started');
  },
  onStart: (event, info) => {
    console.log('Pan started', info.point);
  },
  onMove: (event, info) => {
    console.log('Panning', info.delta.x, info.delta.y);
  },
  onEnd: (event, info) => {
    console.log('Pan ended', info.velocity);
  }
}, {
  transformPagePoint: (point) => point
});

// End the session
panSession.end();
```

--------------------------------

### Initialize and Use DragControls

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/gestures.md

Provides programmatic control over drag gestures. Use this to start drag interactions and update constraints.

```js
import { DragControls } from 'svelte-motion/gestures/drag/use-drag-controls';

const dragControls = new DragControls();

// Start a drag interaction
dragControls.start(event, {
  snapToCursor: true
});

// Update constraints
dragControls.updateConstraints();
```

--------------------------------

### UseGestures Component Example

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/gestures.md

Combines all gesture functionality (pan, tap, hover, focus, drag) into a single component. Requires a Motion component and binds its visualElement.

```svelte
<script>
  import { UseGestures } from 'svelte-motion/gestures/use-gestures';
  import { Motion } from 'svelte-motion';
  
  let visualElement; // Reference to a motion visual element
</script>

<Motion
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
  whileFocus={{ outline: "2px solid blue" }}
  whileDrag={{ opacity: 0.8 }}
  drag={true}
  bind:visualElement
>
  <div>Drag, tap, hover or focus me</div>
</Motion>

<UseGestures props={{
  whileHover: true,
  whileTap: true,
  whileFocus: true,
  drag: true
}} {visualElement} />
```

--------------------------------

### Use Animation Control Hooks

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/index.js.md

Import and use useAnimation and animationControls to imperatively control animations, such as starting and stopping them.

```javascript
import { useAnimation, animationControls } from 'svelte-motion';

const controls = useAnimation();
// Start animation
controls.start({ x: 100 });
```

--------------------------------

### Svelte Motion Component Usage Example

Source: https://github.com/michael-obele/svelte-motion/blob/master/src/motion/utils/DOCUMENTATION.md

Demonstrates how a Svelte Motion component might internally use the useMotionRef action to bind to a DOM element and forward an external ref.

```svelte
<script>
    import { motion } from 'svelte-motion';
    let CtargetEl; // external ref
</script>
<motion.div bind:this={CtargetEl} />
<!-- Internally, <MotionSSR> or <Motion> component uses something like: -->
<!-- <div use:useMotionRef(visualState, visualElement, externalRefFromProps)> -->
```

--------------------------------

### UsePanGesture for Panning/Dragging

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/gestures.md

Handles panning and dragging gestures. Provides callbacks for pan start, ongoing pan, and pan end. Requires a visualElement reference.

```svelte
<script>
  import { UsePanGesture } from 'svelte-motion/gestures/use-pan-gesture';
  
  let visualElement;
  
  function onPanStart(event, info) {
    console.log('Pan started', info.point);
  }
  
  function onPan(event, info) {
    console.log('Panning', info.delta.x, info.delta.y);
  }
  
  function onPanEnd(event, info) {
    console.log('Pan ended', info.velocity);
  }
</script>

<UsePanGesture
  props={{
    onPanStart,
    onPan,
    onPanEnd
  }}
  {visualElement}
/>
```

--------------------------------

### UseHoverGesture for Hover Interactions

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/gestures.md

Manages hover gestures, providing callbacks for when the hover starts and ends, and supporting `whileHover` animations. Requires a visualElement reference.

```svelte
<script>
  import { UseHoverGesture } from 'svelte-motion/gestures/use-hover-gesture';
  
  let visualElement;
  
  function onHoverStart(event, info) {
    console.log('Hover started');
  }
  
  function onHoverEnd(event, info) {
    console.log('Hover ended');
  }
</script>

<UseHoverGesture
  props={{
    onHoverStart,
    onHoverEnd,
    whileHover: true
  }}
  {visualElement}
/>
```

--------------------------------

### Create Custom MotionValues with svelte-motion

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/extending.md

This example shows how to create a custom MotionValue for handling color animations. It extends the base `motionValue` to include color-specific methods like `setHex` and `getHex`. Ensure `parseColor` and `rgbToHex` functions are implemented correctly.

```javascript
// colorMotionValue.js
import { motionValue } from 'svelte-motion/value';

export function colorMotionValue(initialColor) {
  const value = motionValue(parseColor(initialColor));
  
  return {
    // Expose the underlying motionValue
    get: value.get,
    set: value.set,
    onChange: value.onChange,
    
    // Add color-specific functionality
    getHex: () => {
      const { r, g, b } = value.get();
      return rgbToHex(r, g, b);
    },
    
    getRgb: () => {
      return value.get();
    },
    
    setHex: (hex) => {
      value.set(parseColor(hex));
    }
  };
}

function parseColor(color) {
  // Implementation to parse different color formats
  return { r: 0, g: 0, b: 0 }; // Placeholder
}

function rgbToHex(r, g, b) {
  // Implementation to convert RGB to hex
  return "#000000"; // Placeholder
}
```

--------------------------------

### UseDragControls for Programmatic Dragging

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/gestures.md

Enables programmatic control over drag gestures. Use the `dragControls` prop to initiate drags, for example, with `snapToCursor`.

```svelte
<script>
  import { UseDragControls } from 'svelte-motion/gestures/drag/use-drag-controls';
  import { Motion } from 'svelte-motion';
  
  function startDrag(event) {
    dragControls.start(event, { snapToCursor: true });
  }
</script>

<UseDragControls let:dragControls>
  <button on:pointerdown={startDrag}>
    Drag from here
  </button>
  
  <Motion drag="x" {dragControls}>
    <div>This element will be dragged</div>
  </Motion>
</UseDragControls>
```

--------------------------------

### Imperative UseAnimation API

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/animation.md

Manually create and control animations using the `useAnimation` hook. Controls can be used to start animations with specified properties and transitions.

```javascript
import { useAnimation } from 'svelte-motion/animation/use-animation';

const controls = useAnimation();

// Controls can be used to start animations
controls.start({
  x: 100,
  transition: { duration: 0.5 }
});
```

--------------------------------

### Integrate svelte-motion with D3.js for Animated Charts

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/extending.md

This example demonstrates how to use svelte-motion's `animate` function to smoothly transition data points in a D3.js-generated SVG chart. It requires D3.js for SVG manipulation and svelte-motion for animation.

```svelte
<script>
  import { onMount } from 'svelte';
  import { select } from 'd3-selection';
  import { line, curveCardinal } from 'd3-shape';
  import { animate } from 'svelte-motion/animation/animate';
  
  let svgEl;
  let data = [0, 30, 10, 40, 20, 50];
  let pathEl;
  
  onMount(() => {
    const svg = select(svgEl);
    
    // Create D3 line generator
    const lineGenerator = line()
      .curve(curveCardinal)
      .x((d, i) => i * 50)
      .y(d => 100 - d);
      
    // Create path element
    pathEl = svg.append('path')
      .attr('fill', 'none')
      .attr('stroke', '#ff3e00')
      .attr('stroke-width', 2);
      
    // Initial render
    pathEl.attr('d', lineGenerator(data));
    
    // Animate data changes
    setTimeout(() => {
      const newData = [50, 20, 40, 10, 30, 0];
      
      // Use svelte-motion to animate each data point
      data.forEach((oldValue, i) => {
        animate(oldValue, newData[i], {
          duration: 1,
          onUpdate: (latest) => {
            data[i] = latest;
            pathEl.attr('d', lineGenerator(data));
          }
        });
      });
    }, 1000);
  });
</script>

<svg bind:this={svgEl} width="300" height="100"></svg>
```

--------------------------------

### Internal UseLayoutId Component Logic

Source: https://github.com/michael-obele/svelte-motion/blob/master/src/motion/utils/DOCUMENTATION.md

This conceptual example shows how UseLayoutId.svelte might be used internally within a motion component to resolve and pass down a hierarchical layoutId.

```svelte
<!-- Inside a motion component's implementation -->
<script>
    import UseLayoutId from '.../UseLayoutId.svelte';
    export let layoutId; // User-provided layoutId
    // ... other props
</script>
<UseLayoutId props={{ layoutId }} let:layoutId={resolvedLayoutId}>
    <!-- Pass resolvedLayoutId to VisualElement -->
</UseLayoutId>
```

--------------------------------

### Import and Use Configuration Components

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/index.js.md

Import and use MotionConfig to set default transitions for all nested motion components, and LazyMotion for code-splitting animation features.

```javascript
import { MotionConfig, LazyMotion } from 'svelte-motion';

<MotionConfig transition={{ duration: 0.5 }}>
  <-- All motion components inside will use this transition -->
</MotionConfig>

<LazyMotion features={import('./features')}>
  <-- Code-split animation features -->
</LazyMotion>
```

--------------------------------

### Access ScaleCorrectionContext in Svelte

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/context.md

Get scale correction information for nested animations using getContext with ScaleCorrectionContext.

```svelte
import { ScaleCorrectionContext } from 'svelte-motion/context/ScaleCorrectionProvider.svelte';
import { getContext } from 'svelte';

// Access scale correction information
const scaleCorrection = getContext(ScaleCorrectionContext);
```

--------------------------------

### Use Advanced Animation Utilities

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/index.js.md

Import advanced utilities like transform, useSpring, useVelocity, and useViewportScroll for physics-based animations and scroll-linked effects.

```javascript
import { 
  transform, 
  useSpring, 
  useVelocity, 
  useViewportScroll 
} from 'svelte-motion';

// Spring physics
const smoothX = useSpring(rawX);

// Scroll values
const { scrollYProgress } = useViewportScroll();
```

--------------------------------

### Access PresenceContext in Svelte

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/context.md

Get presence information for managing component presence and exit animations by using getContext with PresenceContext.

```svelte
import { PresenceContext } from 'svelte-motion/context/PresenceContext';
import { getContext } from 'svelte';

// Get presence information
const presence = getContext(PresenceContext);
```

--------------------------------

### Basic Motion Animation

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/README.md

Demonstrates a basic animation where an element moves 100 pixels to the right over 2 seconds. Import the Motion component and use the 'animate' and 'transition' props.

```svelte
<script>
  import { Motion } from 'svelte-motion';
</script>

<Motion
  animate={{ x: 100 }}
  transition={{ duration: 2 }}
>
  <div>I will animate 100px to the right</div>
</Motion>
```

--------------------------------

### Use Gesture Hooks

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/index.js.md

Import gesture hooks like useDragControls, UseGestures, UsePanGesture, and UseTapGesture for handling user interactions.

```javascript
import { 
  useDragControls, 
  UseGestures, 
  UsePanGesture, 
  UseTapGesture 
} from 'svelte-motion';

// Create drag controls
const dragControls = useDragControls();
dragControls.start(event);
```

--------------------------------

### UseAnimation Component

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/animation.md

The UseAnimation component creates AnimationControls, which can be used to manually start, stop, and sequence animations on one or more components. It can be used declaratively or imperatively.

```APIDOC
## UseAnimation Component

### Description
A component that creates `AnimationControls`, which can be used to manually start, stop, and sequence animations on one or more components.

### Usage
```svelte
<script>
  import { UseAnimation } from 'svelte-motion/animation/use-animation';
</script>

<UseAnimation let:controls>
  <Motion animate={controls}>
    <div>Animated content</div>
  </Motion>
</UseAnimation>
```

### Imperative API
```js
import { useAnimation } from 'svelte-motion/animation/use-animation';

const controls = useAnimation();

controls.start({
  x: 100,
  transition: { duration: 0.5 }
});
```
```

--------------------------------

### Use Visual Element Utilities

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/index.js.md

Import visualElement, animateVisualElement, and isValidMotionProp for low-level manipulation and validation of motion elements.

```javascript
import { 
  visualElement, 
  animateVisualElement, 
  isValidMotionProp 
} from 'svelte-motion';

// Create a visual element
const element = visualElement(config)(props);
```

--------------------------------

### Import and Use Layout Animation Components

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/index.js.md

Import and use AnimatePresence and AnimateSharedLayout for managing component entrance/exit animations and shared element transitions.

```javascript
import { AnimatePresence, AnimateSharedLayout } from 'svelte-motion';

<AnimatePresence>
  {#if visible}
    <MotionDiv
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      Content
    </MotionDiv>
  {/if}
</AnimatePresence>

<AnimateSharedLayout>
  <MotionDiv layoutId="shared-element">
    Content that animates between positions
  </MotionDiv>
</AnimateSharedLayout>
```

--------------------------------

### Get DOM Context in JavaScript

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/context.md

Retrieve a context from the DOM hierarchy using the getDomContext utility. Specify the context name and the target DOM element.

```javascript
import { getDomContext } from 'svelte-motion/context/DOMcontext';

// Get a specific context from a DOM element
const motionContext = getDomContext('Motion', element);
```

--------------------------------

### UseTapGesture for Tap/Click Interactions

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/gestures.md

Handles tap and click gestures, allowing for associated animations like `whileTap`. Requires a visualElement reference.

```svelte
<script>
  import { UseTapGesture } from 'svelte-motion/gestures/use-tap-gesture';
  
  let visualElement;
  
  function onTap(event, info) {
    console.log('Tapped at', info.point);
  }
</script>

<UseTapGesture
  props={{
    onTap,
    whileTap: true
  }}
  {visualElement}
/>
```

--------------------------------

### Creating an HTML Visual Element

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/render.md

Initializes an HTML visual element to manage animations and transformations for HTML elements. Options can be passed to configure hardware acceleration.

```javascript
const visualElement = htmlVisualElement(options, { 
  enableHardwareAcceleration: true 
});
```

--------------------------------

### animationControls Function

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/animation.md

The animationControls function creates an object that allows you to control animations across multiple components. It provides methods to start, stop, and manage animations.

```APIDOC
## animationControls Function

### Description
Creates an object to control animations across multiple components:

### Usage
```js
import { animationControls } from 'svelte-motion/animation/animation-controls';

const controls = animationControls();

// Mount the controls when your component mounts
onMount(controls.mount);

// Start an animation on all linked components
controls.start({
  x: 100,
  transition: { duration: 0.5 }
});

// Stop all animations
controls.stop();
```
```

--------------------------------

### Custom Drag Handler in Svelte

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/extending.md

Implement a custom drag handler by extending the UseDrag component. This example shows how to track drag history and calculate velocity.

```svelte
<!-- CustomDragHandler.svelte -->
<script>
  import { UseDrag } from 'svelte-motion/gestures/drag/use-drag';
  import { onMount } from 'svelte';
  
  export let visualElement;
  export let onDragStart = () => {};
  export let onDrag = () => {};
  export let onDragEnd = () => {};
  export let dragConstraints = false;
  
  let dragHistory = [];
  
  function handleDragStart(event, info) {
    dragHistory = [info.point];
    onDragStart(event, info);
  }
  
  function handleDrag(event, info) {
    dragHistory.push(info.point);
    onDrag(event, {...info, history: dragHistory});
  }
  
  function handleDragEnd(event, info) {
    const velocity = calculateAverageVelocity(dragHistory);
    onDragEnd(event, {...info, averageVelocity: velocity});
    dragHistory = [];
  }
  
  function calculateAverageVelocity(history) {
    // Implementation to calculate velocity based on history
    return { x: 0, y: 0 }; // Placeholder
  }
</script>

<UseDrag
  {visualElement}
  props={{
    drag: true,
    dragConstraints,
    onDragStart: handleDragStart,
    onDrag: handleDrag,
    onDragEnd: handleDragEnd
  }}
/>
```

--------------------------------

### Configuring Default Transitions with MotionConfig

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/components.md

Provide default animation settings, such as transition duration, to all descendant Motion components by wrapping them with MotionConfig.

```svelte
<script>
  import { MotionConfig, Motion } from 'svelte-motion';
</script>

<MotionConfig transition={{ duration: 0.5 }}>
  <Motion animate={{ x: 100 }}>
    <div>This will use the custom transition duration</div>
  </Motion>
</MotionConfig>
```

--------------------------------

### Import Context Providers

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/index.js.md

Import context providers like MotionConfigContext, PresenceContext, and SharedLayoutContext to access context within custom components.

```javascript
import { 
  MotionConfigContext, 
  PresenceContext, 
  SharedLayoutContext 
} from 'svelte-motion';

// Access context in custom components
const motionConfig = getContext(MotionConfigContext);
```

--------------------------------

### Track Element Scroll with useElementScroll

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/value.md

Use `useElementScroll` to get motion values that track the scroll position of a specific DOM element. Requires a Svelte reference to the element.

```js
import { useElementScroll } from 'svelte-motion/value/scroll/use-element-scroll';

// With a Svelte reference
let element;
const { scrollX, scrollY, scrollXProgress, scrollYProgress } = useElementScroll({ current: element });
```

--------------------------------

### Integration with Svelte

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/value.md

Demonstrates how motion values can be used with Svelte's reactive system.

```APIDOC
## Integration with Svelte

### Description
Motion values implement the Svelte store interface, making them compatible with Svelte's reactive system.

### Usage
```svelte
<script>
  import { motionValue } from 'svelte-motion/value';
  
  const x = motionValue(0);
</script>

<!-- Use with $ prefix for automatic subscription -->
<div style="transform: translateX({$x}px)">Animated content</div>

<!-- Or manually subscribe -->
<div style="transform: translateX({x.get()}px)">Animated content</div>
```
```

--------------------------------

### Create and Control a MotionValue

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/value.md

Instantiate a MotionValue to track state and velocity. Use `.set()` to animate to a new value and `.get()` to retrieve the current value.

```js
import { motionValue } from 'svelte-motion/value';

const x = motionValue(0);
x.set(100); // Animates to 100
x.get(); // Returns current value
x.getVelocity(); // Returns current velocity
```

--------------------------------

### Get Global Drag Lock

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/gestures.md

Retrieves a lock for a specific drag direction to ensure only one drag operation occurs globally. The returned function should be called to release the lock.

```js
import { 
  getGlobalLock,
  isDragActive
} from 'svelte-motion/gestures/drag/utils/lock';

// Get a lock for a drag direction
const lock = getGlobalLock("x");
if (lock) {
  // We have the lock, can start dragging
  // Later, release the lock
  lock();
}
```

--------------------------------

### Code Splitting with LazyMotion

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/extending.md

Use LazyMotion to import animation features on demand, improving initial load times. Ensure the features import path is correct.

```svelte
<LazyMotion features={() => import('svelte-motion/features/dom')}>\n  <m.div animate={{ x: 100 }}>\n    Content\n  </m.div>\n</LazyMotion>
```

--------------------------------

### addDomEvent Function for DOM Event Listeners

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/events.md

Manually attach a DOM event listener to an element and get a cleanup function. Remember to call the cleanup function to prevent memory leaks.

```javascript
import { addDomEvent } from 'svelte-motion/events/use-dom-event';

const element = document.querySelector('.my-element');
const cleanup = addDomEvent(element, 'click', (event) => {
  console.log('Element clicked');
});

// Later, when you want to remove the listener
cleanup();
```

--------------------------------

### AnimationControls Function for Multiple Components

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/animation.md

Create an `AnimationControls` object using `animationControls` to manage animations across multiple components. Remember to mount the controls when your component mounts and use `start` or `stop` to control animations.

```javascript
import { animationControls } from 'svelte-motion/animation/animation-controls';

const controls = animationControls();

// Mount the controls when your component mounts
onMount(controls.mount);

// Start an animation on all linked components
controls.start({
  x: 100,
  transition: { duration: 0.5 }
});

// Stop all animations
controls.stop();
```

--------------------------------

### Basic Usage with Motion Component

Source: https://github.com/michael-obele/svelte-motion/blob/master/README.md

Use the Motion component for standard HTML elements. Import Motion and apply it using the 'use:motion' directive.

```javascript
import { Motion } from 'svelte-motion'

<Motion let:motion><div use:motion/></Motion>
```

--------------------------------

### Animate with Spring Physics using useSpring

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/value.md

Apply spring physics to a motion value using `useSpring`. You can define stiffness and damping, or have it follow another motion value.

```js
import { useSpring } from 'svelte-motion/value/use-spring';

// Spring from initial value 0
const x = useSpring(0, { stiffness: 300, damping: 20 });
// Or spring to follow another motion value
const smoothX = useSpring(x, { stiffness: 100, damping: 30 });
```

--------------------------------

### Code-Splitting Animations with LazyMotion

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/components.md

Reduce bundle size by code-splitting animation features using LazyMotion and the 'm' component import. Ensure the required features are passed to LazyMotion.

```svelte
<script>
  import { LazyMotion, m } from 'svelte-motion';
  import { domAnimation } from 'svelte-motion/features';
</script>

<LazyMotion features={domAnimation}>
  <m.div animate={{ scale: 1.2 }}>
    This will animate
  </m.div>
</LazyMotion>
```

--------------------------------

### Browser Support Detection

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/events.md

Provides utility functions to detect browser support for pointer, touch, and mouse events, allowing for graceful degradation and fallback strategies.

```APIDOC
## Browser Support Detection Utilities

### Description
Utilities to detect browser support for different event types, enabling adaptive event handling strategies.

### Functions
- **supportsPointerEvents()**: Returns `true` if pointer events are supported, `false` otherwise.
- **supportsTouchEvents()**: Returns `true` if touch events are supported, `false` otherwise.
- **supportsMouseEvents()**: Returns `true` if mouse events are supported, `false` otherwise.

### Usage
```js
import { 
  supportsPointerEvents,
  supportsTouchEvents,
  supportsMouseEvents
} from 'svelte-motion/events/utils';

if (supportsPointerEvents()) {
  // Use pointer events
} else if (supportsTouchEvents()) {
  // Fall back to touch events
} else if (supportsMouseEvents()) {
  // Fall back to mouse events
}
```
```

--------------------------------

### HTML Component Rendering with UseHTMLProps

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/render.md

Processes props for HTML elements and generates appropriate style values for rendering. Use this to apply motion props to standard HTML elements.

```svelte
<UseHTMLProps props={motionProps} visualState={visualState} let:visualProps>
  <div {...visualProps}>Content</div>
</UseHTMLProps>
```

--------------------------------

### Apply Custom Bounce Transition

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/extending.md

Apply a custom 'bounce' transition to a Motion component. Ensure the transition definition is imported correctly.

```svelte
<script>
  import { Motion } from 'svelte-motion';
  import { bounce } from './myTransitions.js';
</script>

<Motion 
  animate={{ scale: 1.2 }}
  transition={bounce}
>
  <div>Custom bounce animation</div>
</Motion>
```

--------------------------------

### Import and Use Motion Components

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/index.js.md

Import and use Motion and MotionDiv components for animating elements. Motion can be used with any Svelte element via the `use:motion` action.

```javascript
import { Motion, MotionDiv } from 'svelte-motion';

// Use Motion with any element
<Motion animate={{ scale: 1.2 }} let:motion let:props>
  <div use:motion {...props}>Animated content</div>
</Motion>

// Or use MotionDiv for convenience
<MotionDiv animate={{ scale: 1.2 }}>
  Animated content
</MotionDiv>
```

--------------------------------

### Define Custom Spring and Tween Transitions

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/extending.md

Define custom transition objects for 'spring' and 'tween' animations. These can be imported and used with the Motion component.

```javascript
// myTransitions.js
export const bounce = {
  type: "spring",
  stiffness: 300,
  damping: 10,
  restDelta: 0.5,
  restSpeed: 10
};

export const slowFade = {
  type: "tween",
  duration: 1.5,
  ease: [0.43, 0.13, 0.23, 0.96]
};
```

--------------------------------

### UseFocusGesture for Focus Interactions

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/gestures.md

Handles focus gestures, enabling visual feedback like `whileFocus` when the element gains or loses focus. Requires a visualElement reference.

```svelte
<script>
  import { UseFocusGesture } from 'svelte-motion/gestures/use-focus-gesture';
  
  let visualElement;
</script>

<UseFocusGesture
  props={{
    whileFocus: true
  }}
  {visualElement}
/>
```

--------------------------------

### Creating a Custom Motion Component

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/motion.md

Use the createMotionComponent factory function to build custom motion components with specific configurations, features, and element types.

```javascript
import { createMotionComponent } from 'svelte-motion/motion';

const MyMotionComponent = createMotionComponent({
  preloadedFeatures,
  createVisualElement,
  Component: 'div'
});
```

--------------------------------

### UsePointerEvent Component

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/events.md

A specialized Svelte component for handling pointer events consistently across mouse, touch, and pen input devices. It simplifies cross-device event management and includes automatic cleanup.

```APIDOC
## UsePointerEvent Component

### Description
A specialized component for handling pointer events consistently across mouse, touch, and pen input devices. It simplifies cross-device event management and automatically handles cleanup.

### Usage
```svelte
<script>
  import { UsePointerEvent } from 'svelte-motion/events/use-pointer-event';
  
  let ref = { current: null };
  
  function handlePointerDown(event, info) {
    console.log('Pointer down at', info.point.x, info.point.y);
  }
</script>

<div bind:this={ref.current}></div>

<UsePointerEvent
  ref={ref}
  eventName="pointerdown"
  handler={handlePointerDown}
/>
```

### Props
- **ref** (object) - Required - An object with a `current` property referencing the DOM element.
- **eventName** (string) - Required - The name of the pointer event to listen for (e.g., 'pointerdown', 'pointermove').
- **handler** (function) - Required - The callback function to execute. Receives the raw event and an `info` object.
- **options** (object) - Optional - Event listener options.
```

--------------------------------

### Animate Presence with Motion

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/README.md

Utilizes AnimatePresence and Motion components to animate elements entering and exiting the DOM. Use 'initial', 'animate', and 'exit' props for opacity transitions. Requires a conditional rendering block.

```svelte
<script>
  import { Motion, AnimatePresence } from 'svelte-motion';
  let isVisible = true;
</script>

<button on:click={() => isVisible = !isVisible}>
  Toggle
</button>

<AnimatePresence>
  {#if isVisible}
    <Motion
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <div>I will animate in and out</div>
    </Motion>
  {/if}
</AnimatePresence>
```

--------------------------------

### Use Presence Utilities

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/index.js.md

Import usePresence and useIsPresent to check if a component is currently rendered within an AnimatePresence component.

```javascript
import { usePresence, useIsPresent } from 'svelte-motion';

// Check if component is present in AnimatePresence
const isPresent = useIsPresent();
const [isPresent, safeToRemove] = usePresence();
```

--------------------------------

### UsePointerEvent Component for Pointer Events

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/events.md

Handle pointer events (mouse, touch, pen) consistently. The handler receives the raw event and an 'info' object with standardized point data. Cleanup is automatic.

```svelte
<script>
  import { UsePointerEvent } from 'svelte-motion/events/use-pointer-event';
  
  let ref = { current: null };
  
  function handlePointerDown(event, info) {
    console.log('Pointer down at', info.point.x, info.point.y);
  }
</script>

<div bind:this={ref.current}></div>

<UsePointerEvent
  ref={ref}
  eventName="pointerdown"
  handler={handlePointerDown}
/>
```

--------------------------------

### useMotionTemplate Hook

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/value.md

Combines multiple motion values into a single string using a template literal.

```APIDOC
## useMotionTemplate

### Description
Combine multiple motion values into a single string using a template literal.

### Usage
```js
import { useMotionValue } from 'svelte-motion/value/use-motion-value';
import { useMotionTemplate } from 'svelte-motion/value/use-motion-template';

const x = useMotionValue(0);
const y = useMotionValue(0);
const boxShadow = useMotionTemplate`${x}px ${y}px 10px rgba(0,0,0,0.3)`;
```
```

--------------------------------

### Use the Custom Animated Button Component

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/extending.md

Integrate the custom `MotionButton` component into your application. Configure its animation properties and event handlers.

```svelte
<script>
  import MotionButton from './MotionButton.svelte';
  
  function handleClick() {
    console.log('Button clicked');
  }
</script>

<MotionButton 
  animate={{ y: 0 }}
  whileHover={{ y: -5, scale: 1.1 }}
  on:click={handleClick}
>
  Animated Button
</MotionButton>
```

--------------------------------

### useVelocity Hook

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/value.md

Creates a motion value that tracks the velocity of another motion value.

```APIDOC
## useVelocity

### Description
Create a motion value that tracks the velocity of another motion value.

### Usage
```js
import { useMotionValue } from 'svelte-motion/value/use-motion-value';
import { useVelocity } from 'svelte-motion/value/use-velocity';

const x = useMotionValue(0);
const xVelocity = useVelocity(x);
```
```

--------------------------------

### Visual Element Flow

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/implementation.md

Illustrates the data flow from a DOM element through the Visual Element abstraction to Motion Values and animation.

```text
DOM Element → Visual Element → Motion Values → Animation
```

--------------------------------

### Basic Animation with Motion.svelte

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/motion.md

Use the Motion component to animate a div. It manages visual elements and animation states, providing reactive motion props.

```svelte
<Motion animate={{ scale: 1.2 }} let:motion let:props>
  <div use:motion {...props}>Animated content</div>
</Motion>
```

--------------------------------

### useMotionValue Hook

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/value.md

A hook to create a motion value with an initial state.

```APIDOC
## useMotionValue

### Description
Create a motion value with an initial state.

### Usage
```js
import { useMotionValue } from 'svelte-motion/value/use-motion-value';

const opacity = useMotionValue(1);
```
```

--------------------------------

### Cycle Through Values with useCycle

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/utils.md

A hook for creating a cycling state that rotates through a predefined list of values. Useful for animations that loop through states.

```javascript
import { useCycle } from 'svelte-motion/utils/use-cycle';

// Create a cycling state that rotates through 0, 90, 180, 270 degrees
const rotation = useCycle(0, 90, 180, 270);
```

--------------------------------

### Combine MotionValues with useMotionTemplate

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/value.md

Use `useMotionTemplate` to create a string output by interpolating multiple motion values within a template literal. This is useful for CSS properties like `boxShadow`.

```js
import { useMotionValue } from 'svelte-motion/value/use-motion-value';
import { useMotionTemplate } from 'svelte-motion/value/use-motion-template';

const x = useMotionValue(0);
const y = useMotionValue(0);
const boxShadow = useMotionTemplate`${x}px ${y}px 10px rgba(0,0,0,0.3)`;
```

--------------------------------

### SVG Component Rendering with UseSVGProps

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/render.md

Processes props for SVG elements and generates appropriate attribute values for rendering. Use this for applying motion props to SVG elements.

```svelte
<UseSVGProps props={motionProps} visualState={visualState} let:visualProps>
  <circle {...visualProps} />
</UseSVGProps>
```

--------------------------------

### LazyMotion Component Usage

Source: https://github.com/michael-obele/svelte-motion/blob/master/src/components/LazyMotion/DOCUMENTATION.md

Wrap parts of your application with LazyMotion and provide a dynamic import function for features like domMax. This ensures animation and gesture code is only loaded when the component mounts.

```svelte
<script>
	import { LazyMotion, m } from 'svelte-motion';

	// Define a function that dynamically imports the desired feature set
	// (domMax includes all features suitable for DOM animation)
	const loadFeatures = () => import('svelte-motion').then(res => res.domMax);
</script>

<LazyMotion features={loadFeatures}>
	<m.div animate={{ scale: 1.5 }} />
	<!-- Other motion components -->
</LazyMotion>
```

--------------------------------

### Track Viewport Scroll with useViewportScroll

Source: https://github.com/michael-obele/svelte-motion/blob/master/docs/value.md

Obtain motion values that automatically update with the viewport's scroll position using `useViewportScroll`. This provides `scrollX`, `scrollY`, `scrollXProgress`, and `scrollYProgress`.

```js
import { useViewportScroll } from 'svelte-motion/value/scroll/use-viewport-scroll';

const { scrollX, scrollY, scrollXProgress, scrollYProgress } = useViewportScroll();
```