{"id":28507628,"url":"https://github.com/tripasect/rlottie-wasm-vue-player","last_synced_at":"2025-07-05T06:30:58.312Z","repository":{"id":295221368,"uuid":"989535517","full_name":"tripasect/rlottie-wasm-vue-player","owner":"tripasect","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-24T09:57:50.000Z","size":198,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-08T20:47:10.925Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tripasect.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-24T09:48:14.000Z","updated_at":"2025-05-24T09:57:53.000Z","dependencies_parsed_at":"2025-05-24T09:57:54.923Z","dependency_job_id":"f9fa2480-1068-455d-8917-9764dd55c19d","html_url":"https://github.com/tripasect/rlottie-wasm-vue-player","commit_stats":null,"previous_names":["tripasect/rlottie-vue-player"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tripasect/rlottie-wasm-vue-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tripasect%2Frlottie-wasm-vue-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tripasect%2Frlottie-wasm-vue-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tripasect%2Frlottie-wasm-vue-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tripasect%2Frlottie-wasm-vue-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tripasect","download_url":"https://codeload.github.com/tripasect/rlottie-wasm-vue-player/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tripasect%2Frlottie-wasm-vue-player/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262638500,"owners_count":23341307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-08T20:40:50.236Z","updated_at":"2025-07-05T06:30:58.306Z","avatar_url":"https://github.com/tripasect.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rlottie WASM Vue Player\n\nA Vue 3 component for the rlottie-wasm animation player. This package allows you to play Lottie animations in your Vue applications using the rlottie WebAssembly module.\n\n## Improved Usage Experience\n\nWith this package, you can enjoy a seamless and efficient experience when working with Lottie animations in your Vue applications. The key benefits include:\n\n- **Zero configuration required** - All WASM and JS assets are automatically included\n- **Simple import** - Just `import { RlottiePlayer } from 'rlottie-vue-player'` and you're ready to go\n- Play, pause, stop, and seek Lottie animations\n- Control playback speed\n- Customize layer colors, opacity, position, scale, and rotation\n- Responsive design\n- Event handling for animation lifecycle\n\n## Installation\n\n```bash\nnpm install rlottie-wasm-vue-player\n```\n\n## Setup\n\n### 1. Install the package\n\nInstall the package using npm or yarn:\n\n```bash\nnpm install rlottie-wasm-vue-player\n# or\nyarn add rlottie-wasm-vue-player\n```\n\nThat's it! No need to manually copy any files. All required WASM and JS assets are automatically included in the package.\n\n### 2. Import and use the component\n\nNo additional script loading is required. All necessary WASM and JS files are automatically loaded when you import the component.\n\n## Usage\n\n### Register as a Vue plugin (global component)\n\n```js\n// main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport RlottieVuePlayer from 'rlottie-wasm-vue-player';\n\nconst app = createApp(App);\n\n// Register the plugin with optional configuration\napp.use(RlottieVuePlayer, {\n  // Optional: custom path to WASM assets if you need to override the default\n  // wasmPath: '/custom-path'\n});\n\napp.mount('#app');\n```\n\n### Use as a local component\n\n```js\n// YourComponent.vue\nimport { RlottiePlayer } from 'rlottie-wasm-vue-player';\n\nexport default {\n  components: {\n    RlottiePlayer\n  }\n};\n```\n\n### Basic Example\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cRlottiePlayer\n      ref=\"player\"\n      :src=\"animationSource\"\n      :width=\"300\"\n      :height=\"300\"\n      :autoplay=\"true\"\n      :loop=\"true\"\n      :speed=\"1\"\n      @load=\"onAnimationLoaded\"\n      @play=\"isPlaying = true\"\n      @pause=\"isPlaying = false\"\n      @stop=\"isPlaying = false\"\n      @error=\"onAnimationError\"\n      @complete=\"onAnimationComplete\"\n    /\u003e\n    \n    \u003cdiv class=\"controls\"\u003e\n      \u003cbutton @click=\"player.play()\"\u003ePlay\u003c/button\u003e\n      \u003cbutton @click=\"player.pause()\"\u003ePause\u003c/button\u003e\n      \u003cbutton @click=\"player.stop()\"\u003eStop\u003c/button\u003e\n      \u003cinput type=\"range\" min=\"0\" max=\"100\" v-model=\"seekValue\" @input=\"seek\" /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue';\nimport { RlottiePlayer } from 'rlottie-wasm-vue-player';\n\nconst player = ref(null);\nconst animationSource = ref('/sample.json');\nconst isPlaying = ref(false);\nconst seekValue = ref(0);\n\nconst seek = () =\u003e {\n  if (player.value) {\n    player.value.seek(seekValue.value);\n  }\n};\n\nconst onAnimationLoaded = (data) =\u003e {\n  console.log('Animation loaded:', data);\n};\n\nconst onAnimationError = (error) =\u003e {\n  console.error('Animation error:', error);\n};\n\nconst onAnimationComplete = () =\u003e {\n  console.log('Animation playback complete');\n};\n\u003c/script\u003e\n```\n\n## Component Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `src` | String, Object | - | Animation source - stringified JSON or URL to JSON file |\n| `width` | Number, String | 300 | Width of the player |\n| `height` | Number, String | 300 | Height of the player |\n| `autoplay` | Boolean | false | Whether to autoplay the animation |\n| `loop` | Boolean | true | Whether to loop the animation |\n| `speed` | Number | 1 | Playback speed (1 is normal speed) |\n| `background` | String | 'transparent' | Background color |\n| `layers` | Object | {} | Layer customizations (see below) |\n| `canvasId` | String | null | Optional custom canvas ID |\n| `assetPath` | String | '' | Optional: Custom path to asset files (not required with default usage) |\n\n## Layer Customization\n\nThe `layers` prop accepts an object with the following format:\n\n```js\n{\n  \"keypath\": {\n    color: { r: 255, g: 0, b: 0 },\n    opacity: 0.5,\n    strokeWidth: 2,\n    position: { x: 10, y: 20 },\n    scale: { width: 1.2, height: 0.8 },\n    rotation: 45\n  }\n}\n```\n\nWhere `keypath` is the path to the layer in the Lottie animation (e.g., \"Shape Layer 1\").\n\n## Component Methods\n\n| Method | Description |\n|--------|-------------|\n| `play()` | Starts or resumes animation playback |\n| `pause()` | Pauses animation playback |\n| `stop()` | Stops animation and resets to the first frame |\n| `seek(percentage)` | Seeks to a specific frame based on percentage (0-100) |\n| `getProperties()` | Returns properties of the current animation |\n\n## Global API\n\nThe package also exposes a global API on `window.RlottieVuePlayer` with the following methods:\n\n| Method | Description |\n|--------|-------------|\n| `loadAnimation(jsonData)` | Loads Lottie animation data (stringified JSON) |\n| `play()` | Starts or resumes animation playback |\n| `pause()` | Pauses animation playback |\n| `stop()` | Stops animation and resets to the first frame |\n| `seek(percentage)` | Seeks to a specific frame based on percentage (0-100) |\n| `getAnimationProperties()` | Returns properties of the current animation |\n| `setPlaySpeed(speed)` | Sets the playback speed |\n| `resize(width, height)` | Informs the player of the canvas dimensions |\n| `setLayerColor(keypath, r, g, b)` | Sets the fill and stroke color of a layer |\n| `setLayerOpacity(keypath, opacity)` | Sets the fill and stroke opacity of a layer (0-1) |\n| `setStrokeWidth(keypath, width)` | Sets the stroke width of a layer |\n| `setPosition(keypath, x, y)` | Sets the position of a layer |\n| `setScale(keypath, width, height)` | Sets the scale of a layer |\n| `setRotation(keypath, degree)` | Sets the rotation of a layer |\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftripasect%2Frlottie-wasm-vue-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftripasect%2Frlottie-wasm-vue-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftripasect%2Frlottie-wasm-vue-player/lists"}