@coppsary/motionly 1.0.0

package/eslint.config.js

@@ -0,0 +1,44 @@
+import js from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsparser from '@typescript-eslint/parser';
+import prettier from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaVersion: 2022,
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      prettier,
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      'no-undef': 'off',
+      'prettier/prettier': 'error',
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
+      '@typescript-eslint/no-non-null-assertion': 'warn',
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+    },
+  },
+  prettierConfig,
+  {
+    ignores: ['dist', 'node_modules', '**/*.js', '.husky'],
+  },
+];

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@coppsary/motionly",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "type": "module",
+  "bin": {
+    "motionly": "bin/motionly.js"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "templates",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "node bin/motionly.js",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build",
+    "inspect:motion": "vite-node scripts/inspect-motion.ts",
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "start": "vite",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css,html}\" \"tests/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css,html}\" \"tests/**/*.{ts,tsx}\"",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@vercel/analytics": "2.0.1",
+    "gsap": "^3.15.0",
+    "lucide-svelte": "^1.0.1",
+    "motion": "^12.42.2",
+    "motionly": "file:../../../../../tmp/motionly-1.0.0.tgz",
+    "svelte": "^5.56.4",
+    "svelvet": "^11.0.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@types/node": "^26.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.64.0",
+    "@typescript-eslint/parser": "^8.64.0",
+    "@vitest/coverage-v8": "^3.1.3",
+    "@vitest/ui": "^3.1.3",
+    "eslint": "^10.7.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.6",
+    "husky": "^9.1.7",
+    "jsdom": "^29.1.1",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.9.5",
+    "svelte-check": "^4.7.2",
+    "typescript": "^5.7.3",
+    "vite": "^6.4.3",
+    "vitest": "^3.1.3"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{css,html}": [
+      "prettier --write"
+    ]
+  },
+  "description": "<div align=\"center\">   <img src=\"public/logo.svg\" alt=\"Motionly Logo\" width=\"100\">",
+  "main": "eslint.config.js",
+  "directories": {
+    "doc": "docs",
+    "test": "tests"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/COPPSARY/Motionly.git"
+  },
+  "keywords": [],
+  "author": "",
+  "bugs": {
+    "url": "https://github.com/COPPSARY/Motionly/issues"
+  },
+  "homepage": "https://github.com/COPPSARY/Motionly#readme",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/templates/motionly-skill/SKILL.md

@@ -0,0 +1,96 @@
+---
+name: motionly
+description: Create, edit, validate, and preview editable Motionly .motion animation projects. Use for Motionly storyboards, motion graphics, local assets, timing, presets, and project.motion files.
+---
+
+# Motionly projects
+
+Motionly is a visual motion-graphics editor. Its editable source is `project.motion`; normal users refine it in the editor rather than hand-writing it. Keep generated source readable and load it through Motionly's parser and renderer.
+
+## Project and asset workflow
+
+- Read `AGENTS.md`, `project.motion`, and relevant files in `assets/` before editing.
+- Reference media by filename under `assets/`: `import "./assets/logo.svg" as logo`.
+- Keep filenames stable. A browser upload with the same filename resolves the same import. If its size or dimensions differ significantly, ask before replacing it.
+- Preserve aspect ratio by setting only `width` or `height`.
+- Use one focal subject per shot and purposeful scene changes. Avoid constant camera drift and the same fade on every layer.
+
+## Supported source
+
+```motion
+canvas {
+  size 1920x1080
+  fps 60
+  duration 5s
+  background #020308
+}
+
+camera {
+  zoom 1
+  cameraAnimation "speedZoom(delay 3s duration 1s from 1 peak 1.08 to 1.02 ease power3.out)"
+}
+
+import "./assets/logo.svg" as logo
+
+logo {
+  center
+  layer hero
+  width 240
+  opacity 1
+  animation "maskReveal(delay 300ms duration 800ms direction down ease power3.out)"
+}
+
+text title {
+  value "Make it move."
+  center
+  layer text
+  y 180
+  size 72
+  color #ffffff
+  opacity 1
+  textAnimation "keynoteText(split words stagger 80ms duration 750ms delay 1s ease power3.out)"
+}
+```
+
+- Use one `canvas`; `camera` is optional.
+- Render an imported asset with its alias directly. Do not invent `asset`, `video`, `scene`, `group`, `rect`, or `layer` block types.
+- Built-in visual blocks are `text`, `overlay`, and `effect`.
+- Valid layers: `background`, `hero`, `supporting`, `content`, `details`, `text`, `effects`.
+- Common properties: `x`, `y`, `width`, `height`, `scale`, `rotation`, `opacity`, `blur`, `size`, `weight`, `color`, `fill`, `center`, `cover`, `layer`, `duration`, `delay`, `easing`.
+- Use `size`, not `fontSize`. Explicit animations use `easing`; preset options use `ease`.
+
+Explicit animation:
+
+```motion
+animate title {
+  from {
+    opacity 0
+    y 80
+    blur 10
+  }
+
+  to {
+    opacity 1
+    y 0
+    blur 0
+  }
+
+  duration 1s
+  delay 0s
+  easing power3.out
+}
+```
+
+Keyframes are percentage blocks inside `keyframes` inside `animate`. Persistent timeline rows use `track NAME { ... }`; media clips use `clip ALIAS { track NAME start 0s duration 5s trimIn 0s trimOut 0s }`. Project audio is `audio "./assets/music.mp3" { start 0s }`.
+
+Prefer `power3.out`. Useful text presets: `keynoteText`, `wordReveal`, `charReveal`, `splitReveal`, `blurReveal`, `fadeUp`, `slideIn`, `scaleText`, `typewriter`, `maskReveal`, `gradientReveal`. Useful object/transition presets: `softReveal`, `maskReveal`, `dynamicSlide`, `shapeWipe`, `irisWipe`, `drawSVG`, `sceneExit`, `scaleReveal`. Use `drawSVG` only for simple stroked SVG logos. Camera presets include `slowPush`, `pan`, `pull`, and `speedZoom`.
+
+## Validate and preview
+
+From the project folder:
+
+```bash
+npx motionly dev
+```
+
+This loads `project.motion` and `assets/`, opens the editor, and saves changes back to `project.motion`. Verify the canvas size, FPS, exact duration, imports, readable holds, transitions, final frame, and save/reload behavior before finishing.

