diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c431dc6..f9a17903 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,12 +5,17 @@
 - Added circle and (rotated) ellipse collision shapes.
 - Added an ellipse component.
 - Circle area is no longer a box.
+- Added a fake cursor API
 
-# v4000.0.0 and v3001.0.0
+  ```js
+  const myCursor = add([fakeMouse(), sprite("kat"), pos(100, 100)]);
+
+  myCursor.press(); // trigger onClick events if the mouse is over
+  myCursor.release();
+  myCursor.move(vec2(100, 200)); // move as your wish
+  ```
 
-This version is a double release, with a lot of new features and breaking
-changes. v3001 release are focused in backward compatibility with v3000 with the
-features of v4000, while v4000 will have the most features and breaking changes.
+# v4000.0.0 and v3001.0.0
 
 ## Input
 
@@ -75,16 +80,6 @@ features of v4000, while v4000 will have the most features and breaking changes.
   });
   ```
 
-- added a fake cursor API (**v4000**)
-
-  ```js
-  const myCursor = add([fakeMouse(), sprite("kat"), pos(100, 100)]);
-
-  myCursor.press(); // trigger onClick events if the mouse is over
-  myCursor.release();
-  myCursor.move(vec2(100, 200)); // move as your wish
-  ```
-
 ## Physics
 
 - added effector components: `areaEffector()`, `buoyancyEffector()`,
@@ -277,17 +272,14 @@ features of v4000, while v4000 will have the most features and breaking changes.
 
 ## Debug mode
 
-- added `outline()`, `shader()`, and `area()` properties to `debug.inspect`
-  (**v3001/4000**)
+- added `outline()`, `shader()`, and `area()` properties to `debug.inspect`.
 - added `KAPLAYOpt.debugKey` for customizing the key used to toggle debug mode.
-  (**v3001/4000**)
 
   ```js
   kaplay({
       debugKey: "l",
   });
   ```
-
 - added compatibility with custom properties in debug mode
 
   ```js
