diff --git a/extensions/animations/src/index.ts b/extensions/animations/src/index.ts
index 00103fc..98b7df0 100644
--- a/extensions/animations/src/index.ts
+++ b/extensions/animations/src/index.ts
@@ -17,7 +17,7 @@ export const setups = [
 ];
 
 declare module "@vue-motion/lib" {
-  export interface PositionalMixin {
+  export interface PositionalIns {
     focusOn: (params?: any) => void;
   }
 }
diff --git a/extensions/math/src/math-function.vue b/extensions/math/src/math-function.vue
index 1a72ba7..d616051 100644
--- a/extensions/math/src/math-function.vue
+++ b/extensions/math/src/math-function.vue
@@ -41,7 +41,6 @@ function generateSvgPath(
     // Convert the values of a mathematical function to SVG coordinates
     const svgX = (x - xMin) * scaleX;
     const svgY = (yMax - y) * scaleY; // Invert the y-axis to conform to the SVG coordinate system
-
     path.push(
       `${x === xMin || svgY > 1500 || svgY < -1500 ? "M" : "L"} ${svgX} ${svgY}`,
     );
diff --git a/extensions/math/src/number-plane.vue b/extensions/math/src/number-plane.vue
index 949efaf..605ae26 100644
--- a/extensions/math/src/number-plane.vue
+++ b/extensions/math/src/number-plane.vue
@@ -71,35 +71,36 @@ const domain = [options.domainX.sort(), options.domainY.sort()];
     </Text>
     <g v-if="options.grid">
       <Line
-        v-for="i in domain[0][1] - domain[0][0]"
-        :key="i"
+        v-for="i in domain[0][1] - domain[0][0] + 1"
+        :key="`v-${i}`"
         :from="[
           i * (options.intervalX ?? 100),
-          options.domainY[0] * (options.intervalY ?? 100),
+          domain[1][0] * (options.intervalY ?? 100),
         ]"
         :to="[
           i * (options.intervalX ?? 100),
-          options.domainY[1] * (options.intervalY ?? 100),
+          domain[1][1] * (options.intervalY ?? 100),
         ]"
         :border-color="options.gridColor ?? 'white'"
         :border-width="options.gridWidth ?? 1"
         :x="(options.domainX[0] - 1) * (options.intervalX ?? 100)"
         :progress="options.progress ?? 1"
+        :scale-y="-1"
       />
       <Line
-        v-for="i in domain[1][1] - domain[1][0]"
-        :key="i"
+        v-for="i in domain[1][1] - domain[1][0] + 1"
+        :key="`h-${i}`"
         :from="[
-          options.domainX[0] * (options.intervalX ?? 100),
+          domain[0][0] * (options.intervalX ?? 100),
           i * (options.intervalY ?? 100),
         ]"
         :to="[
-          options.domainX[1] * (options.intervalX ?? 100),
+          domain[0][1] * (options.intervalX ?? 100),
           i * (options.intervalY ?? 100),
         ]"
         :border-color="options.gridColor ?? 'white'"
         :border-width="options.gridWidth ?? 1"
-        :y="(options.domainY[0] - 1) * (options.intervalY ?? 100)"
+        :y="(options.intervalY ?? 100) * options.domainY[0]"
         :progress="options.progress ?? 1"
       />
     </g>
diff --git a/extensions/three/src/widget3d.ts b/extensions/three/src/widget3d.ts
index 3c01b5a..5e44f4b 100644
--- a/extensions/three/src/widget3d.ts
+++ b/extensions/three/src/widget3d.ts
@@ -4,11 +4,10 @@ export interface Widget3DOptions extends WidgetOptions {
   x?: number;
   y?: number;
   z?: number;
-  rx?: number;
-  ry?: number;
-  rz?: number;
+  rotationX?: number;
+  rotationY?: number;
+  rotationZ?: number;
   scaleX?: number;
   scaleY?: number;
   scaleZ?: number;
-  opacity?: number;
 }
