diff --git a/examples/example/src/app.component.ts b/examples/example/src/app.component.ts
index a6d4650..a7c4514 100644
--- a/examples/example/src/app.component.ts
+++ b/examples/example/src/app.component.ts
@@ -13,7 +13,7 @@ import { playerComponent } from "player.component";
 type Mutable = {} & DisplayObjectMutable<Container>;
 
 export const appComponent: AsyncComponent<unknown, Mutable> = async () => {
-  global.$setVisualHitboxes(false);
+  global.$setVisualHitBoxes(true);
 
   const $container = await container({ label: "app" });
 
@@ -58,6 +58,10 @@ export const appComponent: AsyncComponent<unknown, Mutable> = async () => {
   const $player = await playerComponent();
   await $player.setPosition({ x: 500, y: 1000 });
 
+  setInterval(() => {
+    $player.doSomething();
+  }, 50);
+
   $world.add($player, $plane);
   $container.add($world);
 
diff --git a/examples/example/src/player.component.ts b/examples/example/src/player.component.ts
index c416c10..fbf6aac 100644
--- a/examples/example/src/player.component.ts
+++ b/examples/example/src/player.component.ts
@@ -13,7 +13,9 @@ import {
 
 type Props = {};
 
-type Mutable = {} & DisplayObjectMutable<Container>;
+type Mutable = {
+  doSomething: () => void;
+} & DisplayObjectMutable<Container>;
 
 export const playerComponent: AsyncComponent<Props, Mutable> = async () => {
   let $sprite;
@@ -66,5 +68,9 @@ export const playerComponent: AsyncComponent<Props, Mutable> = async () => {
   });
   await $player.setBody($body);
 
-  return $player.getComponent(playerComponent);
+  return $player.getComponent(playerComponent, {
+    doSomething: () => {
+      console.log("ABC12334");
+    },
+  });
 };
diff --git a/examples/example/tsconfig.json b/examples/example/tsconfig.json
index 2ac3b7c..14fc051 100644
--- a/examples/example/tsconfig.json
+++ b/examples/example/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "moduleResolution": "node",
-    "module": "es2023",
+    "module": "es2022",
     "target": "es2022",
     "esModuleInterop": true,
     "sourceMap": false,
diff --git a/examples/example/vite.config.ts b/examples/example/vite.config.ts
index c82933b..90da464 100644
--- a/examples/example/vite.config.ts
+++ b/examples/example/vite.config.ts
@@ -5,6 +5,7 @@ import { plugin } from "@tulib/vite-tulip-plugin";
 export default defineConfig({
   server: {
     port: 4194,
+    open: true,
   },
   plugins: [tsconfigPaths(), plugin()],
   publicDir: "assets",
diff --git a/src/components/core/animated-sprite.component.ts b/src/components/core/animated-sprite.component.ts
index 64e6674..c937d97 100644
--- a/src/components/core/animated-sprite.component.ts
+++ b/src/components/core/animated-sprite.component.ts
@@ -76,9 +76,12 @@ export const animatedSprite: AsyncComponent<
     $animatedSprite,
     emptyMutable,
   );
-  //
+
+  const $$getRaw = displayObjectMutable.$getRaw;
+  const $$destroy = displayObjectMutable.$destroy;
+
   const $getRaw = (): AnimatedSpriteProps => ({
-    ...displayObjectMutable.$getRaw(),
+    ...$$getRaw(),
     spriteSheet: $spriteSheet,
     animation: $currentAnimation,
     frame: $frame,
@@ -88,24 +91,20 @@ export const animatedSprite: AsyncComponent<
   const $destroy = () => {
     //remove child first
     $animatedSprite?.parent?.removeChild($animatedSprite);
-    displayObjectMutable.$destroy();
+    $$destroy();
     //destroy pixi graphics
     $animatedSprite.destroy();
-    $mutable.getFather = null;
+
+    displayObjectMutable.getFather = () => null;
   };
   {
     if ($frame !== undefined) setFrame($frame);
     if ($playStatus !== undefined) setPlayStatus($playStatus);
   }
 
-  const getComponent = (component) => {
-    emptyMutable.getComponent(component);
-    return $mutable;
-  };
-
-  const $mutable: InternalMutable<AnimatedSpriteMutable, false> = {
-    ...displayObjectMutable,
-
+  return displayObjectMutable.getComponent<
+    InternalMutable<AnimatedSpriteMutable, false>
+  >(animatedSprite as any, {
     getDisplayObject: () => $animatedSprite,
 
     setSpriteSheet,
@@ -120,16 +119,11 @@ export const animatedSprite: AsyncComponent<
     setPlayStatus,
     getPlayStatus,
 
-    //@ts-ignore
-    getComponent,
-
     getProps: () => $props as any,
 
     $destroy,
     $getRaw,
 
     $mutable: false,
-  };
-
-  return $mutable;
+  });
 };
diff --git a/src/components/core/container.component.ts b/src/components/core/container.component.ts
index dcc0f5a..e83ac7b 100644
--- a/src/components/core/container.component.ts
+++ b/src/components/core/container.component.ts
@@ -19,42 +19,45 @@ export const container: AsyncComponent<
 > = async (originalProps = {}) => {
   const $props = structuredClone(originalProps);
 
-  const container = new PIXI.Container() as Container;
+  const $container = new PIXI.Container() as Container;
   const emptyMutable = empty(originalProps);
 
   let childList: DisplayObjectMutable<any>[] = [];
 
   const displayObjectMutable = await initDisplayObjectMutable<Container>(
-    container,
+    $container,
     emptyMutable,
   );
 
+  const $$destroy = displayObjectMutable.$destroy;
+  const $$setBody = displayObjectMutable.setBody;
+
   const $destroy = () => {
     //remove child first
-    container?.parent?.removeChild(container);
-    displayObjectMutable.$destroy();
+    $container?.parent?.removeChild($container);
+    $$destroy();
     //destroy pixi container
-    container.destroy();
-    $mutable.getFather = null;
+    $container.destroy();
+    displayObjectMutable.getFather = () => null;
 
     for (const childComponent of childList) childComponent.$destroy();
   };
 
   const add = (...displayObjectsMutable: DisplayObjectMutable<any>[]) => {
-    for (const displayObjectMutable of displayObjectsMutable) {
-      displayObjectMutable.getFather = () => $mutable;
+    for (const currentDisplayObjectMutable of displayObjectsMutable) {
+      currentDisplayObjectMutable.getFather = () => displayObjectMutable;
 
-      container.addChild(displayObjectMutable.getDisplayObject());
-      childList.push(displayObjectMutable);
-      global.$addComponent(displayObjectMutable);
+      $container.addChild(currentDisplayObjectMutable.getDisplayObject());
+      childList.push(currentDisplayObjectMutable);
+      global.$addComponent(currentDisplayObjectMutable);
     }
   };
 
   const remove = (...displayObjectsMutables: DisplayObjectMutable<any>[]) => {
     displayObjectsMutables.forEach((displayObjectMutable) => {
-      displayObjectMutable.getFather = null;
+      displayObjectMutable.getFather = () => null;
 
-      container.removeChild(displayObjectMutable.getDisplayObject());
+      $container.removeChild(displayObjectMutable.getDisplayObject());
       childList = childList.filter((child) => child !== displayObjectMutable);
       global.$removeComponent(displayObjectMutable);
     });
@@ -63,31 +66,26 @@ export const container: AsyncComponent<
   const getChildren = () => childList;
 
   const setBody = async (body: BodyMutable) => {
-    await displayObjectMutable.setBody(body);
+    await $$setBody(body);
 
     if (global.$isVisualHitBoxes()) {
       const shapes = body.$getShapes();
-      await Promise.all(
-        shapes.map(async ({ props }) => add(await getVisualShape(props))),
+      add(
+        ...(await Promise.all(
+          shapes.map(async ({ props }) => await getVisualShape(props)),
+        )),
       );
     }
   };
 
-  const getComponent = (component) => {
-    emptyMutable.getComponent(component);
-    return $mutable;
-  };
-
-  const $mutable: InternalMutable<ContainerMutable, false> = {
-    ...displayObjectMutable,
+  return displayObjectMutable.getComponent<
+    InternalMutable<ContainerMutable, false>
+  >(container as any, {
     //
     add,
     remove,
     getChildren,
 
-    //@ts-ignore
-    getComponent,
-
     setBody,
 
     getProps: () => $props as any,
@@ -95,6 +93,5 @@ export const container: AsyncComponent<
     $destroy,
 
     $mutable: false,
-  };
-  return $mutable;
+  });
 };
diff --git a/src/components/core/empty.component.ts b/src/components/core/empty.component.ts
index 6f32c67..df23e21 100644
--- a/src/components/core/empty.component.ts
+++ b/src/components/core/empty.component.ts
@@ -102,8 +102,12 @@ export const empty = <Data>(
     initialData: $data,
   });
 
-  const getComponent = (component) => {
+  const getComponent = (component: Function, mutable: Object = {}) => {
     $componentName = component.name;
+
+    for (const functionName of Object.keys(mutable))
+      $mutable[functionName] = mutable[functionName];
+
     return $mutable;
   };
   const $getComponentName = () => $componentName || null;
diff --git a/src/components/core/graphics.component.test.ts b/src/components/core/graphics.component.test.ts
index 2f5b7fe..5cc72f4 100644
--- a/src/components/core/graphics.component.test.ts
+++ b/src/components/core/graphics.component.test.ts
@@ -177,7 +177,7 @@ describe("components", () => {
       test("$destroy(...)", () => {
         expect($polygon.getFather()).toStrictEqual($container);
         $polygon.$destroy();
-        expect($polygon.getFather).toStrictEqual(null);
+        expect($polygon.getFather()).toStrictEqual(null);
       });
     });
   });
diff --git a/src/components/core/graphics.component.ts b/src/components/core/graphics.component.ts
index 0e333ff..4ed37d9 100644
--- a/src/components/core/graphics.component.ts
+++ b/src/components/core/graphics.component.ts
@@ -37,12 +37,12 @@ export const graphics: AsyncComponent<
   let $width: number;
   let $height: number;
 
-  const graphics = new PIXI.Graphics() as Graphics;
+  const $graphics = new PIXI.Graphics() as Graphics;
 
   const emptyMutable = empty(originalProps);
 
   const displayObjectMutable = await initDisplayObjectMutable<Graphics>(
-    graphics,
+    $graphics,
     emptyMutable,
   );
 
@@ -56,9 +56,9 @@ export const graphics: AsyncComponent<
     $height = undefined;
   };
 
-  const getColor = () => graphics.tint;
+  const getColor = () => $graphics.tint;
   const setColor = (color: number) => {
-    graphics.tint = color;
+    $graphics.tint = color;
   };
 
   const setPolygon = (polygon: number[]) => {
@@ -67,8 +67,8 @@ export const graphics: AsyncComponent<
     $type = GraphicType.POLYGON;
     $polygon = polygon;
 
-    graphics.clear();
-    graphics.poly(polygon).fill({ color: 0xffffff });
+    $graphics.clear();
+    $graphics.poly(polygon).fill({ color: 0xffffff });
   };
   const setCircle = (radius: number) => {
     $clear();
@@ -76,8 +76,8 @@ export const graphics: AsyncComponent<
     $type = GraphicType.CIRCLE;
     $radius = radius;
 
-    graphics.clear();
-    graphics.circle(0, 0, radius).fill({ color: 0xffffff });
+    $graphics.clear();
+    $graphics.circle(0, 0, radius).fill({ color: 0xffffff });
   };
   const setCapsule = (length: number, radius: number) => {
     $clear();
@@ -86,8 +86,8 @@ export const graphics: AsyncComponent<
     $length = length;
     $radius = radius;
 
-    graphics.clear();
-    graphics
+    $graphics.clear();
+    $graphics
       .rect(-length / 2, -radius, length, 2 * radius)
       .circle(-length / 2, 0, radius)
       .circle(length / 2, 0, radius)
@@ -100,8 +100,8 @@ export const graphics: AsyncComponent<
     $width = width;
     $height = height;
 
-    graphics.clear();
-    graphics
+    $graphics.clear();
+    $graphics
       .poly([-width / 2, height / 2, width / 2, height / 2, 0, -height / 2])
       .fill({ color: 0xffffff });
   };
@@ -112,32 +112,28 @@ export const graphics: AsyncComponent<
   const getWidth = () => $width;
   const getHeight = () => $height;
 
-  const $getRaw = (): GraphicsProps => {
-    return {
-      ...displayObjectMutable.$getRaw(),
-      color: getColor(),
-      type: $type,
-
-      polygon: $polygon,
-      radius: $radius,
-      length: $length,
-      width: $width,
-      height: $height,
-    };
-  };
+  const $$destroy = displayObjectMutable.$destroy;
+  const $$getRaw = displayObjectMutable.$getRaw;
 
-  const getComponent = (component) => {
-    emptyMutable.getComponent(component);
-    return $mutable;
-  };
+  const $getRaw = (): GraphicsProps => ({
+    ...$$getRaw(),
+    color: getColor(),
+    type: $type,
+
+    polygon: $polygon,
+    radius: $radius,
+    length: $length,
+    width: $width,
+    height: $height,
+  });
 
   const $destroy = () => {
     //remove child first
-    graphics?.parent?.removeChild(graphics);
-    displayObjectMutable.$destroy();
+    $graphics?.parent?.removeChild($graphics);
+    $$destroy();
     //destroy pixi graphics
-    graphics.destroy();
-    $mutable.getFather = null;
+    $graphics.destroy();
+    displayObjectMutable.getFather = () => null;
   };
   {
     color !== undefined && setColor(color);
@@ -159,10 +155,9 @@ export const graphics: AsyncComponent<
     }
   }
 
-  const $mutable: InternalMutable<GraphicsMutable, false> = {
-    // container
-    ...displayObjectMutable,
-
+  return displayObjectMutable.getComponent<
+    InternalMutable<GraphicsMutable, false>
+  >(graphics as any, {
     getType,
 
     // graphics
@@ -182,14 +177,9 @@ export const graphics: AsyncComponent<
 
     getProps: () => $props as any,
 
-    //@ts-ignore
-    getComponent,
-
     $getRaw,
     $destroy,
 
     $mutable: false,
-  };
-
-  return $mutable;
+  });
 };
diff --git a/src/components/core/sprite.component.test.ts b/src/components/core/sprite.component.test.ts
index a5443f9..d57f999 100644
--- a/src/components/core/sprite.component.test.ts
+++ b/src/components/core/sprite.component.test.ts
@@ -74,7 +74,7 @@ describe("components", () => {
         $sprite.$destroy();
         expect($sprite.getDisplayObject().destroyed).toBe(true);
         expect($sprite.getDisplayObject().parent).toBe(null);
-        expect($sprite.getFather).toBe(null);
+        expect($sprite.getFather()).toBe(null);
       });
     });
   });