@@ -305,11 +297,10 @@ features of v4000, while v4000 will have the most features and breaking changes.
   // see the custom properties in debug mode
   debug.inspect = true;
   ```
+- Now `debug.log()` accepts multiple argument of any type, like `console.log()`.
 
 ## Helpers
 
-> All changes applies for both v3001 and v4000
-
 - added `getSceneName()` to get the current scene name
 - added `Color.toArray()` to convert a color to an array
 - added global raycast function and raycast method to level
@@ -325,12 +316,18 @@ features of v4000, while v4000 will have the most features and breaking changes.
 
 ## TypeScript
 
-- now you can type `get()` with a type parameter and passing component types.
+- Now you can type `get()` with a type parameter and passing component types.
   (**v4000**)
 
   ```ts
   const player = get<BodyComp>("player");
   ```
+- Now `Key` also accepts a string as an acceptable value.
+- Now `text()` component doesn't require to pass a string.
+- Now `camScale()` and `camPos()` accept only 1 number as parameter.
+- Now `shake()` can be called without args.
+- Now `loadShader()` and `loadShaderURL()` accepts null for unused parameters.
+- Now `RectCompOpt` accepts a array of numbers for `radius`.
 
 ## Deprecations
 
diff --git a/examples/add.js b/examples/add.js
index 46c32df4..e124edb6 100644
--- a/examples/add.js
+++ b/examples/add.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Adding game objects to screen
 
 // Start a KAPLAY game
diff --git a/examples/ai.js b/examples/ai.js
index 59e72117..efdf2a61 100644
--- a/examples/ai.js
+++ b/examples/ai.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Use state() component to handle basic AI
 
 // Start kaboom
diff --git a/examples/animation.js b/examples/animation.js
index 27d6a9c2..cb041e03 100644
--- a/examples/animation.js
+++ b/examples/animation.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Start kaboom
 kaplay();
 
@@ -174,7 +176,7 @@ console.log(JSON.stringify(serializeAnimation(curvingBean, "root"), "", 2));
 
 /*onDraw(() => {
     drawCurve(t => evaluateCatmullRom(
-        vec2(200, 400),
+        vec2(200, 400),\
         vec2(250, 500),
         vec2(300, 400),
         vec2(350, 500), t), { color: RED })
diff --git a/examples/audio.js b/examples/audio.js
index 9a1426b0..3ed2ec00 100644
--- a/examples/audio.js
+++ b/examples/audio.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // audio playback & control
 
 kaplay({
diff --git a/examples/bench.js b/examples/bench.js
index efefe2ce..34e54ad5 100644
--- a/examples/bench.js
+++ b/examples/bench.js
@@ -1,3 +1,5 @@
+// @ts-config
+
 // bench marking sprite rendering performance
 
 kaplay();
diff --git a/examples/binding.js b/examples/binding.js
index 11b72d1a..23a57cea 100644
--- a/examples/binding.js
+++ b/examples/binding.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     buttons: {
         "jump": {
diff --git a/examples/burp.js b/examples/burp.js
index 5f50ffd4..d1865f20 100644
--- a/examples/burp.js
+++ b/examples/burp.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Start the game in burp mode
 kaplay({
     burp: true,
diff --git a/examples/button.js b/examples/button.js
index cf35738d..ef441b91 100644
--- a/examples/button.js
+++ b/examples/button.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Simple Button UI
 
 kaplay({
@@ -16,6 +18,7 @@ function addButton(txt, p, f) {
         scale(1),
         anchor("center"),
         outline(4),
+        color(0, 0, 0),
     ]);
 
     // add a child object that displays the text
diff --git a/examples/camera.js b/examples/camera.js
index 23beb567..c1bf9974 100644
--- a/examples/camera.js
+++ b/examples/camera.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Adjust camera / viewport
 
 // Start game
@@ -77,7 +79,8 @@ onKeyDown("right", () => player.move(SPEED, 0));
 
 let score = 0;
 
-// Add a ui layer with fixed() component to make the object not affected by camera
+// Add a ui layer with fixed() component to make the object
+// not affected by camera
 const ui = add([
     fixed(),
 ]);
@@ -94,6 +97,7 @@ ui.add([
 ]);
 
 onClick(() => {
-    // Use toWorld() to transform a screen-space coordinate (like mousePos()) to the world-space coordinate, which has the camera transform applied
+    // Use toWorld() to transform a screen-space coordinate (like mousePos()) to
+    // the world-space coordinate, which has the camera transform applied
     addKaboom(toWorld(mousePos()));
 });
diff --git a/examples/children.js b/examples/children.js
index 14a3d0cb..0b9bfc44 100644
--- a/examples/children.js
+++ b/examples/children.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "/sprites/bean.png");
diff --git a/examples/collision.js b/examples/collision.js
index 3af2a6b9..3d1acb52 100644
--- a/examples/collision.js
+++ b/examples/collision.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Collision handling
 
 // Start kaboom
diff --git a/examples/collisionshapes.js b/examples/collisionshapes.js
index d7d042a8..907506c2 100644
--- a/examples/collisionshapes.js
+++ b/examples/collisionshapes.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 setGravity(300);
diff --git a/examples/component.js b/examples/component.js
index a8bdc987..be542f52 100644
--- a/examples/component.js
+++ b/examples/component.js
@@ -1,3 +1,4 @@
+// @ts-check
 // Custom component
 
 kaplay();
diff --git a/examples/concert.js b/examples/concert.js
index 219621fa..ae0d674a 100644
--- a/examples/concert.js
+++ b/examples/concert.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // bean is holding a concert to celebrate kaboom2000!
 
 kaplay({
diff --git a/examples/confetti.js b/examples/confetti.js
index b4e04d99..16d35b19 100644
--- a/examples/confetti.js
+++ b/examples/confetti.js
@@ -1,3 +1,7 @@
+// @ts-check
+
+kaplay();
+
 const DEF_COUNT = 80;
 const DEF_GRAVITY = 800;
 const DEF_AIR_DRAG = 0.9;
@@ -9,8 +13,6 @@ const DEF_SPIN = [2, 8];
 const DEF_SATURATION = 0.7;
 const DEF_LIGHTNESS = 0.6;
 
-kaplay();
-
 add([
     text("click for confetti"),
     anchor("top"),
diff --git a/examples/curves.js b/examples/curves.js
index 2c1ce40e..2bddb979 100644
--- a/examples/curves.js
+++ b/examples/curves.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 function addPoint(c, ...args) {
diff --git a/examples/dialog.js b/examples/dialog.js
index 91d7a68e..7653ec8c 100644
--- a/examples/dialog.js
+++ b/examples/dialog.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Simple dialogues with character avatars
 
 kaplay({
diff --git a/examples/doublejump.js b/examples/doublejump.js
index 05026a34..b68a4f9d 100644
--- a/examples/doublejump.js
+++ b/examples/doublejump.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     background: [141, 183, 255],
 });
@@ -37,7 +39,7 @@ function spin(speed = 1200) {
 
 scene("game", () => {
     const score = add([
-        text("0", 24),
+        text("0", { size: 24 }),
         pos(24, 24),
         { value: 0 },
     ]);
@@ -111,7 +113,7 @@ scene("game", () => {
         destroy(c);
         play("coin");
         score.value += 1;
-        score.text = score.value;
+        score.text = score.value.toString();
         genCoin(c.idx);
     });
 
@@ -161,7 +163,7 @@ scene("game", () => {
     const timer = add([
         anchor("topright"),
         pos(width() - 24, 24),
-        text(timeLeft),
+        text(timeLeft.toString()),
     ]);
 
     onUpdate(() => {
diff --git a/examples/drag.js b/examples/drag.js
index 5582c3d3..74a27d1a 100644
--- a/examples/drag.js
+++ b/examples/drag.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Drag & drop interaction
 
 kaplay();
diff --git a/examples/draw.js b/examples/draw.js
index f102348f..3af2bcbe 100644
--- a/examples/draw.js
+++ b/examples/draw.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Kaboom as pure rendering lib (no component / game obj etc.)
 
 kaplay();
@@ -26,6 +28,7 @@ const py = 160;
 const doodles = [];
 const trail = [];
 
+/** @type { import("../dist/declaration").Outline } */
 const outline = {
     width: 4,
     color: rgb(0, 0, 0),
diff --git a/examples/easing.js b/examples/easing.js
index db83143f..4f5434f1 100644
--- a/examples/easing.js
+++ b/examples/easing.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 add([
diff --git a/examples/eatlove.js b/examples/eatlove.js
index b069adc4..6574a446 100644
--- a/examples/eatlove.js
+++ b/examples/eatlove.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 const fruits = [
@@ -80,7 +82,9 @@ scene("game", () => {
     let score = 0;
 
     const scoreLabel = add([
-        text(score, 32),
+        text(score.toString(), {
+            size: 32,
+        }),
         pos(12, 12),
     ]);
 
@@ -89,7 +93,7 @@ scene("game", () => {
         addKaboom(player.pos);
         score += 1;
         destroy(heart);
-        scoreLabel.text = score;
+        scoreLabel.text = score.toString();
         burp();
         shake(12);
     });
diff --git a/examples/egg.js b/examples/egg.js
index 94ec6a96..225ba585 100644
--- a/examples/egg.js
+++ b/examples/egg.js
@@ -1,3 +1,4 @@
+// @ts-check
 // Egg minigames (yes, like Peppa)
 
 kaplay({
@@ -74,7 +75,7 @@ onKeyPress("enter", () => {
             e.use(sprite("bean"));
             addKaboom(e.pos.sub(0, e.height / 2));
             counter.value += 1;
-            counter.text = counter.value;
+            counter.text = counter.value.toString();
         }
     });
 });
diff --git a/examples/fadeIn.js b/examples/fadeIn.js
index e0c550a7..a14725a2 100644
--- a/examples/fadeIn.js
+++ b/examples/fadeIn.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadBean();
diff --git a/examples/fakeMouse.js b/examples/fakeMouse.js
index dbda4222..8d27026d 100644
--- a/examples/fakeMouse.js
+++ b/examples/fakeMouse.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "/sprites/bean.png");
diff --git a/examples/fall.js b/examples/fall.js
index d1dbfeb9..c73802d6 100644
--- a/examples/fall.js
+++ b/examples/fall.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Build levels with addLevel()
 
 // Start game
diff --git a/examples/fixedUpdate.js b/examples/fixedUpdate.js
index 7a2201c4..d0732659 100644
--- a/examples/fixedUpdate.js
+++ b/examples/fixedUpdate.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 let fixedCount = 0;
diff --git a/examples/flamebar.js b/examples/flamebar.js
index f9290165..947f43b0 100644
--- a/examples/flamebar.js
+++ b/examples/flamebar.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Mario-like flamebar
 
 // Start kaboom
diff --git a/examples/flappy.js b/examples/flappy.js
index 9d8d5195..69fb2a64 100644
--- a/examples/flappy.js
+++ b/examples/flappy.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "/sprites/bean.png");
@@ -109,7 +111,7 @@ scene("game", () => {
 
     // display score
     const scoreLabel = add([
-        text(score),
+        text(score.toString()),
         anchor("center"),
         pos(width() / 2, 80),
         fixed(),
@@ -118,7 +120,7 @@ scene("game", () => {
 
     function addScore() {
         score++;
-        scoreLabel.text = score;
+        scoreLabel.text = score.toString();
         play("score");
     }
 });
diff --git a/examples/gamepad.js b/examples/gamepad.js
index c678c291..7b8ffbf3 100644
--- a/examples/gamepad.js
+++ b/examples/gamepad.js
@@ -1,8 +1,12 @@
-kaplay();
-setGravity(2400);
-setBackground(0, 0, 0);
+// @ts-check
+
+kaplay({
+    background: [0, 0, 0],
+});
 loadSprite("bean", "/sprites/bean.png");
 
+setGravity(2400);
+
 scene("nogamepad", () => {
     add([
         text("Gamepad not found.\nConnect a gamepad and press a button!", {
diff --git a/examples/ghosthunting.js b/examples/ghosthunting.js
index ad05a0ee..e7effd7b 100644
--- a/examples/ghosthunting.js
+++ b/examples/ghosthunting.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     width: 1024,
     height: 768,
@@ -248,7 +250,7 @@ function addEnemy(p) {
         // Health provides properties and methods to keep track of the enemies health
         health(100),
         // Sentry makes it easy to check for visibility of the player
-        sentry({ includes: "player" }, {
+        sentry({ include: "player" }, {
             lineOfSight: true,
             raycastExclude: ["enemy"],
         }),
@@ -295,7 +297,7 @@ onUpdate("enemy", enemy => {
     }
 });
 
-const SPEED = 100;
+const SPEED = 200;
 
 const dirs = {
     "left": LEFT,
diff --git a/examples/gravity.js b/examples/gravity.js
index 0c329f73..e5e710ce 100644
--- a/examples/gravity.js
+++ b/examples/gravity.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Responding to gravity & jumping
 
 // Start kaboom
diff --git a/examples/hover.js b/examples/hover.js
index 68bb6bbb..0434087f 100644
--- a/examples/hover.js
+++ b/examples/hover.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Differeces between onHover and onHoverUpdate
 
 kaplay({
diff --git a/examples/inspectExample.js b/examples/inspectExample.js
index 9acdb940..ad85ad86 100644
--- a/examples/inspectExample.js
+++ b/examples/inspectExample.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 // # will delete this file when changes get merged/declined i don't intend this to be an actual example
diff --git a/examples/jsconfig.json b/examples/jsconfig.json
deleted file mode 100644
index 0799b6bf..00000000
--- a/examples/jsconfig.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "types": [
-      "../dist/declaration/global.d.ts"
-    ],
-    "strict": true
-  }
-}
diff --git a/examples/kaboom.js b/examples/kaboom.js
index 86af73fc..eb23ad08 100644
--- a/examples/kaboom.js
+++ b/examples/kaboom.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // You can still use kaboom() instead of kaplay()!
 kaboom();
 
diff --git a/examples/largeTexture.js b/examples/largeTexture.js
index 37888c30..7f5f9c59 100644
--- a/examples/largeTexture.js
+++ b/examples/largeTexture.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 let cameraPosition = camPos();
diff --git a/examples/layer.js b/examples/layer.js
index aa07b12e..61f63db9 100644
--- a/examples/layer.js
+++ b/examples/layer.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "/sprites/bean.png");
diff --git a/examples/layers.js b/examples/layers.js
index 89995bd8..8d99be48 100644
--- a/examples/layers.js
+++ b/examples/layers.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 layers(["bg", "game", "ui"], "game");
diff --git a/examples/level.js b/examples/level.js
index 9650fd31..4100a9da 100644
--- a/examples/level.js
+++ b/examples/level.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Build levels with addLevel()
 
 // Start game
diff --git a/examples/levelraycast.js b/examples/levelraycast.js
index ec427480..21bb3d4a 100644
--- a/examples/levelraycast.js
+++ b/examples/levelraycast.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     background: [31, 16, 42],
 });
@@ -19,27 +21,31 @@ const level = addLevel([
         ],
     },
 });
-level.use(rotate(45))
+level.use(rotate(45));
 
 onLoad(() => {
     level.spawn([
         pos(
             level.tileWidth() * 1.5,
-            level.tileHeight() * 1.5
+            level.tileHeight() * 1.5,
         ),
         circle(6),
-        color('#ea6262'),
+        color("#ea6262"),
         {
             add() {
                 const rayHit = level.raycast(
                     this.pos,
-                    Vec2.fromAngle(0).scale(100)
+                    Vec2.fromAngle(0).scale(100),
                 );
 
-                debug.log(`${rayHit != null} ${rayHit && rayHit.object ? rayHit.object.id : -1}`);
+                debug.log(
+                    `${rayHit != null} ${
+                        rayHit && rayHit.object ? rayHit.object.id : -1
+                    }`,
+                );
             },
         },
-    ])
-})
+    ]);
+});
 
-debug.inspect = true
\ No newline at end of file
+debug.inspect = true;
diff --git a/examples/linecap.js b/examples/linecap.js
index 047134ae..bb18bc59 100644
--- a/examples/linecap.js
+++ b/examples/linecap.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 onDraw(() => {
@@ -10,7 +12,6 @@ onDraw(() => {
             vec2(50, 200),
         ],
         join: "bevel",
-        cap: "none",
         width: 20,
     });
     drawCircle({
@@ -33,7 +34,6 @@ onDraw(() => {
             vec2(50, 200),
         ],
         join: "round",
-        cap: "none",
         width: 20,
     });
     drawCircle({
@@ -56,7 +56,6 @@ onDraw(() => {
             vec2(50, 200),
         ],
         join: "miter",
-        cap: "none",
         width: 20,
     });
     drawCircle({
diff --git a/examples/linejoin.js b/examples/linejoin.js
index dbb0d8a4..ce6818a8 100644
--- a/examples/linejoin.js
+++ b/examples/linejoin.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 onDraw(() => {
diff --git a/examples/loader.js b/examples/loader.js
index c0edd63c..6f5cf575 100644
--- a/examples/loader.js
+++ b/examples/loader.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Customizing the asset loader
 
 kaplay({
@@ -18,7 +20,7 @@ loadSprite("bean", "/sprites/bean.png").onError(() => {
 
 loadSprite("ghosty", "/sprites/ghosty.png");
 
-// load() adds a Promise under kaboom's management, which affects loadProgress()
+// load() adds a Promise under KAPLAY's management, which affects loadProgress()
 // Here we intentionally stall the loading by 1sec to see the loading screen
 load(
     new Promise((res) => {
diff --git a/examples/maze.js b/examples/maze.js
index 5e58e13a..fb3e1424 100644
--- a/examples/maze.js
+++ b/examples/maze.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     scale: 0.5,
     background: [0, 0, 0],
diff --git a/examples/mazeRaycastedLight.js b/examples/mazeRaycastedLight.js
index 7bd9e999..ac8e05ac 100644
--- a/examples/mazeRaycastedLight.js
+++ b/examples/mazeRaycastedLight.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     scale: 0.5,
     background: [0, 0, 0],
diff --git a/examples/movement.js b/examples/movement.js
index 088f8e8c..13e2aec1 100644
--- a/examples/movement.js
+++ b/examples/movement.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Input handling and basic player movement
 
 // Start kaboom
diff --git a/examples/multigamepad.js b/examples/multigamepad.js
index 19536dc7..0af3b943 100644
--- a/examples/multigamepad.js
+++ b/examples/multigamepad.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 setGravity(2400);
 setBackground(0, 0, 0);
diff --git a/examples/out.js b/examples/out.js
index d26df5d2..f1d03516 100644
--- a/examples/out.js
+++ b/examples/out.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // detect if obj is out of screen
 
 kaplay();
diff --git a/examples/overlap.js b/examples/overlap.js
index 10c1653d..6a8cf420 100644
--- a/examples/overlap.js
+++ b/examples/overlap.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 add([
diff --git a/examples/particle.js b/examples/particle.js
index e5c06c28..238dd457 100644
--- a/examples/particle.js
+++ b/examples/particle.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Particle spawning
 
 kaplay();
diff --git a/examples/pauseMenu.js b/examples/pauseMenu.js
index 2f503e5d..6d0c0d8b 100644
--- a/examples/pauseMenu.js
+++ b/examples/pauseMenu.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "/sprites/bean.png");
@@ -115,7 +117,7 @@ scene("game", () => {
 
     // display score
     const scoreLabel = game.add([
-        text(score),
+        text(score.toString()),
         anchor("center"),
         pos(width() / 2, 80),
         fixed(),
@@ -124,7 +126,7 @@ scene("game", () => {
 
     function addScore() {
         score++;
-        scoreLabel.text = score;
+        scoreLabel.text = score.toString();
         play("score");
     }
 
diff --git a/examples/physics.js b/examples/physics.js
index 267ccd79..f8d3c8f7 100644
--- a/examples/physics.js
+++ b/examples/physics.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "sprites/bean.png");
diff --git a/examples/physicsfactory.js b/examples/physicsfactory.js
index d0a4fe8f..b3e4d2cf 100644
--- a/examples/physicsfactory.js
+++ b/examples/physicsfactory.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 setGravity(300);
diff --git a/examples/platformer.js b/examples/platformer.js
index b6fb6bfe..60f1048f 100644
--- a/examples/platformer.js
+++ b/examples/platformer.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     background: [141, 183, 255],
 });
@@ -265,7 +267,7 @@ scene("game", ({ levelId, coins } = { levelId: 0, coins: 0 }) => {
 
     player.onCollide("enemy", (e, col) => {
         // if it's not from the top, die
-        if (!col.isBottom()) {
+        if (!col?.isBottom()) {
             go("lose");
             play("hit");
         }
@@ -335,11 +337,11 @@ scene("game", ({ levelId, coins } = { levelId: 0, coins: 0 }) => {
     });
 
     onKeyPress("down", () => {
-        player.weight = 3;
+        player.gravityScale = 3;
     });
 
     onKeyRelease("down", () => {
-        player.weight = 1;
+        player.gravityScale = 1;
     });
 
     onGamepadButtonPress("south", jump);
diff --git a/examples/polygon.js b/examples/polygon.js
index 4e4291c4..e7c19c9b 100644
--- a/examples/polygon.js
+++ b/examples/polygon.js
@@ -1,6 +1,8 @@
-kaplay();
+// @ts-check
 
-setBackground(0, 0, 0);
+kaplay({
+    background: [0, 0, 0],
+});
 
 add([
     text("Drag corners of the polygon"),
diff --git a/examples/polygonuv.js b/examples/polygonuv.js
index 0e7fc836..6e1baf4f 100644
--- a/examples/polygonuv.js
+++ b/examples/polygonuv.js
@@ -1,6 +1,5 @@
-// Adding game objects to screen
+// @ts-check
 
-// Start a kaboom game
 kaplay();
 
 // Load a sprite asset from "sprites/bean.png", with the name "bean"
diff --git a/examples/pong.js b/examples/pong.js
index 8a4a0a70..647ba8bc 100644
--- a/examples/pong.js
+++ b/examples/pong.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     background: [255, 255, 128],
 });
@@ -30,13 +32,13 @@ onUpdate("paddle", (p) => {
 let score = 0;
 
 add([
-    text(score),
+    text(score.toString()),
     pos(center()),
     anchor("center"),
     z(50),
     {
         update() {
-            this.text = score;
+            this.text = score.toString();
         },
     },
 ]);
diff --git a/examples/postEffect.js b/examples/postEffect.js
index 92a3c7e4..aafabf0e 100644
--- a/examples/postEffect.js
+++ b/examples/postEffect.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Build levels with addLevel()
 
 // Start game
diff --git a/examples/query.js b/examples/query.js
index 9e5e42ad..99d0b5a8 100644
--- a/examples/query.js
+++ b/examples/query.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "/sprites/bean.png");
diff --git a/examples/raycastLevelTest.js b/examples/raycastLevelTest.js
index f928e77b..8956d231 100644
--- a/examples/raycastLevelTest.js
+++ b/examples/raycastLevelTest.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 const level = addLevel([
diff --git a/examples/raycastObject.js b/examples/raycastObject.js
index 2ab05338..5544bcd6 100644
--- a/examples/raycastObject.js
+++ b/examples/raycastObject.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 add([
diff --git a/examples/raycastShape.js b/examples/raycastShape.js
index 4aba9fad..cdc5f84a 100644
--- a/examples/raycastShape.js
+++ b/examples/raycastShape.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 add([
diff --git a/examples/raycaster3d.js b/examples/raycaster3d.js
index 0f9274d8..17251aba 100644
--- a/examples/raycaster3d.js
+++ b/examples/raycaster3d.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Start kaboom
 kaplay();
 
diff --git a/examples/rect.js b/examples/rect.js
index 28dc3370..57373fe5 100644
--- a/examples/rect.js
+++ b/examples/rect.js
@@ -1,6 +1,5 @@
-// Adding game objects to screen
+// @ts-check
 
-// Start a kaboom game
 kaplay();
 
 add([
diff --git a/examples/rpg.js b/examples/rpg.js
index bca79541..1db8777b 100644
--- a/examples/rpg.js
+++ b/examples/rpg.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // simple rpg style walk and talk
 
 kaplay({
diff --git a/examples/runner.js b/examples/runner.js
index 4a1723f6..59a59d69 100644
--- a/examples/runner.js
+++ b/examples/runner.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 const FLOOR_HEIGHT = 48;
 const JUMP_FORCE = 800;
 const SPEED = 480;
@@ -77,14 +79,14 @@ scene("game", () => {
     let score = 0;
 
     const scoreLabel = add([
-        text(score),
+        text(score.toString()),
         pos(24, 24),
     ]);
 
     // increment score every frame
     onUpdate(() => {
         score++;
-        scoreLabel.text = score;
+        scoreLabel.text = score.toString();
     });
 });
 
diff --git a/examples/scenes.js b/examples/scenes.js
index 7e222582..d26cf2ad 100644
--- a/examples/scenes.js
+++ b/examples/scenes.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Extend our game with multiple scenes
 
 // Start game
diff --git a/examples/shader.js b/examples/shader.js
index d65696b6..ec2f4d66 100644
--- a/examples/shader.js
+++ b/examples/shader.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Custom shader
 kaplay();
 
diff --git a/examples/shooter.js b/examples/shooter.js
index 48f6e603..ce1e2e8a 100644
--- a/examples/shooter.js
+++ b/examples/shooter.js
@@ -1,4 +1,4 @@
-// TODO: document
+// @ts-check
 
 kaplay({
     background: [74, 48, 82],
@@ -272,7 +272,7 @@ scene("battle", () => {
     });
 
     const timer = add([
-        text(0),
+        text("0"),
         pos(12, 32),
         fixed(),
         { time: 0 },
diff --git a/examples/size.js b/examples/size.js
index 52b64179..a7f55f77 100644
--- a/examples/size.js
+++ b/examples/size.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     // without specifying "width" and "height", kaboom will size to the container (document.body by default)
     width: 200,
diff --git a/examples/slice9.js b/examples/slice9.js
index 2e850c76..cd157c35 100644
--- a/examples/slice9.js
+++ b/examples/slice9.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // 9 slice sprite scaling
 
 kaplay();
diff --git a/examples/sprite.js b/examples/sprite.js
index 5a497867..0d604a18 100644
--- a/examples/sprite.js
+++ b/examples/sprite.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Sprite animation
 
 // Start a kaboom game
diff --git a/examples/spriteatlas.js b/examples/spriteatlas.js
index 3c9d78a9..64d9fff0 100644
--- a/examples/spriteatlas.js
+++ b/examples/spriteatlas.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     scale: 4,
     background: [0, 0, 0],
diff --git a/examples/text.js b/examples/text.js
index 6d01eda6..feb5ac84 100644
--- a/examples/text.js
+++ b/examples/text.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     background: [212, 110, 179],
 });
diff --git a/examples/textInput.js b/examples/textInput.js
index 72b6b8c4..4a3089b8 100644
--- a/examples/textInput.js
+++ b/examples/textInput.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Start kaboom
 kaplay();
 
diff --git a/examples/tiled.js b/examples/tiled.js
index 20ad3536..3bad881b 100644
--- a/examples/tiled.js
+++ b/examples/tiled.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "/sprites/bean.png");
diff --git a/examples/timer.js b/examples/timer.js
index fcbf2cd6..a2f4e73d 100644
--- a/examples/timer.js
+++ b/examples/timer.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "/sprites/bean.png");
diff --git a/examples/transformShape.js b/examples/transformShape.js
index e02c3160..a546c158 100644
--- a/examples/transformShape.js
+++ b/examples/transformShape.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 add([
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
new file mode 100644
index 00000000..318c8ae1
--- /dev/null
+++ b/examples/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "types": [
+      "../dist/declaration/global.d.ts"
+    ],
+    "target": "ESNext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "module": "ESNext", /* Specify what module code is generated. */
+    "moduleResolution": "Bundler",
+    "noEmit": true, /* Disable emitting files from a compilation. */
+    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
+    "strict": true,
+    "allowJs": true,
+    "moduleDetection": "force",
+    "noImplicitAny": false
+  }
+}
\ No newline at end of file
diff --git a/examples/tween.js b/examples/tween.js
index 608f7d50..fef1df3f 100644
--- a/examples/tween.js
+++ b/examples/tween.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 // Tweeeeeening!
 
 kaplay({
diff --git a/scripts/lib.js b/scripts/lib.js
index fd384216..07b129dd 100644
--- a/scripts/lib.js
+++ b/scripts/lib.js
@@ -180,7 +180,8 @@ export async function genDTS() {
     // generate global decls for KAPLAYCtx members
     let globalDts = "";
 
-    globalDts += "import { KAPLAYCtx } from \"./types\"\n";
+    globalDts +=
+        "import { KAPLAYCtx } from \"./types\"\nimport { kaplay as KAPLAY } from \"./kaplay\"\n";
     globalDts += "declare global {\n";
 
     for (const stmt of stmts) {
@@ -195,6 +196,9 @@ export async function genDTS() {
         }
     }
 
+    globalDts += `\tconst kaplay: typeof KAPLAY\n`;
+    globalDts += `\tconst kaboom: typeof KAPLAY\n`;
+
     globalDts += "}\n";
 
     if (!globalGenerated) {
diff --git a/src/components/draw/rect.ts b/src/components/draw/rect.ts
index a7682f83..459995a3 100644
--- a/src/components/draw/rect.ts
+++ b/src/components/draw/rect.ts
@@ -21,7 +21,7 @@ export interface RectComp extends Comp {
     /**
      * The radius of each corner.
      */
-    radius?: number;
+    radius?: number | [number, number, number, number];
     /**
      * @since v3000.0
      */
@@ -37,7 +37,7 @@ export interface RectCompOpt {
     /**
      * Radius of the rectangle corners.
      */
-    radius?: number;
+    radius?: number | [number, number, number, number];
     /**
      * If fill the rectangle (useful if you only want to render outline with outline() component).
      */
diff --git a/src/components/transform/rotate.ts b/src/components/transform/rotate.ts
index 4817238d..7324dac1 100644
--- a/src/components/transform/rotate.ts
+++ b/src/components/transform/rotate.ts
@@ -22,10 +22,10 @@ export interface RotateComp extends Comp {
     rotateTo(s: number): void;
 }
 
-export function rotate(r: number): RotateComp {
+export function rotate(a?: number): RotateComp {
     return {
         id: "rotate",
-        angle: r ?? 0,
+        angle: a ?? 0,
         rotateBy(angle: number) {
             this.angle += angle;
         },
diff --git a/src/gfx/draw/drawDebug.ts b/src/gfx/draw/drawDebug.ts
index 80ab8795..c67d59c9 100644
--- a/src/gfx/draw/drawDebug.ts
+++ b/src/gfx/draw/drawDebug.ts
@@ -179,7 +179,7 @@ export function drawDebug() {
                 str += `[time]${log.time.toFixed(2)}[/time]`;
                 str += " ";
                 str += `[${style}]${
-                    log.msg?.toString ? log.msg.toString() : log.msg
+                    typeof log?.msg === "string" ? log.msg : String(log.msg)
                 }[/${style}]`;
                 logs.push(str);
             }
diff --git a/src/kaplay.ts b/src/kaplay.ts
index a5310282..aab80a6b 100644
--- a/src/kaplay.ts
+++ b/src/kaplay.ts
@@ -540,8 +540,10 @@ const kaplay = <
         stepFrame: updateFrame,
         drawCalls: () => gfx.lastDrawCalls,
         clearLog: () => game.logs = [],
-        log: (msg) => {
+        log: (...msgs) => {
             const max = gopt.logMax ?? LOG_MAX;
+            const msg = msgs.concat(" ").join(" ");
+
             game.logs.unshift({
                 msg: msg,
                 time: app.time(),
diff --git a/src/types.ts b/src/types.ts
index f83075d0..d259913e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -19,6 +19,7 @@ import type {
     AgentCompOpt,
     AnchorComp,
     AnimateComp,
+    AnimateCompOpt,
     AreaComp,
     AreaCompOpt,
     AreaEffectorComp,
@@ -108,6 +109,7 @@ import type {
     LineJoin,
     Texture,
 } from "./gfx";
+import { kaplay } from "./kaplay";
 import type { GjkCollisionResult } from "./math";
 import type { Color, RGBAValue, RGBValue } from "./math/color";
 import type {
@@ -385,9 +387,11 @@ export interface KAPLAYCtx<
     /**
      * Rotates a Game Object (in degrees).
      *
+     * @param a The angle to rotate by. Defaults to 0.
+     *
      * @group Components
      */
-    rotate(a: number): RotateComp;
+    rotate(a?: number): RotateComp;
     /**
      * Sets the color of a Game Object (rgb 0-255).
      *
@@ -448,6 +452,9 @@ export interface KAPLAYCtx<
     /**
      * Attach and render a text to a Game Object.
      *
+     * @param txt The text to display.
+     * @param options Options for the text component. See {@link TextCompOpt}.
+     *
      * @example
      * ```js
      * // a simple score counter
