{"id":20762030,"url":"https://github.com/donkeyclip/motorcortex-animetitles","last_synced_at":"2025-08-31T11:35:49.538Z","repository":{"id":38140664,"uuid":"219498814","full_name":"donkeyclip/motorcortex-animetitles","owner":"donkeyclip","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-19T21:00:08.000Z","size":45085,"stargazers_count":0,"open_issues_count":14,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-19T22:21:05.407Z","etag":null,"topics":["animetitles","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,"zenodo":null}},"created_at":"2019-11-04T12:40:56.000Z","updated_at":"2023-01-31T17:41:00.000Z","dependencies_parsed_at":"2024-05-12T05:20:34.369Z","dependency_job_id":"c52a655c-e0a6-4fe3-b770-c709314ef215","html_url":"https://github.com/donkeyclip/motorcortex-animetitles","commit_stats":{"total_commits":692,"total_committers":15,"mean_commits":46.13333333333333,"dds":"0.48121387283236994","last_synced_commit":"ec401ef554c26709da19d03d1d936523794d5750"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-animetitles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-animetitles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-animetitles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-animetitles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donkeyclip","download_url":"https://codeload.github.com/donkeyclip/motorcortex-animetitles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251653659,"owners_count":21622169,"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":["animetitles","motorcortex","motorcortex-plugin"],"created_at":"2024-11-17T10:28:45.846Z","updated_at":"2025-04-30T06:28:59.589Z","avatar_url":"https://github.com/donkeyclip.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MotorCortex-Animetitles\n\n**Table of Contents**\n\n- [MotorCortex-Animetitles](#motorcortex-animetitles)\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  - [RotatedLine](#rotatedline)\n  - [RollingText](#rollingtext)\n  - [RotatedLineReveal](#rotatedlinereveal)\n  - [SvgBorder](#svgborder)\n  - [Circle](#circle)\n  - [SvgDraw](#svgdraw)\n  - [LogoBox](#logobox)\n  - [CircularText](#circulartext)\n  - [LetterScale](#letterscale)\n  - [RightOpacity](#rightopacity)\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-animetitles/demo/)\n\n# Intro / Features\n\nUsing MotorCortex-Animetitles you can animate perfect titles for your clips, via its easy to use incidents.\n\nThis Plugin exposes ten incidents:\n\n- RotatedLine\n- RollingText\n- RotatedLineReveal\n- SvgBorder\n- Circle\n- SvgDraw\n- LogoBox\n- CircularText\n- LetterScale\n- RightOpacity\n\n# Getting Started\n\n## Installation\n\n```bash\n$ npm install --save @donkeyclip/motorcortex-animetitles\n# OR\n$ yarn add @donkeyclip/motorcortex-animetitles\n```\n\n## Importing and loading\n\n```javascript\nimport { loadPlugin } from \"@donkeyclip/motorcortex\";\nimport TitlesPlugin from \"@donkeyclip/motorcortex-animetitles\";\nconst Titles = loadPlugin(TitlesPlugin);\n```\n\n# Creating Incidents\n\n## RotatedTextReveal\n\n```javascript\nconst nameOfIncident = new Titles.RotatedTextReveal(\n  {\n    text: \"Rotated Reveal Incident\",\n    width: 600,\n    color: \"black\",\n    fontFamily: \"Righteous\",\n    fontSize: 40,\n    stagger: \"0, 300\",\n    exitTime: 1000,\n  },\n  { duration: 2000, selector: \".rotatedtextreveal\" }\n);\n```\n\n### RotatedTextReveal Attrs\n\n| Name       |               Are                |                    Values |\n| ---------- | :------------------------------: | ------------------------: |\n| width      |  total width of clip container   |      all positive numbers |\n| fontSize   |         size of the font         |      all positive numbers |\n| color      |        the color of text         |         hex values or RGB |\n| text       |               text               |               normal text |\n| stagger    | stagger between words or letters | valid Motorcortex stagger |\n| fontFamily |           font family            |                    string |\n| exitTime   |    time for animation to exit    |                    number |\n\n## TextReveal\n\n```javascript\nconst nameOfIncident = new new Titles.TextReveal(\n  {\n    text: \"Reveal Incident\",\n    width: 500,\n    color: \"black\",\n    fontFamily: \"Righteous\",\n    fontSize: 40,\n    stagger: \"0, 300,0.5,linear,omni\",\n    wordSplit: false,\n    exitTime: 1000,\n  },\n  { duration: 2500, selector: \".rollingtext\" }\n)();\n```\n\n### TextReveal Attrs\n\n| Name       |               Are                |                    Values |\n| ---------- | :------------------------------: | ------------------------: |\n| width      |  total width of clip container   |      all positive numbers |\n| fontSize   |         size of the font         |      all positive numbers |\n| color      |        the color of text         |         hex values or RGB |\n| text       |               text               |               normal text |\n| stagger    | stagger between words or letters | valid Motorcortex stagger |\n| fontFamily |           font family            |                    string |\n| wordSplit  | font splitting or word splitting |                true,false |\n| exitTime   |    time for animation to exit    |                    number |\n\n## RotatedLine\n\n```javascript\nconst nameOfIncident = new Titles.RotatedLine(\n  {\n    width: 400,\n    size: \"XL\",\n    lineColor: \"#ff0000\",\n    textColor: \"#000\",\n    subTitle1: \"test\",\n    subTitle2: \"test2\",\n    subTitle3: \"test3\",\n    title: \"dokimi\",\n    stopOnLast: false,\n    delayEnd: 3000,\n    fontFamily: \"Rubik Mono One\",\n  },\n  {\n    selector: \".rotatedline\",\n  }\n);\n```\n\n### RotateLine Attrs\n\n| Name                              |                       Are                       |               Values |\n| --------------------------------- | :---------------------------------------------: | -------------------: |\n| width                             |          total width of clip container          | all positive numbers |\n| size                              |            scale of clip components             |     \"S\",\"M\",\"L\",\"XL\" |\n| lineColor                         |                the color of line                |    hex values or RGB |\n| textColor                         |                the color of text                |    hex values or RGB |\n| subTitle1 , subTitle2 , subTitle3 |                   right texts                   |          normal text |\n| title                             |                    left text                    |          normal text |\n| stopOnLast                        | if you like to stop animation on last text line |           true,false |\n| delayEnd                          |           delay before last animation           |          millisecond |\n| fontFamily                        |                   font family                   |               string |\n\n## RollingText\n\n```javascript\nconst nameOfIncident = new Titles.RollingText(\n  {\n    width: 450,\n    size: \"XL\",\n    lineColor: \"#ff0000\",\n    textColor: \"#000\",\n    subTitle1: \"The\",\n    subTitle2: \"MotorCortex Team\",\n    subTitle3: \"Presents\",\n    stopOnLast: false,\n    delayEnd: 1000,\n    fontFamily: \"Commissioner\",\n  },\n  {\n    selector: \".rollingtext\",\n  }\n);\n```\n\n### Rollingtext Attrs\n\n| Name                              |                       Are                       |                        Values |\n| --------------------------------- | :---------------------------------------------: | ----------------------------: |\n| width                             |          total width of clip container          |          all positive numbers |\n| size                              |            scale of clip components             | \"S\",\"M\",\"L\",\"XL\",\"XXL\",\"XXXL\" |\n| lineColor                         |                the color of line                |             hex values or RGB |\n| textColor                         |                the color of text                |             hex values or RGB |\n| subTitle1 , subTitle2 , subTitle3 |               rolling text lines                |                   normal text |\n| stopOnLast                        | if you like to stop animation on last text line |                    true,false |\n| delayEnd                          |           delay before last animation           |                   millisecond |\n| fontFamily                        |                   font family                   |                        string |\n\n## RotatedLineReveal\n\n```javascript\nconst nameOfIncident = new Titles.RotatedLineReveal(\n  {\n    width: 800,\n    size: \"M\",\n    lineColor: \"#ff0000\",\n    textColor: \"#000\",\n    title: \"Animetitles\",\n    subtitle: \"MC Plugin\",\n    leftEnd: 100,\n    stopOnLast: false,\n    fontFamily: \"Commissioner\",\n  },\n  {\n    selector: \".rotatedlinereveal\",\n  }\n);\n```\n\n### RotatedLineReveal Attrs\n\n| Name       |                            Are                            |               Values |\n| ---------- | :-------------------------------------------------------: | -------------------: |\n| width      |               total width of clip container               | all positive numbers |\n| size       |                 scale of clip components                  |          \"S\",\"M\",\"L\" |\n| lineColor  |                     the color of line                     |    hex values or RGB |\n| textColor  |                     the color of text                     |    hex values or RGB |\n| title      |                        title text                         |          normal text |\n| subtitle   |                       subtitle text                       |          normal text |\n| leftEnd    | left distance of componet from the left side of container |              numbers |\n| stopOnLast |      if you like to stop animation on last text line      |           true,false |\n| delayEnd   |                delay before last animation                |          millisecond |\n| fontFamily |                        font family                        |               string |\n\n## SvgBorder\n\n```javascript\nconst nameOfIncident = new Titles.SvgBorder(\n  {\n    size: \"L\",\n    lineColor: \"#ff0000\",\n    textColor: \"#000\",\n    subTitle: \"Developed by\",\n    slogan: \"-KMB-\",\n    title: \"MotorCortex Team\",\n    stopOnLast: false,\n    fontFamily: \"Commissioner\",\n    borderGap: 300,\n  },\n  {\n    selector: \".svgborder\",\n  }\n);\n```\n\n### SvgBorder Attrs\n\n| Name       |                       Are                       |               Values |\n| ---------- | :---------------------------------------------: | -------------------: |\n| width      |          total width of clip container          | all positive numbers |\n| size       |            scale of clip components             |          \"S\",\"M\",\"L\" |\n| lineColor  |                the color of line                |    hex values or RGB |\n| textColor  |                the color of text                |    hex values or RGB |\n| subTitle   |                  top left text                  |          normal text |\n| slogan     |                under border text                |          normal text |\n| title      |                   title text                    |          normal text |\n| stopOnLast | if you like to stop animation on last text line |           true,false |\n| delayEnd   |           delay before last animation           |          millisecond |\n| fontFamily |                   font family                   |               string |\n\n## Circle\n\n```javascript\nconst nameOfIncident = new Titles.Circle(\n  {\n    fontSize: 40,\n    circleColor: \"#ff0000\",\n    textColor: \"#000\",\n    title: \"ANIMATED\",\n    subTitle: \"TITLES\",\n    stopOnLast: false,\n    fontFamily: \"Righteous\",\n    width: 500,\n  },\n  {\n    selector: \".circle\",\n  }\n);\n```\n\n#### IMPORTANT\n\nIn order to use tin incident you should include the img.svg that is in demo folder in your clip.js directory\n\n### Circle Attrs\n\n| Name        |                             Are                              |               Values |\n| ----------- | :----------------------------------------------------------: | -------------------: |\n| fontSize    |                       size of the font                       | all positive numbers |\n| width       | total width of clip container and width/height of the circle | all positive numbers |\n| circleColor |                     the color of circle                      |    hex values or RGB |\n| textColor   |                      the color of text                       |    hex values or RGB |\n| subTitle    |                        top left text                         |          normal text |\n| title       |                svg cobe with 1 path tag only                 |             svg text |\n| stopOnLast  |       if you like to stop animation on last text line        |           true,false |\n| delayEnd    |                 delay before last animation                  |          millisecond |\n| fontFamily  |                         font family                          |               string |\n\n## LogoBox\n\n```javascript\nconst nameOfIncident = new Titles.LogoBox(\n  {\n    size: 2,\n    textColor: \"#fff\",\n    bgColor: \"#000\",\n    subTitle1: \"testdawdawddawd\",\n    subTitle2: \"test2\",\n    subTitle3: \"test3\",\n    width: 200,\n    stopOnLast: false,\n    logoUrl:\n      \"https://donkeyclip.github.io/motorcortex-animetitles/demo/logo.png\",\n    fontFamily: \"Rubik Mono One\",\n  },\n  {\n    selector: \".logobox\",\n  }\n);\n```\n\n#### IMPORTANT\n\nIn order to use tin incident you should include the logo.png image in your clip.js directory\n\n### LogoBox Attrs\n\n| Name                              |                       Are                       |               Values |\n| --------------------------------- | :---------------------------------------------: | -------------------: |\n| size                              |           change the size of element            | all positive numbers |\n| bgColor                           |                 the color of bg                 |    hex values or RGB |\n| textColor                         |                the color of text                |    hex values or RGB |\n| subTitle1 , subTitle2 , subTitle3 |                   right texts                   |          normal text |\n| width                             |          total width of text container          | all positive numbers |\n| stopOnLast                        | if you like to stop animation on last text line |           true,false |\n| logoUrl                           |                 url of an image                 |               string |\n| fontFamily                        |                   font family                   |               string |\n\n## CircularText\n\n```javascript\nconst nameOfIncident = new Titles.CircularText(\n  {\n    width: 500,\n    height: 500,\n    color: \"#ff0000\",\n    text: \"CircularText - AnimeTitles - MotorCortex - Plugin -\",\n    fontSize: 10,\n    viewBox: 100,\n    path: 38,\n    fill: \"#ff000000\",\n    fontFamily: \"Righteous\",\n  },\n  {\n    selector: \".circulartext\",\n    repeats: 2,\n  }\n);\n```\n\n### CircularText Attrs\n\n| Name       |                 Are                 |            Values |\n| ---------- | :---------------------------------: | ----------------: |\n| width      |    total width of clip container    |            number |\n| height     |   total height of clip container    |            number |\n| color      |         color for the text          | hex values or RGB |\n| text       |         the displayed text          |            string |\n| fontSize   |          size of the font           |            number |\n| fontFamily |             font family             |            string |\n| viewBox    | width for the wrapper of the circle |            number |\n| path       |    width for the circle's radius    |            number |\n| fill       |       color for the svg shape       | hex values or RGB |\n\n## LetterScale\n\n```javascript\nconst nameOfIncident = new Titles.LetterScale(\n  {\n    width: 900,\n    height: 900,\n    color: \"rebeccapurple\",\n    text: \"LetterScale\",\n    fontSize: 100,\n    stroke: false,\n    strokeSize: 2,\n    strokeColor: \"rebeccapurple\",\n    fontFamily: \"Righteous\",\n  },\n  {\n    selector: \".letterscale\",\n  }\n);\n```\n\n### LetterScale Attrs\n\n| Name        |              Are               |            Values |\n| ----------- | :----------------------------: | ----------------: |\n| width       | total width of clip container  |            number |\n| height      | total height of clip container |            number |\n| color       |       color for the text       | hex values or RGB |\n| text        |       the displayed text       |            string |\n| fontSize    |        size of the font        |            number |\n| fontFamily  |          font family           |            string |\n| stroke      |     a border to SVG shapes     |           boolean |\n| strokeSize  |       the stroke's size        |            number |\n| strokeColor |       the stroke's color       | hex values or RGB |\n\n## RightOpacity\n\n```javascript\nconst nameOfIncident = new Titles.RightOpacity(\n  {\n    width: 1000,\n    height: 250,\n    text: \"RightOpacity\",\n    color: \"#0000\",\n    fontSize: 100,\n    stroke: true,\n    strokeSize: 2,\n    strokeColor: \"rebeccapurple\",\n    fontFamily: \"Rubik Mono One\",\n    exitTime: 1000,\n  },\n  {\n    selector: \".rightopacity\",\n  }\n);\n```\n\n### RightOpacity Attrs\n\n| Name        |              Are               |            Values |\n| ----------- | :----------------------------: | ----------------: |\n| width       | total width of clip container  |            number |\n| height      | total height of clip container |            number |\n| color       |       color for the text       | hex values or RGB |\n| text        |       the displayed text       |            string |\n| fontSize    |        size of the font        |            number |\n| fontFamily  |          font family           |            string |\n| stroke      |     a border to SVG shapes     |           boolean |\n| strokeSize  |       the stroke's size        |            number |\n| strokeColor |       the stroke's color       | hex values or RGB |\n| exitTime    |   time for animation to exit   |            number |\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-animetitles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonkeyclip%2Fmotorcortex-animetitles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonkeyclip%2Fmotorcortex-animetitles/lists"}