diff --git a/src/components/core/sprite.component.ts b/src/components/core/sprite.component.ts
index 67935d2..54557da 100644
--- a/src/components/core/sprite.component.ts
+++ b/src/components/core/sprite.component.ts
@@ -43,29 +43,26 @@ export const sprite: AsyncComponent<SpriteProps, SpriteMutable, false> = async (
     $sprite.texture = await $getTexture(texture);
   };
 
-  const getComponent = (component) => {
-    emptyMutable.getComponent(component);
-    return $mutable;
-  };
+  const $$getRaw = displayObjectMutable.$getRaw;
+  const $$destroy = displayObjectMutable.$destroy;
 
   const $getRaw = (): SpriteProps => ({
-    ...displayObjectMutable.$getRaw(),
+    ...$$getRaw(),
     texture: $texture,
   });
 
   const $destroy = () => {
     //remove child first
     $sprite?.parent?.removeChild($sprite);
-    displayObjectMutable.$destroy();
+    $$destroy();
     //destroy pixi graphics
     $sprite.destroy();
-    $mutable.getFather = null;
+    displayObjectMutable.getFather = () => null;
   };
 
-  const $mutable: InternalMutable<SpriteMutable, false> = {
-    // container
-    ...displayObjectMutable,
-
+  return displayObjectMutable.getComponent<
+    InternalMutable<SpriteMutable, false>
+  >(sprite as any, {
     getDisplayObject: () => $sprite,
 
     // sprite
@@ -73,14 +70,9 @@ export const sprite: AsyncComponent<SpriteProps, SpriteMutable, false> = async (
 
     getProps: () => $props as any,
 
-    //@ts-ignore
-    getComponent,
-
     $destroy,
     $getRaw,
 
     $mutable: false,
-  };
-
-  return $mutable;
+  });
 };