@@ -475,7 +482,7 @@ export interface KAPLAYCtx<
      *
      * @group Components
      */
-    text(txt: string, options?: TextCompOpt): TextComp;
+    text(txt?: string, options?: TextCompOpt): TextComp;
     /**
      * Attach and render a polygon to a Game Object.
      *
@@ -616,7 +623,20 @@ export interface KAPLAYCtx<
      *
      * @group Components
      */
-    outline(width?: number, color?: Color): OutlineComp;
+    outline(
+        width?: number,
+        color?: Color,
+        opacity?: number,
+        join?: LineJoin,
+        miterLimit?: number,
+        cap?: LineCap,
+    ): OutlineComp;
+    /**
+     * Attach a particle emitter to a Game Object.
+     *
+     * @param popt The options for the particles.
+     * @param eopt The options for the emitter.
+     */
     particles(popt: ParticlesOpt, eopt: EmitterOpt): ParticlesComp;
     /**
      * Physical body that responds to gravity. Requires "area" and "pos" comp. This also makes the object "solid".
@@ -965,7 +985,7 @@ export interface KAPLAYCtx<
      * @since v3000.0
      * @group Components
      */
-    tile(opt: TileCompOpt): TileComp;
+    tile(opt?: TileCompOpt): TileComp;
     /**
      * An agent which can finds it way on a tilemap.
      *
@@ -979,7 +999,7 @@ export interface KAPLAYCtx<
      * @since v3001.0
      * @group Components
      */
