docs: fix useSpring example and rewrite docs (#181)

Co-authored-by: Tim Pulver <[email protected]>

Author: timpulver

docs/content/3.api/2.use-spring.md

@@ -1,30 +1,34 @@
 # useSpring
 
-useSpring is a simpler hook than [useMotion](/api/use-motion).
+useSpring is a simpler hook than [useMotion](/api/use-motion) and makes it possible to animate HTML or SVG Elements in your Vue components using spring animations.
 
-It has been implemented in order for you to implement Spring animations in your apps, without the pain.
+Spring animations often feel more natural and fluid compared to linear animations, as they are based on the physics of a spring in the real world.
+
+Springs maintain continuity for both static cases and cases with an initial velocity. This allows spring animations to adapt smoothly to user interactions like gestures.
 
 useSpring can be bound to a HTML or SVG element, or to a simple object.
 
 It skips the [Variants](/features/variants) system, allowing it to be as performant as using Popmotion natively, but with a nicer **API** to play with Vue refs.
 
 ## Parameters
 
-### `target`
+### `values`
 
-Target can be an element (**SVG** / **HTML**), or an object.
+The values argument expects a `motionProperties` object, which can be created using the [useMotionProperties](/api/use-motion-properties) function.
 
 ### `spring`
 
-The spring argument takes a [Spring definition](https://popmotion.io/#quick-start-animation-animate-spring-options) from **Popmotion**.
+Spring animations can be configured in multiple ways, using spring options. The most intuitive way is using `duration` and `bounce`. Alternatively, you can use `stiffness`, `mass`, and `damping` to configure a spring animation.
 
-It is optional as a default Spring will be applied if you do not specify it.
+Under the hood, `useSpring` uses **Popmotion**. See [Spring options in Popmotion](https://popmotion.io/#quick-start-animation-animate-spring-options) for a full list of spring options.
+
+Passing a `string` argument is optional. A default spring will be applied if you do not specify it.
 
 ## Exposed
 
 ### `values`
 
-Values are an object representing the current state from your Spring animations.
+Values are an object representing the current state from your spring animations.
 
 ### `set`
 
@@ -36,27 +40,54 @@ Stop is a function allowing you to stop all the ongoing animations for the sprin
 
 ## Example
 
-```typescript
-const target = ref<HTMLElement>()
+In the example below, click the green box to animate it, or press the escape key to stop the animation.
+
+```html
+<template>
+  <div class="container" tabindex="0" @keyup.esc="stop()">
+    <div ref="box" class="box" @click="animate">Click me</div>
+  </div>
+</template>
 
-const { set, values, stop } = useSpring(target, {
-  damping: 50,
-  stiffness: 220,
+<script setup>
+import { ref } from 'vue'
+import { useSpring, useMotionProperties } from '@vueuse/motion'
+
+const box = ref(null)
+
+const { motionProperties } = useMotionProperties(box, {
+  x: 0,
+  y: 0,
 })
 
-const onClick = () => {
-  set({
-    scale: 2,
-  })
-}
+const { set, stop } = useSpring(motionProperties, {
+    duration: 1000,
+    bounce: 0.0,
+})
 
-const onClickOut = () => {
+function animate() {
   set({
-    scale: 1,
+    x: Math.random() * 400,
+    y: Math.random() * 400,
   })
 }
-
-const stopTransitions = () => {
-  stop()
+</script>
+  
+<style scoped>
+.container {
+  width: 500px;
+  height: 500px;
+  outline: 2px solid #41B883;
+}
+.box {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #41B883;
+  color: white;
 }
+</style>
+
 ```