{"id":19483167,"url":"https://github.com/mmgrant73/typewriter","last_synced_at":"2026-06-20T09:31:20.511Z","repository":{"id":57400881,"uuid":"232621395","full_name":"mmgrant73/typewriter","owner":"mmgrant73","description":"type-writer is a text effect web component (block element). Whatever you put in the innerText will look like its being type out. There are four types of cursors that can be set and two types of typing effects.  You can set  the font-size but at the moment it only uses the Source Code Pro font but in the future I will add support whatever font a user would like to use.","archived":false,"fork":false,"pushed_at":"2020-01-08T17:45:13.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-20T06:49:51.733Z","etag":null,"topics":["component","css","html","javascript","text","typewriter","web","webpage"],"latest_commit_sha":null,"homepage":null,"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/mmgrant73.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-08T17:36:59.000Z","updated_at":"2020-02-08T09:16:49.000Z","dependencies_parsed_at":"2022-09-05T03:01:32.721Z","dependency_job_id":null,"html_url":"https://github.com/mmgrant73/typewriter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mmgrant73/typewriter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Ftypewriter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Ftypewriter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Ftypewriter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Ftypewriter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmgrant73","download_url":"https://codeload.github.com/mmgrant73/typewriter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Ftypewriter/sbom","scorecard":{"id":654354,"data":{"date":"2025-08-11","repo":{"name":"github.com/mmgrant73/typewriter","commit":"fca2ff43cf845bf0b470cc77c29d34093dd1cb6c"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/5 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-21T14:16:30.360Z","repository_id":57400881,"created_at":"2025-08-21T14:16:30.360Z","updated_at":"2025-08-21T14:16:30.360Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34565238,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["component","css","html","javascript","text","typewriter","web","webpage"],"created_at":"2024-11-10T20:13:53.873Z","updated_at":"2026-06-20T09:31:20.491Z","avatar_url":"https://github.com/mmgrant73.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)\n# TypeWriter:\n\n### What is it?\ntype-writer is a text effect web component (block element). Whatever you put in the innerText will look like\nits being type out. There are four types of cursors that can be set and two types of typing effects.  You can set \nthe font-size but at the moment it only uses the Source Code Pro font but in the future I will add support\nwhatever font a user would like to use.\n\n![Alt text](https://github.com/mmgrant73/typewriter/blob/master/typewriter.png?raw=true \"Image-TypeWriter\")\n\n[Click here for Demo](https://mmgrant73.github.io/typewriter/typewriter.html) \n\n### How to use it?\nIt is quite easy to use it on your webpage. Just follow the below steps:\n\n1. Include the link to the script file that holds the this custom web component (reveal-box.js) near the bottom of \n   the body section of your webpage.  See below\n   \n```\n    \u003cscript src=\"./typewriter.js\"\u003e\u003c/script\u003e\n```\n\n2.  Then use the custom element tags on your webpage.\n\n```\n    \u003ctype-writer cursor=\"underline\" effect=\"standard\" align=\"left\" fontsize=\"28px\"\u003e\n        This is a typewriter effect\n    \u003c/type-writer\u003e\n```\n\nNote: That is all you have to do to use this custom element.  There is an example HTML page (acronym.html) that shows how to use it.\n\n```\n    \u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n      \u003chead\u003e\n        \u003ctitle\u003eTypewriter Web Component\u003c/title\u003e\n        \u003cstyle\u003e\n       \n            body {\n                padding: 40px;\n                background-color: #121212;\n                color: white;\n            }\n            \n        \u003c/style\u003e\n      \u003c/head\u003e\n      \n      \u003cbody\u003e\n      \n        \u003ch1 style=\"padding: 10px, 0px, 0px, 25px; margin: 20px\"\u003eTypewriter web component:\u003c/h1\u003e\n\n        \u003ctype-writer cursor=\"underline\" effect=\"standard\" align=\"left\" fontsize=\"28px\"\u003e\n            This is a test.\n        \u003c/type-writer\u003e\n\n        \u003cscript src=\"./typewriter.js\"\u003e\u003c/script\u003e\n\n      \u003c/body\u003e\n      \n    \u003c/html\u003e\n```\n\n### There are only four properties that you can use to customize this element.\n\nThere are six attributes that you can set:\n1. cursor - the type of cursor that will be used for the typing effect\n2. effect - the type of typing effect that will be used\n3. align - is used to set how the text will be aligned in the DIV tag\n4. fontsize - The font-size that the text will take\n5. textcolor - The color of the text\n6. cursorcolor - the color of the cursor\n\nNote: The inner text within the type-writer tag will be the text used for the typing effect\n\n### Type of Cursor (There are four types):\n1. line\n2. underline\n3. block\n4. none\n\n### Type of effect (There are two):\n1. standard - the cursor would jump in steps to make it look like the text is being typed\n2. smooth - the cursor would travel smoothly across the screen without jumping.\n\n### Types of aligment:\n1. left\n2. right\n3. center\n\n### To Do:\n1. Add support for more fonts families\n\nNote: The default attributes are (cursor: line, effect: standard. align: left and font-size: 28px)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmgrant73%2Ftypewriter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmgrant73%2Ftypewriter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmgrant73%2Ftypewriter/lists"}