-    animate(): AnimateComp;
+    animate(opt?: AnimateCompOpt): AnimateComp;
     /**
      * A fake mouse that follows the mouse position and triggers events.
      *
@@ -1831,8 +1851,8 @@ export interface KAPLAYCtx<
      */
     loadShader(
         name: string | null,
-        vert?: string,
-        frag?: string,
+        vert?: string | null,
+        frag?: string | null,
     ): Asset<ShaderData>;
     /**
      * Load a shader with vertex and fragment code file url.
@@ -1849,8 +1869,8 @@ export interface KAPLAYCtx<
      */
     loadShaderURL(
         name: string | null,
-        vert?: string,
-        frag?: string,
+        vert?: string | null,
+        frag?: string | null,
     ): Asset<ShaderData>;
     /**
      * Add a new loader to wait for before starting the game.
@@ -2168,6 +2188,8 @@ export interface KAPLAYCtx<
     /**
      * Camera shake.
      *
+     * @param intensity - The intensity of the shake. Default to 12.
+     *
      * @example
      * ```js
      * // shake intensively when bean collides with a "bomb"
@@ -2178,7 +2200,7 @@ export interface KAPLAYCtx<
      *
      * @group Info
      */
-    shake(intensity: number): void;
+    shake(intensity?: number): void;
     /**
      * Get / set camera position.
      *
@@ -2194,6 +2216,7 @@ export interface KAPLAYCtx<
      */
     camPos(pos: Vec2): Vec2;
     camPos(x: number, y: number): Vec2;
