docs: update docs

docs/.vitepress/theme/config/docs.ts

@@ -63,5 +63,45 @@ export const docsConfig: DocsConfig = {
         },
       ],
     },
+    {
+      title: 'Motion Values',
+      items: [
+        {
+          title: 'Overview',
+          href: '/docs/motion-values/overview',
+          items: [],
+        },
+        {
+          title: 'useMotionValueEvent',
+          href: '/docs/motion-values/use-motion-value-event',
+          items: [],
+        },
+        {
+          title: 'useMotionTemplate',
+          href: '/docs/motion-values/use-motion-template',
+          items: [],
+        },
+        {
+          title: 'useScroll',
+          href: '/docs/motion-values/use-scroll',
+          items: [],
+        },
+        {
+          title: 'useSpring',
+          href: '/docs/motion-values/use-spring',
+          items: [],
+        },
+        {
+          title: 'useTime',
+          href: '/docs/motion-values/use-time',
+          items: [],
+        },
+        {
+          title: 'useTransform',
+          href: '/docs/motion-values/use-transform',
+          items: [],
+        },
+      ],
+    },
   ],
 }

docs/.vitepress/theme/config/site.ts

@@ -10,6 +10,6 @@ export const siteConfig = {
 
 export const announcementConfig = {
   icon: '✨',
-  title: 'New',
+  title: 'New v0.2.0',
   link: '/docs/introduction.html',
 }

docs/.vitepress/theme/styles/shiki.css

@@ -1,5 +1,5 @@
 :root {
-  --shiki-foreground: #FFF8;
+  /* --shiki-foreground: #FFF8;
   --shiki-color-background: #ffffff;
   --shiki-token-constant: #ffffff;
   --shiki-token-string: #ffffff88;
@@ -9,5 +9,5 @@
   --shiki-token-function: #ffffff;
   --shiki-token-string-expression: #ebebeb;
   --shiki-token-punctuation: #ffffff;
-  --shiki-token-link: #EE0000;
-}
+  --shiki-token-link: #EE0000; */
+}

docs/.vitepress/theme/styles/vp-doc.css

@@ -575,4 +575,4 @@
 
 .line-numbers-mode pre code .line {
   padding-left: 3rem !important;
-}
+}

docs/src/content/docs/motion-values/overview.md

@@ -0,0 +1,149 @@
+---
+title: Motion values overview
+description: Motion values track the state and velocity of animated values.They are composable, signal-like values that are performant because Motion can render them with its optimised DOM renderer.Usually, these are created automatically by motion components. But for advanced use cases, it's possible to create them manually.
+---
+
+## Import
+
+```vue
+<script setup lang="ts">
+import { Motion, motionValue } from 'motion-v'
+
+const x = motionValue(0)
+</script>
+
+<template>
+  <Motion :style="{ x }" />
+</template>
+```
+
+By manually creating motion values you can:
+
+- Set and get their state.
+
+- Pass to multiple components to synchronise motion across them.
+
+- Chain MotionValues via the useTransform hook.
+
+- Update visual properties without triggering Vue's render cycle.
+
+- Subscribe to updates.
+
+```vue
+<script setup lang="ts">
+import { motionValue, useTransform } from 'motion-v'
+
+const x = motionValue(0)
+const opacity = useTransform(
+  x,
+  [-200, 0, 200],
+  [0, 1, 0]
+)
+</script>
+
+// Will change opacity when x is changed
+<template>
+  <Motion :style="{ x, opacity }" />
+</template>
+```
+
+## Usage
+
+ Motion values can be created with the `motionValue` function. The string or number passed to `motionValue` will act as its initial state.
+
+```
+import { motionValue } from "motion-v"
+
+const x = motionValue(0)
+```
+
+Motion values can be passed to a motion component via style:
+
+```vue
+<script setup lang="ts">
+import { motionValue } from 'motion-v'
+
+const x = motionValue(0)
+</script>
+
+<template>
+  <Motion :style="{ x }" />
+</template>
+```
+
+Or for SVG attributes, via the attribute prop itself:
+
+```vue
+<script setup lang="ts">
+import { motionValue } from 'motion-v'
+
+const cx = motionValue(0)
+</script>
+
+<template>
+  <Motion
+    as="circle"
+    :cx="cx"
+  />
+</template>
+```
+
+It's possible to pass the same motion value to multiple components.
+
+Motion values can be updated with the `set` method:
+
+```ts
+x.set(100)
+```
+
+Changes to the motion value will update the DOM without triggering a Vue re-render. Motion values can be updated multiple times but renders will be batched to the next animation frame.
+
+A motion value can hold any string or number. We can read it with the `get` method:
+
+```ts
+x.get() // 100
+```
+
+Motion values containing a number can return a velocity via the `getVelocity` method. This returns the velocity as calculated per second to account for variations in frame rate across devices.
+
+```ts
+const xVelocity = x.getVelocity()
+```
+## Events
+
+Listeners can be added to motion values via the `on` method or the `useMotionValueEvent` hook.
+
+```ts
+useMotionValueEvent(x, 'change', latest => console.log(latest))
+```
+
+Available events are "change", "animationStart", "animationComplete" "animationCancel".
+
+## Composition
+
+Beyond `motionValue`, Motion provides a number of hooks for creating and composing motion values, like `useSpring` and `useTransform`.
+
+For example, with `useTransform` we can take the latest state of one or more motion values and create a new motion value with the result.
+
+```ts
+const y = useTransform(() => x.get() * 2)
+```
+
+useSpring can make a motion value that's attached to another via a spring.
+
+```ts
+const dragX = motionValue(0)
+const dragY = motionValue(0)
+const x = useSpring(dragX)
+const y = useSpring(dragY)
+```
+<iframe src="https://stackblitz.com/edit/vitejs-vite-v8ot1e?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="motion-use-spring"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads allow-pointer-lock"
+   ></iframe>
+
+## API
+
+https://motion.dev/docs/react-motion-value#api

