{"id":20762013,"url":"https://github.com/donkeyclip/motorcortex-backgrounds","last_synced_at":"2025-04-30T06:40:37.387Z","repository":{"id":37518143,"uuid":"300254615","full_name":"donkeyclip/motorcortex-backgrounds","owner":"donkeyclip","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-18T08:46:36.000Z","size":35057,"stargazers_count":0,"open_issues_count":23,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T13:34:31.256Z","etag":null,"topics":["background","motorcortex","motorcortex-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/donkeyclip.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2020-10-01T11:28:20.000Z","updated_at":"2023-01-31T18:32:22.000Z","dependencies_parsed_at":"2023-10-01T19:44:47.298Z","dependency_job_id":"b6b59bc7-5cc9-4842-a734-ca3da2578164","html_url":"https://github.com/donkeyclip/motorcortex-backgrounds","commit_stats":{"total_commits":564,"total_committers":14,"mean_commits":"40.285714285714285","dds":0.4042553191489362,"last_synced_commit":"a2099ae1f4244d3917d98183871c457de06bddc5"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-backgrounds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-backgrounds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-backgrounds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-backgrounds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donkeyclip","download_url":"https://codeload.github.com/donkeyclip/motorcortex-backgrounds/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251657405,"owners_count":21622813,"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":["background","motorcortex","motorcortex-plugin"],"created_at":"2024-11-17T10:28:39.176Z","updated_at":"2025-04-30T06:40:37.338Z","avatar_url":"https://github.com/donkeyclip.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MotorCortex-Backgrounds\n\n**Table of Contents**\n\n- [MotorCortex-Backgrounds](#motorcortex-backgrounds)\n  - [Demo](#demo)\n- [Intro / Features](#intro--features)\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Importing and Loading](#importing-and-loading)\n- [Creating Incidents](#creating-incidents)\n  - [BgOpener](#bgopener)\n  - [TwoSidesReveal](#twosidesreveal)\n  - [RowReveal](#rowreveal)\n  - [ColumnReveal](#columnreveal)\n  - [Grid](#grid)\n  - [ThreeSidesReveal](#threesidesreveal)\n- [Adding Incidents in your clip](#adding-incidents-in-your-clip)\n- [Contributing](#contributing)\n- [License](#license)\n- [Sponsored by](#sponsored-by)\n\n## Demo\n\n[Check it out here](https://donkeyclip.github.io/motorcortex-backgrounds/demo/index.html)\n\n# Intro / Features\nΑre you tired of simple backgrounds in your clips? Using MotorCortex-Backgrounds you can include impressive effects for the background of your clip.\n\nThis Plugin exposes six Incidents:\n- BgOpener\n- TwoSidesReveal\n- RowReveal\n- ColumnReveal\n- Grid\n- ThreeSidesReveal\n\n# Getting Started\n\n## Installation\n\n```bash\n$ npm install --save @donkeyclip/motorcortex-backgrounds\n# OR\n$ yarn add @donkeyclip/motorcortex-backgrounds\n```\n\n## Importing and loading\n\n```javascript\nimport { loadPlugin } from \"@donkeyclip/motorcortex\";\nimport BackgroundsDefinition from \"@donkeyclip/motorcortex-backgrounds\";\nconst Plugin = loadPlugin(BackgroundsDefinition);\n```\n\n# Creating Incidents\n\n## BgOpener\n\nBgOpener engages your selector's object to open up and down and removes it from the clip like it splits into two parts.\n\n```javascript\nconst BgOpener = new Plugin.BgOpener(\n  {\n    width: 512,\n    height: 288,\n    bgUrl:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/kissmybutonbg.jpg\",\n    timing: 0.3,\n    easing: \"easeInQuad\",\n    exitStart: 2000,\n  },\n  {\n    selector: \".container1\",\n  }\n);\n```\n\n### BgOpener Attrs\n\n| Name      |                         Are                          | Values |\n| --------- | :--------------------------------------------------: | -----: |\n| width     |                  width of incident                   |    num |\n| height    |                  height of incident                  |    num |\n| bgUrl     |                 url of the bg image                  | string |\n| easing    |               easing of the animation                | string |\n| exitStart | the millisecond that we want to start the bg exiting |    num |\n\n## TwoSidesReveal\n\nTwoSidesReveal engages your selector's object to open right and left.\n\n```javascript\nconst TwoSidesReveal = new Plugin.TwoSidesReveal(\n  {\n    width: 512,\n    height: 288,\n    bgUrl:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/kissmybutonbg.jpg\",\n    easing: \"easeInQuad\",\n  },\n  {\n    selector: \".container2\",\n  }\n);\n```\n\n### TwoSidesReveal Attrs\n\n| Name   |           Are           | Values |\n| ------ | :---------------------: | -----: |\n| width  |    width of incident    |    num |\n| height |   height of incident    |    num |\n| bgUrl  |   url of the bg image   | string |\n| easing | easing of the animation | string |\n\n## RowReveal\n\nColumnReveal engages your selector's object to split into four columns and displays and removes them incrementally and sequentially.\n\n```javascript\nconst RowReveal = new Plugin.RowReveal(\n  {\n    width: 512,\n    height: 288,\n    bgUrl:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/kissmybutonbg.jpg\",\n    easing: \"easeOutQuart\",\n    exitStart: 2000,\n    bgOut: true,\n  },\n  {\n    selector: \".container3\",\n  }\n);\n```\n\n### RowReveal Attrs\n\n| Name      |                         Are                          |  Values |\n| --------- | :--------------------------------------------------: | ------: |\n| width     |                  width of incident                   |     num |\n| height    |                  height of incident                  |     num |\n| bgUrl     |                 url of the bg image                  |  string |\n| easing    |               easing of the animation                |  string |\n| exitStart | the millisecond that we want to start the bg exiting |     num |\n| bgOut     |        set true if we like to have a bg exit         | boolean |\n\n## ColumnReveal\n\nColumnReveal engages your selector's object to split into four columns and displays and removes them incrementally.\n\n```javascript\nconst ColumnReveal = new Plugin.ColumnReveal(\n  {\n    width: 512,\n    height: 288,\n    bgUrl:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/kissmybutonbg.jpg\",\n    easing: \"easeOutQuart\",\n    exitStart: 2000,\n    bgOut: true,\n  },\n  {\n    selector: \".container4\",\n  }\n);\n```\n\n### ColumnReveal Attrs\n\n| Name      |                         Are                          |  Values |\n| --------- | :--------------------------------------------------: | ------: |\n| width     |                  width of incident                   |     num |\n| height    |                  height of incident                  |     num |\n| bgUrl     |                 url of the bg image                  |  string |\n| easing    |               easing of the animation                |  string |\n| exitStart | the millisecond that we want to start the bg exiting |     num |\n| bgOut     |        set true if we like to have a bg exit         | boolean |\n\n## Grid\n\nGrid changes the color of your background incrementally and sequentially based on the the columns and rows you choose.\n\n```javascript\nconst Grid = new Plugin.Grid(\n  {\n    width: 512,\n    height: 288,\n    color: \"#000\",\n    columns: 6,\n    rows: 4,\n  },\n  {\n    selector: \".container6\",\n  }\n);\n```\n\n### Grid Attrs\n\n| Name    |                 Are                 |  Values |\n| ------- | :---------------------------------: | ------: |\n| width   |          width of incident          |     num |\n| height  |         height of incident          |     num |\n| color   |     the color of the background     | hex,rgb |\n| columns | how many columns the grid will have |     num |\n| rows    |  how many rows the grid will have   |     num |\n\n## ThreeSidesReveal\n\nThreeSidesReveal splits your selector's object into three parts and displays them from different directions.\n\n```javascript\nconst ThreeSidesReveal = new Plugin.ThreeSidesReveal(\n  {\n    width: 512,\n    height: 288,\n    bgUrl: \"https://donkeyclip.github.io/motorcortex-slides/demo/bg3.jpg\",\n    overlayColor: \"#ff0000\",\n    grid: true,\n    gridDuration: 1,\n    gridColor: \"#000\",\n    columns: 6,\n    rows: 4,\n  },\n  {\n    selector: \".container5\",\n  }\n);\n```\n\n### ThreeSidesReveal Attrs\n\n| Name         |                 Are                 |  Values |\n| ------------ | :---------------------------------: | ------: |\n| width        |          width of incident          |     num |\n| height       |         height of incident          |     num |\n| bgUrl        |         url of the bg image         |  string |\n| overlayColor |     overlay color of background     | hex,rgb |\n| grid         |  set true if we like to have a gid  | boolean |\n| gridDuration |       grid incident duration        |     num |\n| gridColor    |     the color of the background     | hex,rgb |\n| columns      | how many columns the grid will have |     num |\n| rows         |  how many rows the grid will have   |     num |\n\n# Adding Incidents in your clip\n\n```javascript\nclipName.addIncident(incidentName,startTime);\n```\n\n# Contributing \n\nIn general, we follow the \"fork-and-pull\" Git workflow, so if you want to submit patches and additions you should follow the next steps:\n1.\t**Fork** the repo on GitHub\n2.\t**Clone** the project to your own machine\n3.\t**Commit** changes to your own branch\n4.\t**Push** your work back up to your fork\n5.\tSubmit a **Pull request** so that we can review your changes\n\n\n# License\n\n[MIT License](https://opensource.org/licenses/MIT)\n\n# Sponsored by\n[\u003cimg src=\"https://presskit.donkeyclip.com/logos/donkey%20clip%20logo.svg\" width=250\u003e\u003c/img\u003e](https://donkeyclip.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonkeyclip%2Fmotorcortex-backgrounds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonkeyclip%2Fmotorcortex-backgrounds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonkeyclip%2Fmotorcortex-backgrounds/lists"}