diff --git a/playground/app.vue b/playground/app.vue
index a6a9736..b91ad38 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { vSplitAnimate } from "../src/runtime/directives";
-import { ref } from "#imports";
+import { vSplitAnimate } from "../src/runtime/composables/directives";
+import { ref, useBakedTransition } from "#imports";
 import { promiseTimeout } from "@vueuse/core";
-import { useBakedTransition } from "../src/runtime/composables/transitions";
 
 const stingEffectContainer = ref<HTMLDivElement | null>(null);
 
@@ -92,12 +91,15 @@ const onAfterEnter = async () => {
     >
       <h1
         v-split-animate="{
-          splitBy: 'lines',
-          animationOptions: { translate: true },
-          splitOptions: {
-            wrapping: {
-              select: 'lines',
-              wrapClass: 'inline-block overflow-hidden',
+          baked: true,
+          options: {
+            splitBy: 'lines',
+            animationOptions: { translate: true },
+            splitOptions: {
+              wrapping: {
+                select: 'lines',
+                wrapClass: 'inline-block overflow-hidden',
+              },
             },
           },
         }"
diff --git a/src/runtime/composables/README.md b/src/runtime/composables/README.md
index e69de29..1155c9a 100644
--- a/src/runtime/composables/README.md
+++ b/src/runtime/composables/README.md
@@ -0,0 +1,26 @@
+# Composables
+
+## Low-level
+
+- [`useGsap`](./use-gsap): Exposes [gsap][gsap-href] functions. This is internally used in all the other animation composables.
+- [`useLocomotive`](./use-locomotive): Exposes [Locomotive Scroll][locomotive-href] for smooth scroll and parallax effects. Use `<SmoothScroll />` for CSS styles.
+- [`useConstructTransition`](./transitions): Used for creating transitions.
+
+## Mid-level
+
+- [`useAnimateOnScroll`](./use-animate-on-scroll)
+- [`useSplitTextAnimation`](./use-split-text-animation)
+
+## High-level
+
+- [**Baked** animations](./baked): Define stackable, premium animations. All mid-level composables have a baked version.
+  - `useBakedAnimation`: Exposes a `fromTo` tween with baked settings.
+  - `useBakedAnimateOnScroll`: Runs baked animations on scroll. Scroll settings are automatically determined if not explicitly set.
+  - `useBakedSplitTextAnimation`: Runs `useSplitTextAnimation` with baked presets.
+- [Transitions](./transitions): Composables for kickass transitions that can be used for anything.
+
+  - `useBendyWendy`
+  - `useOffset`
+
+[gsap-href]: https://gsap.com/
+[locomotive-href]: https://github.com/locomotivemtl/locomotive-scroll/tree/v5-beta
diff --git a/src/runtime/composables/baked/README.md b/src/runtime/composables/baked/README.md
index c12690a..6d85bea 100644
--- a/src/runtime/composables/baked/README.md
+++ b/src/runtime/composables/baked/README.md
@@ -1,22 +1,12 @@
 # 'Baked' animations
 
-This is a suite of composables to use **opinionated**, **premium** animations with just adding keys to them.
+This is a suite of utilities to use **opinionated**, **premium** animations with just adding keys to them.
 
-## Directory structure
+## Preset animations
 
-```
-baked/
-├─ animate.ts
-├─ index.ts
-├─ on-scroll.ts
-├─ split-text.ts
-├─ types.ts
-├─ utils.ts
-```
-
-- `animate.ts` - exports `useBakedAnimation`. This will allow you to animate any element with the `fromTo` function from `useGsap`.
-- `index.ts` - exports all the composables.
-- `on-scroll.ts` - [`useAnimateOnScroll`](../useAnimateOnScroll.ts) but with the baked animation options.
-- `split-text.ts` - [`useSplitTextAnimation`](../useSplitTextAnimation.ts) but with the baked animation options.
-- `types.ts` - common types used by composables
-- `utils.ts` - common utility functions used by composables
+- Opacity
+- Translate
+- Skew
+- Scale
+- Rotate
+- Blur
diff --git a/src/runtime/composables/baked/directive.ts b/src/runtime/composables/baked/directive.ts
new file mode 100644
index 0000000..30a9fcf
--- /dev/null
+++ b/src/runtime/composables/baked/directive.ts
@@ -0,0 +1,21 @@
+import { directiveHooks } from "@vueuse/core";
+import type { ObjectDirective } from "nuxt/dist/app/compat/capi";
+
+export type DirectiveOptions<O, BO> =
+  | { baked: true; options: BO }
+  | { baked?: false; options: O };
+
+export const defineDirective = <O, BO>({
+  fn,
+  bakedFn,
+}: {
+  fn: (el: HTMLElement, options: O) => void;
+  bakedFn: (el: HTMLElement, options: BO) => void;
+}): ObjectDirective<HTMLElement, DirectiveOptions<O, BO>> => {
+  return {
+    [directiveHooks.mounted]: (el, binding) => {
+      if (!binding.value?.baked) return fn(el, binding.value.options);
+      bakedFn(el, binding.value.options);
+    },
+  };
+};
diff --git a/src/runtime/composables/baked/index.ts b/src/runtime/composables/baked/index.ts
deleted file mode 100644
index f13a85d..0000000
--- a/src/runtime/composables/baked/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as useBakedAnimation } from "./animate";
-export { default as useBakedAnimateOnScroll } from "./on-scroll";
-export { default as useBakedSplitTextAnimation } from "./split-text";
diff --git a/src/runtime/composables/baked/presets.ts b/src/runtime/composables/baked/presets.ts
new file mode 100644
index 0000000..4e3d9a9
--- /dev/null
+++ b/src/runtime/composables/baked/presets.ts
@@ -0,0 +1,98 @@
+import "gsap";
+import type { AnimationOptions } from "./types";
+
+type RequiredAnimationOptions = Required<AnimationOptions>;
+const defineTween = <
+  Obj extends Record<string, { from: gsap.TweenVars; to: gsap.TweenVars }>,
+  T extends Exclude<keyof Obj, "DEFAULT">,
+>(
+  x: Obj,
+  defaultTween: T,
+) => ({ ...x, DEFAULT: defaultTween });
+
+export const presetTweens = {
+  opacity: defineTween(
+    {
+      in: { from: { autoAlpha: 0 }, to: { autoAlpha: 1 } },
+      out: { from: { autoAlpha: 1 }, to: { autoAlpha: 0 } },
+    },
+    "in",
+  ),
+  translate: defineTween(
+    {
+      bottom: {
+        from: { y: "200%" },
+        to: {
+          y: 0,
+          scrollTrigger: {
+            start: "top-=100% center",
+            end: "bottom center",
+          },
+        },
+      },
+      top: {
+        from: {
+          y: "-200%",
+        },
+        to: {
+          y: 0,
+          scrollTrigger: {
+            start: "top+=50% center",
+            end: "bottom center",
+          },
+        },
+      },
+      left: { from: { x: "-200%" }, to: { x: 0 } },
+      right: { from: { x: "200%" }, to: { x: 0 } },
+    },
+    "bottom",
+  ),
+  skew: defineTween(
+    {
+      bottom: { from: { skewY: 10 }, to: { skewY: 0 } },
+      top: { from: { skewY: -10 }, to: { skewY: 0 } },
+      left: { from: { skewX: -10 }, to: { skewX: 0 } },
+      right: { from: { skewX: 10 }, to: { skewX: 0 } },
+    },
+    "bottom",
+  ),
+  scale: defineTween(
+    {
+      in: { from: { scale: 0 }, to: { scale: 1 } },
+      out: { from: { scale: 1 }, to: { scale: 0 } },
+    },
+    "in",
+  ),
+  rotate: defineTween(
+    {
+      left: {
+        from: { rotation: 15, transformOrigin: "top left" },
+        to: { rotation: 0 },
+      },
+      right: {
+        from: { rotation: -15, transformOrigin: "top right" },
+        to: { rotation: 0 },
+      },
+    },
+    "left",
+  ),
+  blur: defineTween(
+    {
+      in: { from: { filter: "blur(10px)" }, to: { filter: "blur(0px)" } },
+      out: { from: { filter: "blur(0px)" }, to: { filter: "blur(10px)" } },
+    },
+    "in",
+  ),
+} satisfies {
+  [K in keyof RequiredAnimationOptions]: {
+    [P in RequiredAnimationOptions[K] as Exclude<
+      RequiredAnimationOptions[K],
+      true
+    >]: {
+      from: gsap.TweenVars;
+      to: gsap.TweenVars;
+    };
+  } & {
+    DEFAULT: Exclude<RequiredAnimationOptions[K], true>;
+  };
+};
diff --git a/src/runtime/composables/baked/types.ts b/src/runtime/composables/baked/types.ts
index 89e4ab3..eb3758e 100644
--- a/src/runtime/composables/baked/types.ts
+++ b/src/runtime/composables/baked/types.ts
@@ -1,12 +1,5 @@
 import type { Direction } from "../../types";
-
-const defineTween = <
-  Obj extends Record<string, { from: gsap.TweenVars; to: gsap.TweenVars }>,
-  T extends Exclude<keyof Obj, "DEFAULT">,
->(
-  x: Obj,
-  defaultTween: T,
-) => ({ ...x, DEFAULT: defaultTween });
+import type { StrongTweenVars } from "../use-gsap";
 
 export type AnimationOptions = {
   /** Animation opacity
@@ -57,91 +50,16 @@ export type AnimationOptions = {
   blur?: "in" | "out" | true;
 };
 
-type RequiredAnimationOptions = Required<AnimationOptions>;
-
-export const presetTweens = {
-  opacity: defineTween(
-    {
-      in: { from: { autoAlpha: 0 }, to: { autoAlpha: 1 } },
-      out: { from: { autoAlpha: 1 }, to: { autoAlpha: 0 } },
-    },
-    "in",
-  ),
-  translate: defineTween(
-    {
-      bottom: {
-        from: { y: "200%" },
-        to: {
-          y: 0,
-          scrollTrigger: {
-            start: "top-=100% center",
-            end: "bottom center",
-          },
-        },
-      },
-      top: {
-        from: {
-          y: "-200%",
-        },
-        to: {
-          y: 0,
-          scrollTrigger: {
-            start: "top+=50% center",
-            end: "bottom center",
-          },
-        },
-      },
-      left: { from: { x: "-200%" }, to: { x: 0 } },
-      right: { from: { x: "200%" }, to: { x: 0 } },
-    },
-    "bottom",
-  ),
-  skew: defineTween(
-    {
-      bottom: { from: { skewY: 10 }, to: { skewY: 0 } },
-      top: { from: { skewY: -10 }, to: { skewY: 0 } },
-      left: { from: { skewX: -10 }, to: { skewX: 0 } },
-      right: { from: { skewX: 10 }, to: { skewX: 0 } },
-    },
-    "bottom",
-  ),
-  scale: defineTween(
-    {
-      in: { from: { scale: 0 }, to: { scale: 1 } },
-      out: { from: { scale: 1 }, to: { scale: 0 } },
-    },
-    "in",
-  ),
-  rotate: defineTween(
-    {
-      left: {
-        from: { rotation: 15, transformOrigin: "top left" },
-        to: { rotation: 0 },
-      },
-      right: {
-        from: { rotation: -15, transformOrigin: "top right" },
-        to: { rotation: 0 },
-      },
-    },
-    "left",
-  ),
-  blur: defineTween(
-    {
-      in: { from: { filter: "blur(10px)" }, to: { filter: "blur(0px)" } },
-      out: { from: { filter: "blur(0px)" }, to: { filter: "blur(10px)" } },
-    },
-    "in",
-  ),
-} satisfies {
-  [K in keyof RequiredAnimationOptions]: {
-    [P in RequiredAnimationOptions[K] as Exclude<
-      RequiredAnimationOptions[K],
-      true
-    >]: {
-      from: gsap.TweenVars;
-      to: gsap.TweenVars;
-    };
-  } & {
-    DEFAULT: Exclude<RequiredAnimationOptions[K], true>;
-  };
+/** Options for the animation
+ * @remarks
+ * Uses `gsap.TweenVars` as a base type for the animation options
+ * @see {@link https://greensock.com/docs/v3/GSAP/gsap.to()}
+ * */
+export type UseBakedAnimationOptions = {
+  /** Options for the animation */
+  animationOptions: AnimationOptions;
+  /** Tween values for `gsap.to()`
+   * @remarks `ease` is strongly typed
+   * */
+  tweenValues?: StrongTweenVars;
 };
diff --git a/src/runtime/composables/baked/utils.ts b/src/runtime/composables/baked/utils.ts
index 5f05ab4..e460870 100644
--- a/src/runtime/composables/baked/utils.ts
+++ b/src/runtime/composables/baked/utils.ts
@@ -1,5 +1,6 @@
 import type { StrongTweenVars } from "../use-gsap";
-import { presetTweens, type AnimationOptions } from "./types";
+import { presetTweens } from "./presets";
+import { type AnimationOptions } from "./types";
 
 /** Generates the baked animation tweens
  * @param animationOptions - The animation options
@@ -35,3 +36,5 @@ export function generateAnimationTweens(animationOptions: AnimationOptions): {
 
   return tweens;
 }
+
+export * from "./types";
diff --git a/src/runtime/composables/directives.ts b/src/runtime/composables/directives.ts
new file mode 100644
index 0000000..79c5f91
--- /dev/null
+++ b/src/runtime/composables/directives.ts
@@ -0,0 +1,3 @@
+export { vAos } from "./use-animate-on-scroll/directive";
+export { vSplitAnimate } from "./use-split-text-animation/directive";
+export { vFromTo } from "./use-gsap/directive";
diff --git a/src/runtime/composables/index.ts b/src/runtime/composables/index.ts
index 1d8e85a..b58d575 100644
--- a/src/runtime/composables/index.ts
+++ b/src/runtime/composables/index.ts
@@ -1,4 +1,3 @@
-export * from "./baked";
 export * from "./transitions";
 export * from "./use-gsap";
 export * from "./use-animate-on-scroll";
diff --git a/src/runtime/composables/transitions/construct.ts b/src/runtime/composables/transitions/construct.ts
index 6decb2b..eba9bbd 100644
--- a/src/runtime/composables/transitions/construct.ts
+++ b/src/runtime/composables/transitions/construct.ts
@@ -12,6 +12,7 @@ import {
 import type { ShallowRef } from "vue";
 import type { MaybeComputedElementRef } from "@vueuse/core";
 import type { Direction, Simplify } from "../../types";
+import { concat, pascalCase } from "string-ts";
 
 export type UseConstructTransitionCallbackOptions = {
   /** Callback when the enter animation is about to start */
@@ -138,37 +139,7 @@ export function useConstructTransition(
   };
 
   watch(playState, (value) => {
-    switch (value) {
-      case "beforeEnter": {
-        options.onBeforeEnter?.();
-        break;
-      }
-      case "beforeLeave": {
-        options.onBeforeLeave?.();
-        break;
-      }
-      case "afterEnter": {
-        options.onAfterEnter?.();
-        break;
-      }
-      case "afterLeave": {
-        options.onAfterLeave?.();
-        break;
-      }
-      case "enter": {
-        options.onEnter?.();
-        break;
-      }
-      case "leave": {
-        options.onLeave?.();
-        break;
-      }
-      default: {
-        // compile-time check to ensure all cases are handled
-        const _: never = value;
-        _;
-      }
-    }
+    options[concat("on", pascalCase(value))]?.();
   });
 
   return {
diff --git a/src/runtime/composables/use-animate-on-scroll/README.md b/src/runtime/composables/use-animate-on-scroll/README.md
index 082141a..d80773a 100644
--- a/src/runtime/composables/use-animate-on-scroll/README.md
+++ b/src/runtime/composables/use-animate-on-scroll/README.md
@@ -1 +1,47 @@
 # `useAnimateOnScroll`
+
+Automatically enable animate on scroll for the attached element.
+
+## Usage
+
+```ts
+const container = ref<HTMLElement>();
+useAnimateOnScroll(container, {
+  from: { y: -10, autoAlpha: 0 },
+  to: { y: 0, autoAlpha: 1 },
+});
+```
+
+## Baked version
+
+With [`baked`](../baked) animations.
+
+```ts
+const container = ref<HTMLElement>();
+useBakedAnimateOnScroll(container, { translate: true, opacity: true });
+```
+
+## Directive
+
+Can also be imported as `vAos`.
+
+### Unbaked
+
+```vue
+<div
+  v-aos="{
+    options: { from: { x: 0 }, to: { x: 10 } },
+  }"
+/>
+```
+
+### Baked
+
+```vue
+<div
+  v-aos="{
+    baked: true,
+    options: { translate: true, scale: true },
+  }"
+/>
+```
diff --git a/src/runtime/composables/baked/on-scroll.ts b/src/runtime/composables/use-animate-on-scroll/baked.ts
similarity index 81%
rename from src/runtime/composables/baked/on-scroll.ts
rename to src/runtime/composables/use-animate-on-scroll/baked.ts
index fbc0f2b..2aab829 100644
--- a/src/runtime/composables/baked/on-scroll.ts
+++ b/src/runtime/composables/use-animate-on-scroll/baked.ts
@@ -1,8 +1,10 @@
 import { type MaybeRefOrGetter, toRef } from "#imports";
-import { type UseBakedAnimationOptions } from "./animate";
 import type { Simplify } from "../../types";
-import { generateAnimationTweens } from "./utils";
-import { useAnimateOnScroll } from "../use-animate-on-scroll";
+import {
+  type UseBakedAnimationOptions,
+  generateAnimationTweens,
+} from "../baked/utils";
+import { useAnimateOnScroll } from ".";
 
 /** Options for `useAnimateOnScroll` */
 export type UseBakedAnimateOnScrollOptions = Simplify<
@@ -15,7 +17,7 @@ export type UseBakedAnimateOnScrollOptions = Simplify<
   }
 >;
 
-export default function (
+export function useBakedAnimateOnScroll(
   el: MaybeRefOrGetter<gsap.DOMTarget | undefined>,
   options: UseBakedAnimateOnScrollOptions = {},
 ) {
diff --git a/src/runtime/composables/use-animate-on-scroll/directive.ts b/src/runtime/composables/use-animate-on-scroll/directive.ts
new file mode 100644
index 0000000..da86a0f
--- /dev/null
+++ b/src/runtime/composables/use-animate-on-scroll/directive.ts
@@ -0,0 +1,7 @@
+import { useAnimateOnScroll, useBakedAnimateOnScroll } from ".";
+import { defineDirective } from "../baked/directive";
+
+export const vAos = defineDirective({
+  fn: useAnimateOnScroll,
+  bakedFn: useBakedAnimateOnScroll,
+});
diff --git a/src/runtime/composables/use-animate-on-scroll/index.ts b/src/runtime/composables/use-animate-on-scroll/index.ts
index c6a8b43..cfe7cfe 100644
--- a/src/runtime/composables/use-animate-on-scroll/index.ts
+++ b/src/runtime/composables/use-animate-on-scroll/index.ts
@@ -20,19 +20,24 @@ export function useAnimateOnScroll(
   const unrefEl = toValue(el);
   const { from, to } = options;
 
-  let scrollAnimationOptions: gsap.AnimationVars["scrollTrigger"] = undefined;
+  let scrollTrigger: gsap.AnimationVars["scrollTrigger"] = undefined;
 
   if (options.scrollAnimationOptions) {
-    scrollAnimationOptions = {
+    scrollTrigger = {
       trigger: unrefEl,
       start: "top 80%",
     };
     if (options.scrollAnimationOptions instanceof Object) {
-      scrollAnimationOptions = {
+      scrollTrigger = {
         trigger: unrefEl,
         ...options.scrollAnimationOptions,
       };
     }
+
+    scrollTrigger = {
+      ...scrollTrigger,
+      ...(to.scrollTrigger ?? {}),
+    };
   }
 
   const { fromTo } = useGsap();
@@ -41,10 +46,10 @@ export function useAnimateOnScroll(
     from,
     to: {
       ...to,
-      scrollTrigger: {
-        ...(scrollAnimationOptions ?? {}),
-        ...(to.scrollTrigger ?? {}),
-      },
+      scrollTrigger,
     },
   });
 }
+
+export * from "./baked";
+export * from "./directive";
diff --git a/src/runtime/composables/use-gsap/README.md b/src/runtime/composables/use-gsap/README.md
index 678a82d..43d0855 100644
--- a/src/runtime/composables/use-gsap/README.md
+++ b/src/runtime/composables/use-gsap/README.md
@@ -34,6 +34,40 @@ const {
 
 You can use `tlFn` to have an isolated instance of the timeline which will register on mount.
 
+## Baked version
+
+This exposes `fromTo` with [`baked`](../baked) animations.
+
+```ts
+const container = ref<HTMLElement>();
+useBakedFromTo(container, { translate: true, scale: true });
+```
+
+## Directive
+
+Can also be imported as `vFromTo`.
+
+### Unbaked
+
+```vue
+<div
+  v-from-to="{
+    options: { from: { x: 0 }, to: { x: 10 } },
+  }"
+/>
+```
+
+### Baked
+
+```vue
+<div
+  v-from-to="{
+    baked: true,
+    options: { translate: true, scale: true },
+  }"
+/>
+```
+
 ## Example
 
 ```ts
diff --git a/src/runtime/composables/baked/animate.ts b/src/runtime/composables/use-gsap/baked.ts
similarity index 70%
rename from src/runtime/composables/baked/animate.ts
rename to src/runtime/composables/use-gsap/baked.ts
index f9e913b..44436d8 100644
--- a/src/runtime/composables/baked/animate.ts
+++ b/src/runtime/composables/use-gsap/baked.ts
@@ -1,21 +1,9 @@
 import { type MaybeRefOrGetter } from "#imports";
-import { useGsap, type StrongTweenVars } from "../use-gsap";
-import { type AnimationOptions } from "./types";
-import { generateAnimationTweens } from "./utils";
-
-/** Options for the animation
- * @remarks
- * Uses `gsap.TweenVars` as a base type for the animation options
- * @see {@link https://greensock.com/docs/v3/GSAP/gsap.to()}
- * */
-export type UseBakedAnimationOptions = {
-  /** Options for the animation */
-  animationOptions: AnimationOptions;
-  /** Tween values for `gsap.to()`
-   * @remarks `ease` is strongly typed
-   * */
-  tweenValues?: StrongTweenVars;
-};
+import {
+  generateAnimationTweens,
+  type UseBakedAnimationOptions,
+} from "../baked/utils";
+import { useGsap } from ".";
 
 /**
  * Animates an element with baked animation options to make it easier to animate repetitive animations
@@ -49,7 +37,7 @@ export type UseBakedAnimationOptions = {
  * ```
  * @see {@link https://greensock.com/docs/v3/GSAP/gsap.fromTo()}
  */
-export default function (
+export function useBakedFromTo(
   el: MaybeRefOrGetter<gsap.TweenTarget | undefined>,
   options: UseBakedAnimationOptions,
 ) {
diff --git a/src/runtime/composables/use-gsap/directive.ts b/src/runtime/composables/use-gsap/directive.ts
new file mode 100644
index 0000000..f94543d
--- /dev/null
+++ b/src/runtime/composables/use-gsap/directive.ts
@@ -0,0 +1,21 @@
+import { useGsap, useBakedFromTo, type UseGsapReturn } from ".";
+import { directiveHooks } from "@vueuse/core";
+import type { ObjectDirective } from "nuxt/dist/app/compat/capi";
+import type { DirectiveOptions } from "../baked/directive";
+import type { UseBakedAnimationOptions } from "../baked/types";
+
+export const vFromTo: ObjectDirective<
+  HTMLElement,
+  DirectiveOptions<
+    Parameters<UseGsapReturn["fromTo"]>[1],
+    UseBakedAnimationOptions
+  >
+> = {
+  [directiveHooks.mounted]: (el, binding) => {
+    if (!binding.value?.baked) {
+      const { fromTo } = useGsap();
+      return fromTo(el, binding.value.options);
+    }
+    useBakedFromTo(el, binding.value.options);
+  },
+};
diff --git a/src/runtime/composables/use-gsap/index.ts b/src/runtime/composables/use-gsap/index.ts
index 7da8ca4..5b36fc5 100644
--- a/src/runtime/composables/use-gsap/index.ts
+++ b/src/runtime/composables/use-gsap/index.ts
@@ -98,3 +98,5 @@ export function useGsap(plugins: object[] = [ScrollTrigger]) {
 }
 
 export type UseGsapReturn = ReturnType<typeof useGsap>;
+
+export * from "./baked";
diff --git a/src/runtime/composables/use-split-text-animation/README.md b/src/runtime/composables/use-split-text-animation/README.md
index e3ba39f..8e12237 100644
--- a/src/runtime/composables/use-split-text-animation/README.md
+++ b/src/runtime/composables/use-split-text-animation/README.md
@@ -1 +1,52 @@
 # `useSplitTextAnimation`
+
+Automatically enable animate on scroll for the attached element.
+
+## Usage
+
+```ts
+const container = ref<HTMLElement>();
+useSplitTextAnimation(container, {
+  splityBy: "lines",
+  from: { y: -10, autoAlpha: 0 },
+  to: { y: 0, autoAlpha: 1 },
+});
+```
+
+## Baked version
+
+With [`baked`](../baked) animations.
+
+```ts
+const container = ref<HTMLElement>();
+useBakedSplitTextAnimation(container, { translate: true, opacity: true });
+```
+
+## Directive
+
+Can also be imported as `vSplitAnimate`.
+
+### Unbaked
+
+```vue
+<div
+  v-split-animate="{
+    options: {
+      splitBy: 'lines',
+      from: { x: 0 },
+      to: { x: 10 },
+    },
+  }"
+/>
+```
+
+### Baked
+
+```vue
+<div
+  v-aos="{
+    baked: true,
+    options: { splitBy: 'lines', translate: true, scale: true },
+  }"
+/>
+```
diff --git a/src/runtime/composables/baked/split-text.ts b/src/runtime/composables/use-split-text-animation/baked.ts
similarity index 92%
rename from src/runtime/composables/baked/split-text.ts
rename to src/runtime/composables/use-split-text-animation/baked.ts
index 6b84353..84ac047 100644
--- a/src/runtime/composables/baked/split-text.ts
+++ b/src/runtime/composables/use-split-text-animation/baked.ts
@@ -1,12 +1,12 @@
 import type { MaybeComputedElementRef } from "@vueuse/core";
 import type { Ease, Simplify } from "../../types";
-import { type UseBakedAnimateOnScrollOptions } from "./on-scroll";
+import { type UseBakedAnimateOnScrollOptions } from "../use-animate-on-scroll/baked";
 import {
   useSplitTextAnimation,
   type PartialSplitTextAnimationOptions,
-} from "../use-split-text-animation";
+} from ".";
 
-import { generateAnimationTweens } from "./utils";
+import { generateAnimationTweens } from "../baked/utils";
 
 /** Completely optional options for the `useSplitTextAnimation` composable */
 export type UseBakedSplitTextAnimationOptions = Simplify<
@@ -56,7 +56,7 @@ export type UseBakedSplitTextAnimationOptions = Simplify<
  * useSplitTextAnimation(refEl, options);
  * ```
  */
-export default function (
+export function useBakedSplitTextAnimation(
   el: MaybeComputedElementRef,
   options: UseBakedSplitTextAnimationOptions = {},
 ) {
diff --git a/src/runtime/composables/use-split-text-animation/directive.ts b/src/runtime/composables/use-split-text-animation/directive.ts
new file mode 100644
index 0000000..f148063
--- /dev/null
+++ b/src/runtime/composables/use-split-text-animation/directive.ts
@@ -0,0 +1,7 @@
+import { useSplitTextAnimation, useBakedSplitTextAnimation } from ".";
+import { defineDirective } from "../baked/directive";
+
+export const vSplitAnimate = defineDirective({
+  fn: useSplitTextAnimation,
+  bakedFn: useBakedSplitTextAnimation,
+});
diff --git a/src/runtime/composables/use-split-text-animation/index.ts b/src/runtime/composables/use-split-text-animation/index.ts
index 659c34b..006f9a4 100644
--- a/src/runtime/composables/use-split-text-animation/index.ts
+++ b/src/runtime/composables/use-split-text-animation/index.ts
@@ -25,9 +25,8 @@ export type UseSplitTextAnimationOptions = Simplify<
  * @param el - The element or ref to animate
  * @param options - The animation options
  * @remarks
- * - Made so that it works with a basic but nice effect out of the box
  * - Uses the `useSplitText` composable to split the text
- * - Uses the `useBakedAnimation` composable for the animation
+ * - Uses the `useAnimateOnScroll` composable for the animation
  * @example
  * ```ts
  * const refEl = ref<HTMLElement>();
@@ -57,3 +56,5 @@ export function useSplitTextAnimation(
 
   useAnimateOnScroll(splitEl[splitBy], animateOnScrollOptions);
 }
+
+export * from "./baked";
diff --git a/src/runtime/directives/index.ts b/src/runtime/directives/index.ts
deleted file mode 100644
index c01d7de..0000000
--- a/src/runtime/directives/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { vSplitAnimate } from "./vSplitAnimate";
diff --git a/src/runtime/directives/vSplitAnimate.ts b/src/runtime/directives/vSplitAnimate.ts
deleted file mode 100644
index 1464390..0000000
--- a/src/runtime/directives/vSplitAnimate.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { directiveHooks } from "@vueuse/core";
-import type { ObjectDirective } from "nuxt/dist/app/compat/capi";
-import useSplitTextAnimation, {
-  type UseBakedSplitTextAnimationOptions,
-} from "../composables/baked/split-text";
-
-export const vSplitAnimate: ObjectDirective<
-  HTMLElement,
-  UseBakedSplitTextAnimationOptions
-> = {
-  [directiveHooks.mounted]: (el, binding) => {
-    useSplitTextAnimation(el, binding.value);
-  },
-};
diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
index 9285f64..006e523 100644
--- a/src/runtime/plugin.ts
+++ b/src/runtime/plugin.ts
@@ -1,7 +1,12 @@
 import { defineNuxtPlugin } from "#app";
-import { vSplitAnimate } from "./directives";
-export { vSplitAnimate };
+import {
+  vSplitAnimate,
+  vAos,
+  vFromTo,
+} from "../runtime/composables/directives";
 
 export default defineNuxtPlugin((nuxt) => {
   nuxt.vueApp.directive("split-animate", vSplitAnimate);
+  nuxt.vueApp.directive("aos", vAos);
+  nuxt.vueApp.directive("from-to", vFromTo);
 });