package/templates/project/AGENTS.md

@@ -0,0 +1,79 @@
+# Motionly Agent Notes
+
+Keep Motionly simple and visual.
+
+Read the installed `motionly` skill before creating or substantially editing `project.motion`.
+
+## Product Rule
+
+Motionly is a motion graphics editor around `.motion`. The user edits visually; `.motion` is the saved source format underneath.
+
+Do not make users hand-write `.motion` for normal animation creation.
+
+## Project Files
+
+- `project.motion` is the editable animation source.
+- Keep local media in `assets/` and reference it by filename, such as `./assets/logo.svg`.
+- Preserve asset aspect ratios by setting only `width` or `height`.
+- Run `npx motionly dev` to load, validate, preview, and visually refine the project.
+
+## `.motion` Syntax
+
+Use this shape:
+
+```motion
+canvas {
+  size 1920x1080
+  fps 60
+  duration 5s
+  background #020308
+}
+
+text title {
+  value "Hello"
+  center
+  size 72
+  color #ffffff
+  opacity 1
+}
+
+animate title {
+  from {
+    opacity 0
+    y 80
+    blur 10
+  }
+
+  to {
+    opacity 1
+    y 0
+    blur 0
+  }
+
+  duration 1.2s
+  delay 0s
+  easing power3.out
+}
+```
+
+Prefer these properties: `x`, `y`, `scale`, `rotation`, `opacity`, `blur`, `size`, `color`, `center`, `duration`, `delay`, `easing`.
+
+Use `size`, not `fontSize`. Use `easing`, not `ease`.
+
+## Preset Guidance
+
+Presets should be subtle:
+
+- Fade in: `opacity 0` to target opacity
+- Rise in: `opacity 0`, `y + 80` to target
+- Scale in: `opacity 0`, `scale .85` to target
+- Blur reveal: `opacity 0`, `blur 12`, slight `y` offset to target
+- Soft drift: slight `x` offset to target
+
+Default to `power3.out` for smooth professional motion.
+
+Build scenes around one focal subject. Use scene color changes and purposeful object movement to mark progression; avoid constant camera drift and repeating the same fade on every object.
+
+For simple stroked SVG logos, `animation drawSVG(...)` animates their paths and resolves into the original artwork. Use it sparingly on a hero logo; use normal image reveals for detailed SVGs, mockups, and photos.
+
+Use the small transition set when a shot actually changes: `shapeWipe`, `irisWipe`, `maskReveal`, `dynamicSlide`, and camera `speedZoom`. Prefer one strong transition per scene over stacking effects.

package/templates/project/README.md

@@ -0,0 +1,17 @@
+# {{name}}
+
+This is a local Motionly project.
+
+Motionly starts the project automatically after `init`. To reopen it later:
+
+```bash
+npx motionly dev
+```
+
+Motionly opens `project.motion`, resolves media from `assets/` by filename, and saves visual edits back to the project file. Put images, SVG, video, and audio in `assets/`, then import them from `project.motion`, for example:
+
+```motion
+import "./assets/logo.svg" as logo
+```
+
+The browser-only Motionly editor remains available with `npx motionly`.

package/templates/project/meta.json

@@ -0,0 +1,5 @@
+{
+  "name": "{{name}}",
+  "created": "{{created}}",
+  "version": 1
+}

package/templates/project/project.motion

@@ -0,0 +1,32 @@
+canvas {
+  size 1920x1080
+  fps 60
+  duration 5s
+  background #020308
+}
+
+text title {
+  value "{{name}}"
+  center
+  size 72
+  color #ffffff
+  opacity 1
+}
+
+animate title {
+  from {
+    opacity 0
+    y 80
+    blur 10
+  }
+
+  to {
+    opacity 1
+    y 0
+    blur 0
+  }
+
+  duration 1.2s
+  delay 0s
+  easing power3.out
+}