diff --git a/kaplay/.gitignore b/kaplay/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/kaplay/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/kaplay/README.md b/kaplay/README.md
new file mode 100644
index 0000000..b8631f8
--- /dev/null
+++ b/kaplay/README.md
@@ -0,0 +1,58 @@
+# KAPLAY Starter
+
+👋 Welcome to KAPLAY!
+
+This README includes everything you need to start writing game quickly.
+
+## Project Structure
+
+```bash
+.
+├── src
+│ ├── ...
+│ ├── scenes
+│ │ └── starter.ts # An Example Of A Simple Scene In KAPLAY
+│ └── components # This Is Where Your Components Would Live To Be Accessed By Nodes
+├── public
+│ └── put images here
+├── ...
+├── theme.ts # Customize the theme of the tutorial
+└── tsconfig.json # Typescript Config
+```
+
+## Getting Started
+
+Make sure you have all dependencies installed and started the dev server:
+
+```bash
+pnpm install
+pnpm run dev
+```
+
+## UI Structure
+
+```markdown
+┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+│ ● ● ● │
+├─────────────────────────────────────┬──────────────────────────────────────────────────────────┤
+│ │ │
+│ │ │
+│ │ │
+│ │ │
+│ │ │
+│ │ │
+│ │ │
+│ Your Code │ │
+│ │ │
+│ │ Game Preview │
+│ │ │
+│ │ │
+│ │ │
+│ │ │
+│ │ │
+├─────────────────────────────────────┤ │
+│ │ │
+│ Terminal │ │
+│ │ │
+└─────────────────────────────────────┴──────────────────────────────────────────────────────────┘
+```
diff --git a/kaplay/index.html b/kaplay/index.html
new file mode 100644
index 0000000..d2d37ad
--- /dev/null
+++ b/kaplay/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ KAPLAY Game
+
+
+
+
+
+
diff --git a/kaplay/package.json b/kaplay/package.json
new file mode 100644
index 0000000..48db7a3
--- /dev/null
+++ b/kaplay/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "kaplay-starter",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview"
+ },
+ "devDependencies": {
+ "typescript": "^5.5.3",
+ "vite": "^5.4.2",
+ "kaplay": "3001.0.0-beta.1"
+ }
+}
diff --git a/kaplay/src/components/spin.ts b/kaplay/src/components/spin.ts
new file mode 100644
index 0000000..16e81dc
--- /dev/null
+++ b/kaplay/src/components/spin.ts
@@ -0,0 +1,11 @@
+export default function cmp_spin(){
+ let me: any
+ return {
+ add() {
+ me = this as any
+ },
+ update() {
+ me.angle -= 2.222222222
+ }
+ }
+}
\ No newline at end of file
diff --git a/kaplay/src/kaplay.ts b/kaplay/src/kaplay.ts
new file mode 100644
index 0000000..824d04c
--- /dev/null
+++ b/kaplay/src/kaplay.ts
@@ -0,0 +1,10 @@
+import kaplay from 'kaplay';
+
+export const k = kaplay({
+ background: [0,0,0],
+ width: 1280,
+ height: 720,
+ letterbox: true,
+});
+
+export default k;
\ No newline at end of file
diff --git a/kaplay/src/main.ts b/kaplay/src/main.ts
new file mode 100644
index 0000000..32fe1b0
--- /dev/null
+++ b/kaplay/src/main.ts
@@ -0,0 +1,6 @@
+import k from "./kaplay";
+import scn_starter from "./scenes/starter";
+
+k.scene("starter", scn_starter);
+
+k.go("starter");
\ No newline at end of file
diff --git a/kaplay/src/scenes/starter.ts b/kaplay/src/scenes/starter.ts
new file mode 100644
index 0000000..081fe62
--- /dev/null
+++ b/kaplay/src/scenes/starter.ts
@@ -0,0 +1,35 @@
+import cmp_spin from "../components/spin";
+import k from "../kaplay";
+
+export default function scn_starter(){
+
+ k.add([
+ k.rect(k.width(), k.height()),
+ k.color(k.WHITE),
+ ])
+
+ k.add([
+ k.pos(k.center()),
+ k.anchor("center"),
+ k.color(k.BLACK),
+ k.text("Hello, Kaplay!\nEdit The Files In The 'src' Folder To Get Started\nCheck Out https://kaplayjs.com For The Documentation", {
+ align: "center",
+ }),
+ ]);
+
+ k.loadBean()
+
+ let bean = k.add([
+ k.sprite("bean"),
+ k.pos(k.width() / 2, k.height() / 2 + 200),
+ k.anchor("center"),
+ k.rotate(0),
+ cmp_spin(),
+ ])
+
+ k.onFixedUpdate(() => {
+ bean.pos.x = Math.cos(k.time()) * 100 + k.width() / 2
+ bean.pos.y = Math.sin(k.time()) * 100 + k.height() / 2 + 200
+ })
+
+}
\ No newline at end of file
diff --git a/kaplay/tsconfig.json b/kaplay/tsconfig.json
new file mode 100644
index 0000000..0511b9f
--- /dev/null
+++ b/kaplay/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}