+    camPos(xy: number): Vec2;
     camPos(): Vec2;
     /**
      * Get / set camera scale.
@@ -2202,6 +2225,7 @@ export interface KAPLAYCtx<
      */
     camScale(scale: Vec2): Vec2;
     camScale(x: number, y: number): Vec2;
+    camScale(xy: number): Vec2;
     camScale(): Vec2;
     /**
      * Get / set camera rotation.
@@ -3684,79 +3708,82 @@ export type PluginList<T> = Array<T | KAPLAYPlugin<any>>;
  * @group Input
  */
 export type Key =
-    | "f1"
-    | "f2"
-    | "f3"
-    | "f4"
-    | "f5"
-    | "f6"
-    | "f7"
-    | "f8"
-    | "f9"
-    | "f10"
-    | "f11"
-    | "f12"
-    | "`"
-    | "1"
-    | "2"
-    | "3"
-    | "4"
-    | "5"
-    | "6"
-    | "7"
-    | "8"
-    | "9"
-    | "0"
-    | "-"
-    | "="
-    | "q"
-    | "w"
-    | "e"
-    | "r"
-    | "t"
-    | "y"
-    | "u"
-    | "i"
-    | "o"
-    | "p"
-    | "["
-    | "]"
-    | "\\"
-    | "a"
-    | "s"
-    | "d"
-    | "f"
-    | "g"
-    | "h"
-    | "j"
-    | "k"
-    | "l"
-    | ";"
-    | "'"
-    | "z"
-    | "x"
-    | "c"
-    | "v"
-    | "b"
-    | "n"
-    | "m"
-    | ","
-    | "."
-    | "/"
-    | "escape"
-    | "backspace"
-    | "enter"
-    | "tab"
-    | "control"
-    | "alt"
-    | "meta"
-    | "space"
-    | " "
-    | "left"
-    | "right"
-    | "up"
-    | "down"
-    | "shift";
+    | (
+        | "f1"
+        | "f2"
+        | "f3"
+        | "f4"
+        | "f5"
+        | "f6"
+        | "f7"
+        | "f8"
+        | "f9"
+        | "f10"
+        | "f11"
+        | "f12"
+        | "`"
+        | "1"
+        | "2"
+        | "3"
+        | "4"
+        | "5"
+        | "6"
+        | "7"
+        | "8"
+        | "9"
+        | "0"
+        | "-"
+        | "="
+        | "q"
+        | "w"
+        | "e"
+        | "r"
+        | "t"
+        | "y"
+        | "u"
+        | "i"
+        | "o"
+        | "p"
+        | "["
+        | "]"
+        | "\\"
+        | "a"
+        | "s"
+        | "d"
+        | "f"
+        | "g"
+        | "h"
+        | "j"
+        | "k"
+        | "l"
+        | ";"
+        | "'"
+        | "z"
+        | "x"
+        | "c"
+        | "v"
+        | "b"
+        | "n"
+        | "m"
+        | ","
+        | "."
+        | "/"
+        | "escape"
+        | "backspace"
+        | "enter"
+        | "tab"
+        | "control"
+        | "alt"
+        | "meta"
+        | "space"
+        | " "
+        | "left"
+        | "right"
+        | "up"
+        | "down"
+        | "shift"
+    )
+    | string & {};
 
 /**
  * A mouse button.
@@ -4782,11 +4809,11 @@ export interface Debug {
     /**
      * Log some text to on screen debug log.
      */
-    log(msg: string | { toString(): string }): void;
+    log(...msg: any): void;
     /**
      * Log an error message to on screen debug log.
      */
-    error(msg: string | { toString(): string }): void;
+    error(msg: any): void;
     /**
      * The recording handle if currently in recording mode.
      *