diff --git a/docs/app.config.ts b/docs/app.config.ts
index 7ca3ae0..25a2d01 100644
--- a/docs/app.config.ts
+++ b/docs/app.config.ts
@@ -110,20 +110,21 @@ export default defineAppConfig({
       },
     },
     ul: {
-      initial: { x: 100, opacity: 0 },
-      visibleOnce: { x: 0, opacity: 1 },
+      initial: { x: 100, y: 100, opacity: 0 },
+      visibleOnce: { x: 0, y: 0, opacity: 1 },
     },
     li: {
-      initial: { x: 100, opacity: 0 },
+      initial: { x: 40, y: 20, opacity: 0 },
       hovered: {
         x: 10,
         opacity: 1,
-        transition: { mass: 0.5, damping: 5, delay: 0 },
+        transition: { mass: 1, delay: 0 },
       },
       visibleOnce: {
         x: 0,
+        y: 0,
         opacity: 1,
-        transition: { mass: 0.5, damping: 5 },
+        transition: { mass: 1 },
       },
     },
     headers: {
diff --git a/docs/components/content/ProseOl.ts b/docs/components/content/ProseOl.ts
new file mode 100644
index 0000000..74e4b14
--- /dev/null
+++ b/docs/components/content/ProseOl.ts
@@ -0,0 +1,34 @@
+export default defineComponent({
+  setup() {
+    const MotionComponent = resolveComponent('Motion')
+    const slots = useSlots()
+    const appConfig = useAppConfig()
+
+    return () => {
+      const nodes: VNode[] = slots.default?.() || []
+
+      return h(
+        'ol',
+        {
+          ...appConfig.motions.ul,
+        },
+        nodes.map((node, i) => {
+          node.props = {
+            is: 'li',
+            ...appConfig.motions.li,
+            visibleOnce: {
+              ...appConfig.motions.li.visibleOnce,
+              transition: {
+                ...appConfig.motions.li.visibleOnce.transition,
+                delay: i * 50,
+              },
+            },
+          }
+
+          // @ts-expect-error type conflict but seems to work fine
+          return h(MotionComponent, { ...node.props }, node.children)
+        }),
+      )
+    }
+  },
+})