diff --git a/src/components/core/world.component.ts b/src/components/core/world.component.ts
index fada488..5b61505 100644
--- a/src/components/core/world.component.ts
+++ b/src/components/core/world.component.ts
@@ -100,18 +100,19 @@ export const world: AsyncComponent<WorldProps, WorldMutable, false> = async (
 
   const $getWorld = () => $world;
 
-  const mutable: InternalMutable<WorldMutable, false> = {
-    ...componentMutable,
-    add,
-    remove,
-    setPhysicsEnabled,
-    getPhysicsEnabled,
-
-    getProps: () => $props as any,
-
-    $destroy,
-    $getWorld,
-  };
-
-  return mutable;
+  return componentMutable.getComponent<InternalMutable<WorldMutable, false>>(
+    world as any,
+    {
+      ...componentMutable,
+      add,
+      remove,
+      setPhysicsEnabled,
+      getPhysicsEnabled,
+
+      getProps: () => $props as any,
+
+      $destroy,
+      $getWorld,
+    },
+  );
 };
diff --git a/src/components/prefabs/player-2d.component.ts b/src/components/prefabs/player-2d.component.ts
index edaba0e..0d76772 100644
--- a/src/components/prefabs/player-2d.component.ts
+++ b/src/components/prefabs/player-2d.component.ts
@@ -1,11 +1,6 @@
 import { container } from "../";