diff --git a/packages/lib/src/animations/color.ts b/packages/lib/src/animations/color.ts
index cc0fc3a..95417f7 100644
--- a/packages/lib/src/animations/color.ts
+++ b/packages/lib/src/animations/color.ts
@@ -7,7 +7,7 @@ export interface Colorable {
   color?: string;
 }
 
-export interface ColorableMixin {
+export interface ColorableIns {
   discolorate: (offset: string) => void;
   discolorateTo: (to: string) => void;
   discolorateBorder: (offset: string) => void;
diff --git a/packages/lib/src/animations/fade.ts b/packages/lib/src/animations/fade.ts
index 5fc3729..f314b46 100644
--- a/packages/lib/src/animations/fade.ts
+++ b/packages/lib/src/animations/fade.ts
@@ -5,7 +5,7 @@ import { interpolator } from "../interpolator";
 export interface HasOpacity {
   opacity?: number;
 }
-export interface HasOpacityMixin extends HasOpacity {
+export interface HasOpacityIns extends HasOpacity {
   fadeTo: (to: number, params?: AnimationParams) => void;
   fadeIn: (params?: AnimationParams) => void;
   fadeOut: (params?: AnimationParams) => void;
diff --git a/packages/lib/src/animations/grow.ts b/packages/lib/src/animations/grow.ts
index 58468ac..766b281 100644
--- a/packages/lib/src/animations/grow.ts
+++ b/packages/lib/src/animations/grow.ts
@@ -4,7 +4,7 @@ export interface Growable {
   progress?: number;
 }
 
-export interface GrowableMixin extends Growable {
+export interface GrowableIns extends Growable {
   grow: () => void;
 }
 
diff --git a/packages/lib/src/animations/move.ts b/packages/lib/src/animations/move.ts
index 8d61ddb..3b2b057 100644
--- a/packages/lib/src/animations/move.ts
+++ b/packages/lib/src/animations/move.ts
@@ -7,7 +7,7 @@ export interface Positional {
   y?: number;
 }
 
-export interface PositionalMixin extends Positional {
+export interface PositionalIns extends Positional {
   move: (offsetX: number, offsetY: number, options?: AnimationParams) => void;
   moveTo: (toX: number, toY: number, options?: AnimationParams) => void;
   moveOnPath: (path: string, options?: AnimationParams) => void;
diff --git a/packages/lib/src/animations/path.ts b/packages/lib/src/animations/path.ts
index 3a7bf4d..543ae6b 100644
--- a/packages/lib/src/animations/path.ts
+++ b/packages/lib/src/animations/path.ts
@@ -24,11 +24,16 @@ export const moveOnFunction = defineAnimation<
       x: number;
       y: number;
     };
+    divisionX?: number;
+    divisionY?: number;
   }
 >((target, context) => {
+  const divisionX = context.divisionX ?? 1;
+  const divisionY = context.divisionY ?? 1;
+
   return (progress) => {
     const point = context.path(progress);
-    target.x = point.x;
-    target.y = point.y;
+    target.x = point.x * divisionX;
+    target.y = point.y * divisionY;
   };
 });
diff --git a/packages/lib/src/animations/rotate.ts b/packages/lib/src/animations/rotate.ts
index 50648b5..f6380e0 100644
--- a/packages/lib/src/animations/rotate.ts
+++ b/packages/lib/src/animations/rotate.ts
@@ -6,7 +6,7 @@ export interface Rotatable {
   rotation?: number;
 }
 
-export interface RotatableMixin extends Rotatable {
+export interface RotatableIns extends Rotatable {
   rotate: (offset: number, options?: AnimationParams) => void;
   rotateTo: (to: number, options?: AnimationParams) => void;
 }
diff --git a/packages/lib/src/animations/scale.ts b/packages/lib/src/animations/scale.ts
index 3247e93..8880b6f 100644
--- a/packages/lib/src/animations/scale.ts
+++ b/packages/lib/src/animations/scale.ts
@@ -7,7 +7,7 @@ export interface Scalable {
   scaleY?: number;
 }
 
-export interface ScalableMixin extends Scalable {
+export interface ScalableIns extends Scalable {
   scale: (offsetX: number, offsetY: number, options?: AnimationParams) => void;
   scaleTo: (toX: number, toY: number, options?: AnimationParams) => void;
 }
diff --git a/packages/lib/src/animations/trace.ts b/packages/lib/src/animations/trace.ts
index 49aea40..edb1074 100644
--- a/packages/lib/src/animations/trace.ts
+++ b/packages/lib/src/animations/trace.ts
@@ -6,7 +6,7 @@ import type { HasOpacity } from "./fade";
 export interface Strokable {
   borderInterval: number[];
 }
-export interface StrokableMixin extends Strokable {
+export interface StrokableIns extends Strokable {
   trace: (origin: number, options?: AnimationParams) => void;
   traceFill: (origin: number, options?: AnimationParams) => void;
 }
diff --git a/packages/lib/src/animations/zoom.ts b/packages/lib/src/animations/zoom.ts
index 3e56f3d..aa4b336 100644
--- a/packages/lib/src/animations/zoom.ts
+++ b/packages/lib/src/animations/zoom.ts
@@ -6,7 +6,7 @@ export interface HasScale {
   scaleX?: number;
   scaleY?: number;
 }
-export interface HasScaleMixin extends HasScale {
+export interface HasScaleIns extends HasScale {
   zoomTo: (toX: number, toY: number, options?: AnimationParams) => void;
   zoomIn: (options?: AnimationParams) => void;
   zoomOut: (options?: AnimationParams) => void;
diff --git a/packages/lib/src/widgets/arc.vue b/packages/lib/src/widgets/arc.vue
index f6340e2..c741cb8 100644
--- a/packages/lib/src/widgets/arc.vue
+++ b/packages/lib/src/widgets/arc.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineWidget } from "@vue-motion/core";
 import { computed, defineProps, withDefaults } from "vue";
-import type { Growable, GrowableMixin } from "../animations";
+import type { Growable, GrowableIns } from "../animations";
 import type { Vector } from "../animations/typings";
 import { type FigureOptions, figure } from "./figure";
 
@@ -11,7 +11,7 @@ export interface ArcOptions extends FigureOptions, Growable {
   to?: number;
 }
 
-export type ArcMixin = ArcOptions & GrowableMixin;
+export type ArcIns = ArcOptions & GrowableIns;
 
 const props = withDefaults(defineProps<ArcOptions>(), {
   progress: 1,
diff --git a/packages/lib/src/widgets/arrow.vue b/packages/lib/src/widgets/arrow.vue
new file mode 100644
index 0000000..e330644
--- /dev/null
+++ b/packages/lib/src/widgets/arrow.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { Vector } from "../animations/typings";
+import type { FigureOptions } from "./figure";
+import { defineWidget } from "@vue-motion/core";
+import Polygon from "./polygon.vue";
+import { widget, WidgetIns } from "./widget";
+import type { Growable } from "../animations";
+
+export interface ArrowOptions extends FigureOptions, Growable {
+  from: Vector;
+  to: Vector;
+}
+
+const props = defineProps<ArrowOptions>();
+const options = defineWidget(props);
+
+const current = computed(() => {
+  const dx = options.to[0] - options.from[0];
+  const dy = options.to[1] - options.from[1];
+  return {
+    x: options.from[0] + dx * (options.progress ?? 1),
+    y: options.from[1] + dy * (options.progress ?? 1),
+  };
+});
+
+const rotation = computed(() => {
+  const delta = [
+    options.to[0] - options.from[0],
+    options.to[1] - options.from[1],
+  ];
+  return Math.atan2(delta[1], delta[0]);
+});
+
+export type ArrowIns = ArrowOptions & WidgetIns;
+</script>
+
+<template>
+  <g v-bind="widget(options)">
+    <line
+      :x1="options.from[0]"
+      :y1="options.from[1]"
+      :x2="current.x"
+      :y2="current.y"
+    />
+    <g
+      :transform="`translate(${current.x}, ${current.y}) rotate(${(rotation * 180) / Math.PI})`"
+    >
+      <Polygon
+        :points="[
+          [0, -10],
+          [0, 10],
+          [Math.sqrt(300), 0],
+        ]"
+      />
+    </g>
+  </g>
+</template>
diff --git a/packages/lib/src/widgets/circle.vue b/packages/lib/src/widgets/circle.vue
index 2448589..11d73bb 100644
--- a/packages/lib/src/widgets/circle.vue
+++ b/packages/lib/src/widgets/circle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { defineWidget } from "@vue-motion/core";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface CircleOptions extends FigureOptions {
@@ -9,7 +9,7 @@ export interface CircleOptions extends FigureOptions {
   cx: number;
   cy: number;
 }
-export type CircleMixin = CircleOptions & FigureMixin;
+export type CircleIns = CircleOptions & FigureIns;
 
 const props = defineProps<CircleOptions>();
 const options = defineWidget(props);
diff --git a/packages/lib/src/widgets/ellipse.vue b/packages/lib/src/widgets/ellipse.vue
index 2ce12ca..4c19c51 100644
--- a/packages/lib/src/widgets/ellipse.vue
+++ b/packages/lib/src/widgets/ellipse.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { defineWidget } from "@vue-motion/core";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface EllipseOptions extends FigureOptions {
@@ -13,7 +13,7 @@ export interface EllipseOptions extends FigureOptions {
   height?: number;
   radius?: number;
 }
-export type EllipseMixin = EllipseOptions & FigureMixin;
+export type EllipseIns = EllipseOptions & FigureIns;
 
 const props = defineProps<EllipseOptions>();
 const options = defineWidget(props);
diff --git a/packages/lib/src/widgets/figure.ts b/packages/lib/src/widgets/figure.ts
index c82d58f..1dde2a1 100644
--- a/packages/lib/src/widgets/figure.ts
+++ b/packages/lib/src/widgets/figure.ts
@@ -1,4 +1,4 @@
-import type { WidgetMixin, WidgetOptions } from "./widget";
+import type { WidgetIns, WidgetOptions } from "./widget";
 import { widget } from "./widget";
 
 export interface FigureOptions extends WidgetOptions {
@@ -9,7 +9,7 @@ export interface FigureOptions extends WidgetOptions {
   borderInterval?: number[];
 }
 
-export type FigureMixin = FigureOptions & WidgetMixin;
+export type FigureIns = FigureOptions & WidgetIns;
 
 export function figure(options: FigureOptions) {
   const props = widget(options) as ReturnType<typeof widget> & {
diff --git a/packages/lib/src/widgets/image.vue b/packages/lib/src/widgets/image.vue
index 708b18e..5a52e72 100644
--- a/packages/lib/src/widgets/image.vue
+++ b/packages/lib/src/widgets/image.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { defineWidget } from "@vue-motion/core";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface ImageOptions extends FigureOptions {
@@ -10,7 +10,7 @@ export interface ImageOptions extends FigureOptions {
   height: number;
   preserveAspectRatio?: string;
 }
-export type ImageMixin = ImageOptions & FigureMixin;
+export type ImageIns = ImageOptions & FigureIns;
 
 const props = defineProps<ImageOptions>();
 const options = defineWidget(props);
diff --git a/packages/lib/src/widgets/index.ts b/packages/lib/src/widgets/index.ts
index 3a6eb8c..0804f3a 100644
--- a/packages/lib/src/widgets/index.ts
+++ b/packages/lib/src/widgets/index.ts
@@ -1,31 +1,33 @@
 export { widget } from "./widget";
-export type { WidgetOptions, WidgetMixin } from "./widget";
+export type { WidgetOptions, WidgetIns } from "./widget";
 export { figure } from "./figure";
-export type { FigureOptions, FigureMixin } from "./figure";
+export type { FigureOptions, FigureIns } from "./figure";
 export { default as Group } from "./group.vue";
 
 export { default as Arc } from "./arc.vue";
-export type { ArcOptions, ArcMixin } from "./arc.vue";
+export type { ArcOptions, ArcIns } from "./arc.vue";
 export { default as Line } from "./line.vue";
-export type { LineOptions, LineMixin } from "./line.vue";
+export type { LineOptions, LineIns } from "./line.vue";
 export { default as Polygon } from "./polygon.vue";
-export type { PolygonOptions, PolygonMixin } from "./polygon.vue";
+export type { PolygonOptions, PolygonIns } from "./polygon.vue";
 export { default as Rect } from "./rect.vue";
-export type { RectOptions, RectMixin } from "./rect.vue";
+export type { RectOptions, RectIns } from "./rect.vue";
 export { default as Ellipse } from "./ellipse.vue";
-export type { EllipseOptions, EllipseMixin } from "./ellipse.vue";
+export type { EllipseOptions, EllipseIns } from "./ellipse.vue";
 export { default as Circle } from "./circle.vue";
-export type { CircleOptions, CircleMixin } from "./circle.vue";
+export type { CircleOptions, CircleIns } from "./circle.vue";
 export { default as Text } from "./text.vue";
-export type { TextOptions, TextMixin } from "./text.vue";
+export type { TextOptions, TextIns } from "./text.vue";
 export { default as TextUnit } from "./text-unit.vue";
 export { default as Image } from "./image.vue";
 export type { ImageOptions } from "./image.vue";
 export { default as Mask } from "./mask.vue";
 export type { MaskOptions } from "./mask.vue";
 export { default as Path } from "./path.vue";
-export type { PathOptions, PathMixin } from "./path.vue";
+export type { PathOptions, PathIns } from "./path.vue";
 export { default as WebView } from "./webview.vue";
-export type { WebViewOptions, WebViewMixin } from "./webview.vue";
+export type { WebViewOptions, WebViewIns } from "./webview.vue";
 export { default as Video } from "./video.vue";
 export type { VideoOptions } from "./video.vue";
+export { default as Arrow } from "./arrow.vue";
+export type { ArrowOptions, ArrowIns } from "./arrow.vue";
diff --git a/packages/lib/src/widgets/line.vue b/packages/lib/src/widgets/line.vue
index 6646114..63ecc4a 100644
--- a/packages/lib/src/widgets/line.vue
+++ b/packages/lib/src/widgets/line.vue
@@ -3,14 +3,14 @@ import { defineProps, computed } from "vue";
 import { defineWidget } from "@vue-motion/core";
 import type { Vector } from "../animations/typings";
 import type { Growable } from "../animations";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface LineOptions extends FigureOptions, Growable {
   from: Vector;
   to: Vector;
 }
-export type LineMixin = LineOptions & FigureMixin;
+export type LineIns = LineOptions & FigureIns;
 
 const props = defineProps<LineOptions>();
 const options = defineWidget(props);
diff --git a/packages/lib/src/widgets/path.vue b/packages/lib/src/widgets/path.vue
index 66f392d..6ffc1f5 100644
--- a/packages/lib/src/widgets/path.vue
+++ b/packages/lib/src/widgets/path.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { defineWidget } from "@vue-motion/core";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface PathOptions extends FigureOptions {
   d: string;
 }
-export type PathMixin = PathOptions & FigureMixin;
+export type PathIns = PathOptions & FigureIns;
 
 const props = defineProps<PathOptions>();
 const options = defineWidget(props);
diff --git a/packages/lib/src/widgets/polygon.vue b/packages/lib/src/widgets/polygon.vue
index 6c6d7a1..6f1725f 100644
--- a/packages/lib/src/widgets/polygon.vue
+++ b/packages/lib/src/widgets/polygon.vue
@@ -2,13 +2,13 @@
 import { defineWidget } from "@vue-motion/core";
 import { computed, defineProps } from "vue";
 import type { Vector } from "../animations/typings";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface PolygonOptions extends FigureOptions {
   points: Vector[];
 }
-export type PolygonMixin = PolygonOptions & FigureMixin;
+export type PolygonIns = PolygonOptions & FigureIns;
 
 const props = defineProps<PolygonOptions>();
 const options = defineWidget(props);
diff --git a/packages/lib/src/widgets/rect.vue b/packages/lib/src/widgets/rect.vue
index f82f219..30ecf38 100644
--- a/packages/lib/src/widgets/rect.vue
+++ b/packages/lib/src/widgets/rect.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { defineWidget } from "@vue-motion/core";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface RectOptions extends FigureOptions {
@@ -12,7 +12,7 @@ export interface RectOptions extends FigureOptions {
   // | [number, number, number, number]
   // | [number, number, number, number, number, number, number, number]
 }
-export type RectMixin = RectOptions & FigureMixin;
+export type RectIns = RectOptions & FigureIns;
 
 const props = defineProps<RectOptions>();
 const options = defineWidget(props);
diff --git a/packages/lib/src/widgets/text.vue b/packages/lib/src/widgets/text.vue
index 103d110..a2ea42e 100644
--- a/packages/lib/src/widgets/text.vue
+++ b/packages/lib/src/widgets/text.vue
@@ -2,7 +2,7 @@
 import { defineProps } from "vue";
 import { defineWidget } from "@vue-motion/core";
 
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface TextOptions extends FigureOptions {
@@ -28,7 +28,7 @@ export interface TextOptions extends FigureOptions {
   wordSpacing?: number;
   letterSpacing?: number;
 }
-export type TextMixin = TextOptions & FigureMixin;
+export type TextIns = TextOptions & FigureIns;
 
 const props = withDefaults(defineProps<TextOptions>(), {
   borderColor: "none",
diff --git a/packages/lib/src/widgets/webview.vue b/packages/lib/src/widgets/webview.vue
index 4a710e8..e3cc060 100644
--- a/packages/lib/src/widgets/webview.vue
+++ b/packages/lib/src/widgets/webview.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { defineWidget } from "@vue-motion/core";
-import type { WidgetMixin, WidgetOptions } from "./widget";
+import type { WidgetIns, WidgetOptions } from "./widget";
 import { widget } from "./widget";
 
 export interface WebViewOptions extends WidgetOptions {
   width?: number;
   height?: number;
 }
-export type WebViewMixin = WebViewOptions & WidgetMixin;
+export type WebViewIns = WebViewOptions & WidgetIns;
 
 const props = defineProps<WebViewOptions>();
 const options = defineWidget<WebViewOptions>(props);
diff --git a/packages/lib/src/widgets/widget.ts b/packages/lib/src/widgets/widget.ts
index de8cd66..4761fe9 100644
--- a/packages/lib/src/widgets/widget.ts
+++ b/packages/lib/src/widgets/widget.ts
@@ -7,17 +7,17 @@ import { registerAnimation } from "@vue-motion/core";
 import { inject } from "vue";
 import {
   Growable,
-  GrowableMixin,
+  GrowableIns,
   type HasOpacity,
-  type HasOpacityMixin,
+  type HasOpacityIns,
   type HasScale,
-  type HasScaleMixin,
+  type HasScaleIns,
   type Positional,
-  type PositionalMixin,
+  type PositionalIns,
   type Rotatable,
-  type RotatableMixin,
+  type RotatableIns,
   type Scalable,
-  type StrokableMixin,
+  type StrokableIns,
   destory,
   grow,
   moveOnFunction,
@@ -37,7 +37,7 @@ import {
   zoomOut,
   zoomTo,
 } from "../animations";
-import type { Colorable, ColorableMixin } from "../animations/color";
+import type { Colorable, ColorableIns } from "../animations/color";
 import {
   discolorate,
   discolorateBorder,
@@ -61,17 +61,17 @@ export type WidgetOptions = Widget &
   Growable & {
     manager?: AnimationManager<any>;
   };
-export type WidgetMixin = WidgetOptions &
-  PositionalMixin &
-  RotatableMixin &
-  HasScaleMixin &
-  StrokableMixin &
-  HasOpacityMixin &
-  ColorableMixin &
-  GrowableMixin & {
+export type WidgetIns = WidgetOptions &
+  PositionalIns &
+  RotatableIns &
+  HasScaleIns &
+  StrokableIns &
+  HasOpacityIns &
+  ColorableIns &
+  GrowableIns & {
     parallel: (
       ...animations: ((
-        widget: WidgetMixin & { manager?: AnimationManager<any> },
+        widget: WidgetIns & { manager?: AnimationManager<any> },
       ) => void)[]
     ) => void;
     animate: <A>(
@@ -94,16 +94,16 @@ export interface Animatable {
   ) => void;
   once: (animation: (target: Widget) => void) => void;
   delay: (duration: number) => void;
-  parallel: (...animations: ((widget: WidgetMixin) => void)[]) => void;
+  parallel: (...animations: ((widget: WidgetIns) => void)[]) => void;
 }
 
 export function widget(options: WidgetOptions) {
   const props = {} as {
     transform?: string;
     style?: string;
-  } & WidgetMixin;
+  } & WidgetIns;
 
-  const transform = [];
+  const transform: string[] = [];
   if (options.x || options.y)
     transform.push(`translate(${options.x ?? 0},${options.y ?? 0})`);
   if (options.scaleX || options.scaleY)
@@ -368,14 +368,14 @@ export function widget(options: WidgetOptions) {
   registerAnimation<Widget>("delay", (duration: number) => {
     return (manager) => manager.delay(duration);
   });
-  registerAnimation<WidgetMixin>(
+  registerAnimation<WidgetIns>(
     "parallel",
     (
       ...animations: ((
-        widget: WidgetMixin & { manager: AnimationManager<any> },
+        widget: WidgetIns & { manager: AnimationManager<any> },
       ) => void)[]
     ) => {
-      return (manager: AnimationManager<WidgetMixin>) => {
+      return (manager: AnimationManager<WidgetIns>) => {
         return manager.parallel(...animations);
       };
     },
diff --git a/test/src/App.vue b/test/src/App.vue
index b604173..62ef517 100644
--- a/test/src/App.vue
+++ b/test/src/App.vue
@@ -1,17 +1,21 @@
 <script setup lang="ts">
 import { usePlayer, useWidget } from "@vue-motion/core";
 import {
-  LineMixin,
+  LineIns,
   Motion,
   Rect,
-  type RectMixin,
+  type RectIns,
   easeInOutCirc,
   Line,
+  Arrow,
+  ArrowIns,
 } from "@vue-motion/lib";
 import { onMounted } from "vue";
+import { NumberPlane } from "@vue-motion/extension-math";
 
-const rect = useWidget<RectMixin>();
-const line = useWidget<LineMixin>();
+const rect = useWidget<RectIns>();
+const line = useWidget<LineIns>();
+const arrow = useWidget<ArrowIns>();
 
 const { play } = usePlayer();
 
@@ -43,6 +47,7 @@ onMounted(() => {
   );
 
   line.grow();
+  arrow.grow();
   play();
 });
 </script>
@@ -51,5 +56,7 @@ onMounted(() => {
   <Motion :width="1600" :height="900">
     <Rect :widget="rect" :width="100" :height="100" />
     <Line :widget="line" :from="[0, 0]" :to="[200, 200]" />
+    <Arrow :from="[0, 0]" :to="[-200, -200]" :widget="arrow" />
+    <NumberPlane :domain-x="[-5, 4]" :domain-y="[-3, 2]" :grid="true" />
   </Motion>
 </template>
diff --git a/test/src/Other.vue b/test/src/Other.vue
index c044281..914c444 100644
--- a/test/src/Other.vue
+++ b/test/src/Other.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { usePlayer, useWidget } from "@vue-motion/core";
-import { Motion, Rect, type RectMixin, easeInOutCirc } from "@vue-motion/lib";
+import { Motion, Rect, type RectIns, easeInOutCirc } from "@vue-motion/lib";
 import { onMounted } from "vue";
 
-const rect = useWidget<RectMixin>();
+const rect = useWidget<RectIns>();
 
 const { play } = usePlayer();
 
diff --git a/tsconfig.json b/tsconfig.json
index 5296fb8..1607666 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,5 +21,5 @@
     "isolatedModules": true,
     "skipLibCheck": true
   },
-  "include": ["packages/*/src", "extensions/*/src"]
+  "include": ["packages/*", "extensions/*"]
 }