{"id":20762005,"url":"https://github.com/donkeyclip/motorcortex-slides","last_synced_at":"2025-04-30T06:41:49.658Z","repository":{"id":37274654,"uuid":"226316202","full_name":"donkeyclip/motorcortex-slides","owner":"donkeyclip","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-24T17:14:02.000Z","size":47147,"stargazers_count":1,"open_issues_count":16,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-09T02:05:44.205Z","etag":null,"topics":["motorcortex","motorcortex-plugin","slides"],"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":"2019-12-06T11:35:03.000Z","updated_at":"2022-04-01T08:57:59.000Z","dependencies_parsed_at":"2024-02-07T07:24:16.624Z","dependency_job_id":"16ca3862-3fb7-41bf-b607-10eebd982e3e","html_url":"https://github.com/donkeyclip/motorcortex-slides","commit_stats":{"total_commits":854,"total_committers":16,"mean_commits":53.375,"dds":0.5269320843091334,"last_synced_commit":"3ddeed482d8f9b234718fd14d22d8c99b25557dc"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-slides","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-slides/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-slides/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-slides/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donkeyclip","download_url":"https://codeload.github.com/donkeyclip/motorcortex-slides/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224869692,"owners_count":17383422,"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":["motorcortex","motorcortex-plugin","slides"],"created_at":"2024-11-17T10:28:37.626Z","updated_at":"2024-11-17T10:28:38.380Z","avatar_url":"https://github.com/donkeyclip.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MotorCortex-Slides\n\n**Table of Contents**\n\n- [MotorCortex-Slides](#motorcortex-slides)\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  - [Intro](#intro)\n  - [Transition](#transition)\n  - [SlideDateOneVid](#slidedateonevid)\n  - [Scrollslide](#scrollslide)\n  - [LtRslide](#ltrslide)\n  - [SlideDateTwo](#slidedatetwo)\n  - [BtTslide](#bttslide)\n  - [BtTslideDate](#bttslidedate)\n  - [LtRslideTop](#ltrslidetop)\n  - [RtLslide](#rtlslide)\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-slides/demo/index.html)\n\n# Intro / Features\n\nWith MotorCortex-slides you can easily create attractive slideshows.\n\nThis Plugin exposes ten Incident:\n\n- Intro\n- Transition\n- SlideDateOneVid\n- Scrollslide\n- LtRslide\n- SlideDateTwo\n- BtTslide\n- BtTslideDate\n- LtRslideTop\n- RtLslide\n\n# Getting Started\n\n## Installation\n\n```bash\n$ npm install --save @donkeyclip/motorcortex-slides\n# OR\n$ yarn add @donkeyclip/motorcortex-slides\n```\n\n## Importing and loading\n\n```javascript\nimport { loadPlugin } from \"@donkeyclip/motorcortex\";\nimport slides from \"@donkeyclip/motorcortex-slides\";\nconst SlidesPlugin = loadPlugin(slides);\n```\n\n# Creating Incidents\n\n## Intro\n\n```javascript\nconst introClip = new Clip.Intro(\n  {\n    title: \"Demo\",\n    subtitle: \"Promo Plugin\",\n    description: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam\n    eveniet eosdsdawdw numquam facilis libero iure natus, voluptatibus\n    deserunt laboriosam, perspiciatis consequatur nostrum.`,\n    month: \"December\",\n    bgUrl:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/assets/kissmybutonbg.jpg\",\n    overlayColor: [\"#101820D7\", \"#101820FF\"],\n    mainColor: \"#FEE715FF\",\n  },\n  {\n    selector: \".container1\",\n  }\n);\n```\n\n### Intro Attrs\n\n| Name         |                  Are                  |                                            Values |\n| ------------ | :-----------------------------------: | ------------------------------------------------: |\n| title        |              title text               |                                            string |\n| subtitle     |             subtitle text             |                                            string |\n| description  |           description text            |                                            string |\n| month        |               the month               |                                            string |\n| bgUrl        |     the path of background image      |                                            string |\n| overlayColor | the overlay color of background image | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| mainColor    |      the main color of elements       | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n\n## Transition\n\n```javascript\nconst transition = new Clip.Transition(\n  {\n    title: \"test\",\n    speed: 2,\n  },\n  {\n    selector: \".container2\",\n  }\n);\n```\n\n### Transition Attrs\n\n| Name  |              Are               |     Values |\n| ----- | :----------------------------: | ---------: |\n| title |           title text           |     string |\n| speed | animation speed. Defaults to 1 | num, min:0 |\n\n## SlideDateOneVid\n\n```javascript\nnew Clip.SlideDateOneVid(\n  {\n    title: [\"the\", \"MOTORCORTEX TEAM\", \"Presents\"],\n    description: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam\n    eveniet eosdsdawdw numquam facilis libero iure natus, voluptatibus\n    deserunt laboriosam, perspiciatis consequatur nostrum.`,\n    bgUrl:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/assets/kissmybutonbg.jpg\",\n    overlayColor: [\"#101820D7\", \"#101820FF\"],\n    mainColor: \"#FEE715FF\",\n    bgUrl2:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg2.jpg\",\n    month: \"December\",\n    day: `monday`,\n    dayNumber: 20,\n    year: 2019,\n    vidDuration: 6000,\n    vidLink: [\n      \"https://donkey-spaces.ams3.digitaloceanspaces.com/assets/motorcortex-slides/vid.mp4\",\n    ],\n  },\n  {\n    selector: \".container3\",\n  }\n);\n```\n\n### SlideDateOneVid Attrs\n\n| Name         |                  Are                  |                                            Values |\n| ------------ | :-----------------------------------: | ------------------------------------------------: |\n| title        |              title text               |                                            string |\n| subtitle     |             subtitle text             |                                            string |\n| description  |           description text            |                                            string |\n| month        |               the month               |                                            string |\n| day          |             the day name              |                                            string |\n| number       |           the number of day           |                                            string |\n| year         |               the year                |                                            string |\n| bgUrl        |     the path of background image      |                                            string |\n| bgUrl2       |  the path of second background image  |                                            string |\n| overlayColor | the overlay color of background image | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| mainColor    |      the main color of elements       | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| speed        |    animation speed. Defaults to 1     |                                        num, min:0 |\n\n## Scrollslide\n\n```javascript\nconst scrolPresenter = new Clip.Scrollslide(\n  {\n    title: \"Presenter\",\n    name: \"name surname\",\n    position: \"Web developer at kissmybuton\",\n    bgUrl:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg3.jpg\",\n    overlayColor: [\"#101820D7\", \"#101820FF\"],\n    mainColor: main,\n  },\n  {\n    selector: \".container4\",\n  }\n);\n```\n\n### Scrollslide Attrs\n\n| Name         |                  Are                  |                                            Values |\n| ------------ | :-----------------------------------: | ------------------------------------------------: |\n| title        |              title text               |                                            string |\n| name         |             second title              |                                            string |\n| position     |               subtitle                |                                            string |\n| bgUrl        |     the path of background image      |                                            string |\n| overlayColor | the overlay color of background image | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| mainColor    |      the main color of elements       | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| speed        |    animation speed. Defaults to 1     |                                        num, min:0 |\n\n## LtRslide\n\n```javascript\nconst ltrPresenter = new Clip.LtRslide(\n  {\n    title: \"Presenter\",\n    name: \"name surname\",\n    position: \"Web developer at kissmybuton\",\n    bgUrl:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg4.jpg\",\n    overlayColor: [\"#101820D7\", \"#101820FF\"],\n    mainColor: main,\n  },\n  {\n    selector: \".container6\",\n  }\n);\n```\n\n### LtRslide Attrs\n\n| Name         |                                     Are                                      |                                            Values |\n| ------------ | :--------------------------------------------------------------------------: | ------------------------------------------------: |\n| title        |                                  title text                                  |                                            string |\n| name         |                                 second title                                 |                                            string |\n| position     | (secondary subtitle, can used to describe the job position of the presenter) |                                            string |\n| bgUrl        |                         the path of background image                         |                                            string |\n| overlayColor |                    the overlay color of background image                     | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| mainColor    |                          the main color of elements                          | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| speed        |                        animation speed. Defaults to 1                        |                                        num, min:0 |\n\n## SlideDateTwo\n\n```javascript\nconst dayTwo = new Clip.SlideDateTwo(\n  {\n    title: \"Presenter\",\n    name: \"name surname\",\n    position: \"Web developer at kissmybuton\",\n    bigTitle: \"Event\",\n    bgUrl:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg5.jpg\",\n    overlayColor: [\"#101820D7\", \"#101820FF\"],\n    dateOverlay: \"#ff00b3\",\n    mainColor: \"#00ff40\",\n    bgUrl2:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg2.jpg\",\n    month: \"December\",\n    day: `monday`,\n    dayNumber: 22,\n    year: 2019,\n  },\n  {\n    selector: \".container7\",\n  }\n);\n```\n\n### SlideDateTwo Attrs\n\n| Name         |                                     Are                                      |                                            Values |\n| ------------ | :--------------------------------------------------------------------------: | ------------------------------------------------: |\n| title        |                                  title text                                  |                                            string |\n| bigTitle     |                             big title title text                             |                                            string |\n| name         |                                 second title                                 |                                            string |\n| position     | (secondary subtitle, can used to describe the job position of the presenter) |                                            string |\n| month        |                                  the month                                   |                                            string |\n| day          |                                 the day name                                 |                                            string |\n| number       |                              the number of day                               |                                            string |\n| year         |                                   the year                                   |                                            string |\n| bgUrl        |                         the path of background image                         |                                            string |\n| bgUrl2       |                     the path of second background image                      |                                            string |\n| overlayColor |                    the overlay color of background image                     | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| dateOverlay  |                     the overlay color of date container                      | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| mainColor    |                         the main color of elementes                          | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| speed        |                        animation speed. Defaults to 1                        |                                        num, min:0 |\n\n## BtTslide\n\n```javascript\nconst bttPresenter = new Clip.BtTslide(\n  {\n    title: \"Presenter\",\n    name: \"name surname\",\n    position: \"Web developer at kissmybuton\",\n    bgUrl:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg4.jpg\",\n    overlayColor: [\"#101820D7\", \"#101820FF\"],\n    mainColor: main,\n  },\n  {\n    selector: \".container10\",\n  }\n);\n```\n\n### BtTslide Attrs\n\n| Name         |                                     Are                                      |                                            Values |\n| ------------ | :--------------------------------------------------------------------------: | ------------------------------------------------: |\n| title        |                                  title text                                  |                                            string |\n| name         |                                 second title                                 |                                            string |\n| position     | (secondary subtitle, can used to describe the job position of the presenter) |                                            string |\n| bgUrl        |                         the path of background image                         |                                            string |\n| overlayColor |                    the overlay color of background image                     | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| mainColor    |                         the main color of elementes                          | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| speed        |                        animation speed. Defaults to 1                        |                                        num, min:0 |\n\n## BtTslideDate\n\n```javascript\nconst bttDay = new Clip.BtTslideDate(\n  {\n    title: \"PresenterTEST\",\n    name: \"name surname\",\n    position: \"Web developer at kissmybuton\",\n    bgUrl:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg3.jpg\",\n    overlayColor: [\"#101820D7\", \"#101820FF\"],\n    dateOverlay: \"#ff00b3\",\n    mainColor: \"#00ff40\",\n    bgUrl2:\n      \"https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg2.jpg\",\n    month: \"December\",\n    day: `monday`,\n    dayNumber: 21,\n    year: 2019,\n  },\n  {\n    selector: \".container16\",\n  }\n);\n```\n\n### BtTslideDate Attrs\n\n| Name         |                  Are                  |                                            Values |\n| ------------ | :-----------------------------------: | ------------------------------------------------: |\n| title        |              title text               |                                            string |\n| name         |             second title              |                                            string |\n| position     |               subtitle                |                                            string |\n| month        |               the month               |                                            string |\n| day          |             the day name              |                                            string |\n| number       |           the number of day           |                                            string |\n| year         |               the year                |                                            string |\n| bgUrl        |     the path of background image      |                                            string |\n| bgUrl2       |  the path of second background image  |                                            string |\n| overlayColor | the overlay color of background image | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| dateOverlay  |  the overlay color of date container  | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| mainColor    |      the main color of elementes      | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| speed        |    animation speed. Defaults to 1     |                                        num, min:0 |\n\n## LtRslideTop\n\n```javascript\nconst ltrPresenterTop = new Clip.LtRslideTop(\n  {\n    title: \"Presenter\",\n    name: \"JOE SMO\",\n    position: \"Web developer at KissMyButton\",\n    bgUrl: \"./bg2.jpg\",\n    overlayColor: [\"#101820D7\", \"#101820FF\"],\n    mainColor: \"blue\",\n    speed: 2,\n  },\n  {\n    selector: \".container11\",\n  }\n);\n```\n\n### LtRslideTop Attrs\n\n| Name         |                  Are                  |                                            Values |\n| ------------ | :-----------------------------------: | ------------------------------------------------: |\n| title        |              title text               |                                            string |\n| name         |             second title              |                                            string |\n| position     |               subtitle                |                                            string |\n| bgUrl        |     the path of background image      |                                            string |\n| overlayColor | the overlay color of background image | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| mainColor    |      the main color of elementes      | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| speed        |    animation speed. Defaults to 1     |                                        num, min:0 |\n\n## RtLslide\n\n```javascript\nconst rtlPresenter = new Clip.RtLslide(\n  {\n    title: \"Presenter\",\n    name: \"JOE SMO\",\n    position: \"Web developer at KissMyButton\",\n    bgUrl: \"./bg4.jpg\",\n    overlayColor: [\"#101820D7\", \"#101820FF\"],\n    mainColor: \"blue\",\n    speed: 2,\n  },\n  {\n    selector: \".container4\",\n  }\n);\n```\n\n### RtLslide Attrs\n\n| Name         |                  Are                  |                                            Values |\n| ------------ | :-----------------------------------: | ------------------------------------------------: |\n| title        |              title text               |                                            string |\n| name         |             second title              |                                            string |\n| position     |               subtitle                |                                            string |\n| bgUrl        |     the path of background image      |                                            string |\n| overlayColor | the overlay color of background image | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| mainColor    |      the main color of elementes      | hex values or RGB(A) or text (\"blue\", \"red\", etc) |\n| speed        |    animation speed. Defaults to 1     |                                        num, min:0 |\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:\n\n1. **Fork** the repo on GitHub\n2. **Clone** the project to your own machine\n3. **Commit** changes to your own branch\n4. **Push** your work back up to your fork\n5. Submit a **Pull request** so that we can review your changes\n\n# License\n\n[MIT License](https://opensource.org/licenses/MIT)\n\n# Sponsored by\n\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-slides","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonkeyclip%2Fmotorcortex-slides","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonkeyclip%2Fmotorcortex-slides/lists"}