-import {
-  AsyncComponent,
-  ContainerMutable,
-  ContainerProps,
-  Direction,
-} from "../../types";
-import { DisplayObjectEvent, Event } from "../../enums";
+import { AsyncComponent, ContainerMutable, ContainerProps } from "../../types";
+import { DisplayObjectEvent, Event, Direction } from "../../enums";
 import { global } from "../../global";
 import { degreesToRadians } from "../../utils";
 
diff --git a/src/enums/direction.enum.ts b/src/enums/direction.enum.ts
new file mode 100644
index 0000000..545ab9e
--- /dev/null
+++ b/src/enums/direction.enum.ts
@@ -0,0 +1,6 @@
+export enum Direction {
+  LEFT,
+  UP,
+  RIGHT,
+  DOWN,
+}
diff --git a/src/enums/index.ts b/src/enums/index.ts
index f7b8d0e..611682e 100644
--- a/src/enums/index.ts
+++ b/src/enums/index.ts
@@ -4,3 +4,4 @@ export * from "./events.enum";
 export * from "./animated-sprite.enum";
 export * from "./graphics.enum";
 export * from "./sound.enum";
+export * from "./direction.enum";
diff --git a/src/types/component.types.ts b/src/types/component.types.ts
index d93f115..a762e53 100644
--- a/src/types/component.types.ts
+++ b/src/types/component.types.ts
@@ -57,6 +57,7 @@ export type ComponentMutable<Props extends any = {}, Data = unknown> = {
 
   getComponent?: <Mutable>(
     component: Component<any, Mutable> | AsyncComponent<any, Mutable>,
+    mutable?: Object,
   ) => InternalMutable<Mutable, true>;
   getFather: () => ComponentMutable;
 
diff --git a/src/types/point.types.ts b/src/types/point.types.ts
index 2965a4f..47fed8a 100644
--- a/src/types/point.types.ts
+++ b/src/types/point.types.ts
@@ -1,10 +1,3 @@
 export type Point = { x: number; y: number };
 
 export type Point3d = { z: number } & Point;
-
-export enum Direction {
-  LEFT,
-  UP,
-  RIGHT,
-  DOWN,
-}
diff --git a/src/utils/display-object.utils.ts b/src/utils/display-object.utils.ts
index 0a93f77..f049676 100644
--- a/src/utils/display-object.utils.ts
+++ b/src/utils/display-object.utils.ts
@@ -17,30 +17,40 @@ export const initDisplayObjectMutable = async <
 ): Promise<DisplayObjectMutable<DisplayObject>> => {
   let $isRemoved = false;
 
+  const $$setLabel = componentMutable.setLabel;
+  const $$setPosition = componentMutable.setPosition;
+  const $$getPosition = componentMutable.getPosition;
+  const $$setPositionX = componentMutable.setPositionX;
+  const $$setPositionY = componentMutable.setPositionY;
+  const $$setAngle = componentMutable.setAngle;
+  const $$getAngle = componentMutable.getAngle;
+  const $$destroy = componentMutable.$destroy;
+  const $$getRaw = componentMutable.$getRaw;
+
   const setLabel = (label: string) => {
-    componentMutable.setLabel(label);
+    $$setLabel(label);
     displayObject.label = label;
   };
 
   const setPosition = async (data) => {
-    await componentMutable.setPosition(data);
+    await $$setPosition(data);
     displayObject.position = await getValueMutableFunction<Point>(
       data,
-      componentMutable.getPosition(),
+      $$getPosition(),
     );
   };
   const setPositionX = async (data) => {
-    await componentMutable.setPositionX(data);
+    await $$setPositionX(data);
     displayObject.position.x = await getValueMutableFunction<number>(
       data,
-      componentMutable.getPosition().x,
+      $$getPosition().x,
     );
   };
   const setPositionY = async (data) => {
-    await componentMutable.setPositionY(data);
+    await $$setPositionY(data);
     displayObject.position.y = await getValueMutableFunction<number>(
       data,
-      componentMutable.getPosition().y,
+      $$getPosition().y,
     );
   };
 
@@ -92,31 +102,26 @@ export const initDisplayObjectMutable = async <
       data,
       displayObject.angle,
     );