docs/src/content/docs/motion-values/use-motion-template.md

@@ -0,0 +1,48 @@
+---
+title: useMotionTemplate
+---
+
+`useMotionTemplate` creates a new motion value from a string template containing other motion values.
+
+```
+const x =  motionValue(100)
+const transform = useMotionTemplate`transform(${x}px)`
+```
+
+Whenever a motion value within the string template updates, the returned motion value will update with the latest value.
+
+## Usage
+
+```
+import { useMotionTemplate } from "motion-v"
+
+```
+
+`useMotionTemplate` is a "tagged template", so rather than being called like a normal function, it's called as a string template:
+
+```vue
+useMotionValue``
+```
+This string template can accept both text and other motion values:
+
+```
+const blur = motionValue(10)
+const saturate = motionValue(50)
+const filter = useMotionTemplate`blur(${blur}px) saturate(${saturate}%)`
+
+// template
+ <Motion :style="{ filter }" />
+```
+
+The latest value of the returned motion value will be the string template with each provided motion value replaced with its latest value.
+
+```
+const shadowX = useSpring(0)
+const shadowY = motionValue(0)
+
+const filter = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
+
+// template
+ <Motion :style="{ filter }" />
+
+```

docs/src/content/docs/motion-values/use-motion-value-event.md

@@ -0,0 +1,54 @@
+---
+title: useMotionValueEvent
+---
+
+`useMotionValueEvent` manages a motion value event handler throughout the lifecycle of a Vue component.
+
+```
+<script setup lang="ts">
+import { motionValue, useMotionValueEvent } from 'motion-v'
+
+const x = motionValue(0)
+
+useMotionValueEvent(x, "animationStart", () => {
+  console.log("animation started on x")
+})
+
+useMotionValueEvent(x, "change", (latest) => {
+  console.log("x changed to", latest)
+})
+</script>
+
+<template>
+  <Motion :style="{ x }" />
+</template>
+```
+
+When the component is unmounted, event handlers will be safely cleaned up.
+
+## Usage
+
+```
+import { useMotionValueEvent } from "motion-v"
+
+```
+
+To add an event listener to a motion value, provide the value, event name and callback:
+
+```vue
+<script setup lang="ts">
+const color = useMotionValue('#00f')
+
+useMotionValueEvent(color, 'change', (latest) => {
+  console.log(latest)
+})
+</script>
+```
+> Available events are:
+
+- change
+- animationStart
+- animationComplete
+- animationCancel
+
+`change` events are provided the latest value of the motion value.

docs/src/content/docs/motion-values/use-scroll.md

@@ -0,0 +1,50 @@
+---
+title: useScroll
+---
+
+`useScroll` is used to create scroll-linked animations, like progress indicators and parallax effects.
+
+```
+const { scrollYProgress } = useScroll()
+
+<Motion :style="{ scaleX: scrollYProgress }" />
+
+```
+
+## Usage
+
+```
+import { useScroll } from "motion-v"
+
+```
+`useScroll` returns four motion values:
+
+- `scrollX`/`Y`: The absolute scroll position, in pixels.
+- `scrollXProgress`/`YProgress`: The scroll position between the defined offsets, as a value between 0 and 1.
+
+## Page scroll
+
+By default, `useScroll` tracks the page scroll.
+
+```
+const { scrollY } = useScroll()
+
+useMotionValueEvent(scrollY, "change", (latest) => {
+  console.log("Page scroll: ", latest)
+})
+```
+
+For example, we could show a page scroll indicator by passing `scrollYProgress` straight to the `scaleX` style of a progress bar.
+
+<iframe src="https://stackblitz.com/edit/vitejs-vite-eseump?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="motion-use-spring"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads allow-pointer-lock"
+   ></iframe>
+
+As `useScroll` returns motion values, we can compose this scroll info with other motion value hooks like `useTransform` and `useSpring`:
+
+## for more
+
+[motion-dev docs](https://motion.dev/docs/react-use-scroll)