docs: add gestures

.docs/composables/useNavigationMotion.ts

@@ -39,13 +39,6 @@ function _useNavigation() {
             to: '/motion/examples',
             active: route.path.startsWith('/motion/examples'),
           },
-          {
-            label: 'Community',
-            description: 'Find answers and support from the community.',
-            icon: 'i-ph-chats-teardrop-duotone',
-            to: '/motion/community',
-            active: route.path.startsWith('/motion/community'),
-          },
         ],
       },
       {

.docs/content/motion/1.getting-started/_dir.yml

@@ -1,3 +1,3 @@
 title: Getting Started
 titleTemplate: '%s · Get Started with Vue3 and Nuxt3'
-icon: i-ph-compass-tool-light
+icon: i-ph-rocket-launch-duotone

.docs/content/motion/2.guide/1.animation/1.simple-animations.md

@@ -3,10 +3,12 @@ title: 'Simple animations'
 description: ''
 ---
 
+## Animation
+
 Most animations will be performed with the `motion` component and the animate prop.
 
 ```html
-<Motion animate={{ x: 100 }} />
+<Motion :animate="{x: 100}" />
 ```
 
 When any value in `animate` changes, the component will automatically animate to the updated target.
@@ -15,3 +17,79 @@ When any value in `animate` changes, the component will automatically animate to
   src="https://stackblitz.com/edit/vitejs-vite-wmhgda?embed=1&file=src%2FDemo.vue&hideExplorer=1&hideNavigation=1&view=preview"
   style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 ></iframe>
+
+## Enter animations
+
+When a `motion` component is first created, it'll automatically animate to the values in `animate` if they're different from those defined in `style` or `initial`. You can set the initial prop to `false` to disable enter animations.
+
+```html
+<Motion :animate="{ x: 100 }" :initial="false" />
+```
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-aqkuft?embed=1&file=src%2Ftemplate%2FRefresh.vue&hideExplorer=1&hideNavigation=1&view=preview"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+></iframe>
+
+## Exit animations
+
+Oku Motion provides the `Presence component` to keep components in the DOM while they perform on exit animation.
+
+```html
+<Presence>
+  <Motion
+    v-if="refresh"
+    class="box"
+    :initial="{ opacity: 0, scale: 1 }"
+    :animate="{ opacity: 1, scale: 1.2 }"
+    :exit="{ opacity: 0, x: '20px' }"
+  />
+</Presence>
+```
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-gphfvx?embed=1&file=src%2FApp.vue&hideExplorer=1&hideNavigation=1&view=preview"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+></iframe>
+
+## Keyframes
+
+Values in `animate` can also be set as a series of keyframes. This will animate through each value in sequence.
+
+```html
+<Motion
+  :animate="{ x: [0, 100, 0] }"
+/>
+```
+
+<!-- <iframe
+  src="https://stackblitz.com/edit/vitejs-vite-bqgiwz?embed=1&file=src%2FDemo.vue&hideExplorer=1&hideNavigation=1&view=preview"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+></iframe> -->
+
+We can use the current value as the initial keyframe by passing a **wildcard keyframe**, `null`.
+
+```html
+<Motion
+  :animate="{ x: [null, 100, 0] }"
+/>
+```
+
+This way, if a keyframes animation starts while the value is currently animating, the transition will be more natural. It also reduces duplication in our code.
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-qwnt8k?embed=1&file=src%2FDemo.vue&hideExplorer=1&hideNavigation=1&view=preview"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+></iframe>
+
+Each keyframe will be spaced evenly throughout the animaton. You can override this by setting the times option via transition.
+
+times is an array of the same length as the keyframes array, with numbers between 0 and 1 definining where in the animation each keyframe should be hit.
+
+```html
+<Motion
+    class="box"
+    :animate="{ scale: [null, 1.5, 0.8] }"
+    :transition="{ duration: 3, times: [0, 0.2, 1] }"
+  />
+```

.docs/content/motion/2.guide/1.animation/2.transition.md

@@ -0,0 +1,115 @@
+---
+title: 'Transition'
+description: 'A transition defines how values animate from one state to another.'
+---
+
+A `transition` defines the type of animation used when animating between two values.
+
+```html
+<Motion
+    :animate="{ opacity: 1, scale: 1.2 }"
+    :transition="{ delay: 1 }"
+  />
+```
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-d1abbc?embed=1&file=src%2FDemo.vue&view=preview"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+></iframe>
+
+## Value-specific transitions
+
+A different set of transition setting can be defined for each specific value.
+
+```html
+<Motion
+    class="box"
+    :initial="{ opacity: 0, scale: 0.5 }"
+    :animate="{ opacity: 1, scale: [1, 1.5, 1] }"
+    :transition="{
+      duration: 0.5,
+      ease: [0, 0.71, 0.2, 1.01],
+    }"
+  />
+```
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-jtvxkz?embed=1&file=src%2FDemo.vue&view=preview"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+></iframe>
+
+## Orchestration
+
+### delay
+
+- type: `number`
+
+Delay the animation by this duration (in seconds). Defaults to 0.
+
+```ts
+const transition = {
+  delay: 0.2
+}
+```
+
+By setting `delay` to a negative value, the animation will start that long into the animation. For instance to start 1 second in, `delay` can be set to `-1`.
+
+### repeat
+
+- type: `number`
+
+The number of times to repeat the transition. Set to `Infinity` for perpetual repeating.
+
+Without setting `repeatType`, this will loop the animation.
+
+```html
+<Motion
+  :animate="{ rotate: 180 }"
+  :transition="{ repeat: 'Infinity', duration: 2 }"
+/>
+```
+
+### repeatType
+
+- type: `"loop" | "reverse" | "mirror"`
+
+How to repeat the animation. This can be either:
+
+- `loop`: Repeats the animation from the start
+- `reverse`: Alternates between forward and backwards playback
+- `mirror`: Switches from and to alternately
+
+```html
+<Motion
+  :animate="{ rotate: 180 }"
+  :transition="{
+    repeat: 1,
+    repeatType: 'reverse',
+    duration: 2
+  }"
+/>
+```
+
+### repeatDelay
+
+- type: `number`
+
+When repeating an animation, `repeatDelay` will set the duration of the time to wait, in seconds, between each repetition.
+
+```html
+<Motion
+  :animate="{ rotate: 180 }"
+  :transition="{ repeat: 'Infinity', repeatDelay: 1 }"
+/>
+```
+
+## Miscellaneous
+
+### TargetAndTransition
+
+An object that specifies values to animate to. Each value may be set either as a single value, or an array of values.
+
+It may also option contain these properties:
+
+- `transition`: Specifies transitions for all or individual values.
+- `transitionEnd`: Specifies values to set when the animation finishes.

.docs/content/motion/2.guide/1.animation/3.Gestures.md

@@ -0,0 +1,21 @@
+---
+title: 'Gestures'
+description: 'A powerful gesture recognition system for the browser.'
+---
+
+Oku Motion extends the basic set of event listeners provided by Vue3 with a simple yet powerful set of UI gesture recognisers.
+
+It currently has support for hover, press and more. Each gesture has a series of event listeners that you can attach to your `motion` component.
+
+## Animation helpers
+
+`motion` components provide multiple gesture animation props: `whileHover`, `whileTap`, `whileFocus`, `whileDrag` and `whileInView`. These can define animation targets to temporarily animate to while a gesture is active.
+
+## Hover
+
+The hover gesture detects when a pointer hovers a component.
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-qwnt8k?embed=1&file=src%2FDemo.vue&hideExplorer=1&hideNavigation=1&view=preview"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+></iframe>

.docs/content/motion/2.guide/2.components/_dir.yml

@@ -0,0 +1,3 @@
+title: Components
+icon: i-ph-brackets-curly-duotone
+# navigation: false