-    await componentMutable.setAngle(displayObject.angle);
+    await $$setAngle(displayObject.angle);
   };
-  const getAngle = () => componentMutable.getAngle() || displayObject.angle;
+  const getAngle = () => $$getAngle() || displayObject.angle;
 
   const setEventMode = async (data) => {
     displayObject.eventMode = await getValueMutableFunction<EventMode>(
       data,
       displayObject.eventMode as EventMode,
     );
-    await componentMutable.setAngle(displayObject.angle);
+    await $$setAngle(displayObject.angle);
   };
   const getEventMode = () => displayObject.eventMode as EventMode;
 
   const $destroy = () => {
-    componentMutable.getFather = null;
-
-    componentMutable.$destroy();
-  };
+    componentMutable.getFather = () => null;
 
-  const getComponent = (component) => {
-    componentMutable.getComponent(component);
-    return $mutable;
+    $$destroy();
   };
   const $getRaw = (): DisplayObjectProps => ({
-    ...componentMutable.$getRaw(),
+    ...$$getRaw(),
     pivot: getPivot(),
     visible: getVisible(),
     zIndex: getZIndex(),
@@ -165,48 +170,45 @@ export const initDisplayObjectMutable = async <
     });
   }
 
-  const $mutable: DisplayObjectMutable<DisplayObject> = {
-    ...componentMutable,
-
-    getDisplayObject: (): DisplayObject => displayObject,
-
-    setLabel,
-    //position
-    setPosition,
-    setPositionX,
-    setPositionY,
-
-    //pivot
-    setPivot,
-    setPivotX,
-    setPivotY,
-    getPivot,
-    //visible
-    setVisible,
-    getVisible,
-    //zIndex
-    setZIndex,
-    getZIndex,
-    //alpha
-    setAlpha,
-    getAlpha,
-    //angle
-    setAngle,
-    getAngle,
-    //eventMode
-    setEventMode,
-    getEventMode,
-
-    //events
-    on,
-
-    //@ts-ignore
-    getComponent,
-
-    $destroy,
-    $getRaw,
-    $mutable: false,
-  };
-
-  return $mutable;
+  const initDisplayObject = () => {};
+  return componentMutable.getComponent<DisplayObjectMutable<DisplayObject>>(
+    initDisplayObject as any,
+    {
+      getDisplayObject: (): DisplayObject => displayObject,
+
+      setLabel,
+      //position
+      setPosition,
+      setPositionX,
+      setPositionY,
+
+      //pivot
+      setPivot,
+      setPivotX,
+      setPivotY,
+      getPivot,
+      //visible
+      setVisible,
+      getVisible,
+      //zIndex
+      setZIndex,
+      getZIndex,
+      //alpha
+      setAlpha,
+      getAlpha,
+      //angle
+      setAngle,
+      getAngle,
+      //eventMode
+      setEventMode,
+      getEventMode,
+
+      //events
+      on,
+
+      $destroy,
+      $getRaw,
+      $mutable: false,
+    },
+  );
 };