{"id":14990309,"url":"https://github.com/auroratide/typewritten-text","last_synced_at":"2025-04-12T02:11:02.592Z","repository":{"id":97408119,"uuid":"404504696","full_name":"Auroratide/typewritten-text","owner":"Auroratide","description":"The text types itself out!","archived":false,"fork":false,"pushed_at":"2021-10-05T21:10:41.000Z","size":10420,"stargazers_count":75,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T21:51:11.443Z","etag":null,"topics":["typewriter","web-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Auroratide.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-08T21:48:07.000Z","updated_at":"2023-10-05T22:42:20.000Z","dependencies_parsed_at":"2023-03-04T05:45:36.550Z","dependency_job_id":null,"html_url":"https://github.com/Auroratide/typewritten-text","commit_stats":{"total_commits":44,"total_committers":1,"mean_commits":44.0,"dds":0.0,"last_synced_commit":"437c9198f0ac6d4e72c948a14761fa58a50f9a64"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Auroratide%2Ftypewritten-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Auroratide%2Ftypewritten-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Auroratide%2Ftypewritten-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Auroratide%2Ftypewritten-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Auroratide","download_url":"https://codeload.github.com/Auroratide/typewritten-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505929,"owners_count":21115354,"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":["typewriter","web-component"],"created_at":"2024-09-24T14:19:52.243Z","updated_at":"2025-04-12T02:11:02.567Z","avatar_url":"https://github.com/Auroratide.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;typewritten-text\u0026gt; Element\n\nPerforms a **typewriter effect** on the selected piece of text!\n\n![Text is automatically typed out one letter at a time](https://github.com/Auroratide/typewritten-text/blob/master/typewritten-text.gif)\n\nSee the **[Live Demo](https://auroratide.github.io/typewritten-text/)** for some examples!\n\n## Installation\n\nYou can import through CDN:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@auroratide/typewritten-text/lib/style.css\" /\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/@auroratide/typewritten-text/lib/define.js\"\u003e\u003c/script\u003e\n```\n\nOr, you may install through [NPM](https://www.npmjs.com/package/@auroratide/typewritten-text) and include it as part of your build process:\n\n```\n$ npm i @auroratide/typewritten-text\n```\n\n```js\nimport '@auroratide/typewritten-text/lib/style.css'\nimport '@auroratide/typewritten-text/lib/define.js'\n```\n\u003csmall\u003e\u003cstrong\u003eNote\u003c/strong\u003e: How you import into your project depends on its configuration. The \u003ccode\u003estyle.css\u003c/code\u003e file should be imported with your root CSS, and the \u003ccode\u003edefine.js\u003c/code\u003e file should imported with your root Javascript.\u003c/small\u003e\n\n## Usage\n\n`\u003ctypewritten-text\u003e` is an **inline markup element** that you can use in your HTML document.\n\n```html\n\u003cp\u003eSome \u003ctypewritten-text\u003etext to type out!\u003c/typewritten-text\u003e\u003c/p\u003e\n```\n\nSince this is Just HTML\u003csup\u003eTM\u003c/sup\u003e, you can use `typewritten-text` with other markup tags:\n\n```html\n\u003cp\u003e\u003ctypewritten-text\u003eSome \u003cstrong\u003estrong\u003c/strong\u003e and \u003cem\u003eemphasized\u003c/em\u003e text.\u003c/typewritten-text\u003e\u003c/p\u003e\n```\n\n**Note:** `typewritten-text` has text-level semantics, meaning it can contain anything that a `span` can contain. See [Phrasing Content](https://html.spec.whatwg.org/#phrasing-content-2).\n\n### Repeat Indefinitely\n\nThis types and backspaces the text on a loop.\n\n```html\n\u003cp\u003eSome \u003ctypewritten-text repeat\u003etext to type out!\u003c/typewritten-text\u003e\u003c/p\u003e\n```\n\n### Adjust Timing\n\nThe time provided is number of milliseconds between each letter.\n\n```html\n\u003cp\u003eSome \u003ctypewritten-text letter-interval=\"400\"\u003etext to type out!\u003c/typewritten-text\u003e\u003c/p\u003e\n```\n\nThe `phrase-interval` is the time between when the text is typed out and when it starts to be removed during a repetition loop.\n\n```html\n\u003cp\u003eSome \u003ctypewritten-text repeat phrase-interval=\"2000\"\u003etext to type out!\u003c/typewritten-text\u003e\u003c/p\u003e\n```\n\n### Start Paused\n\nThis will start paused until invoked by **javascript**.\n\n```html\n\u003cp\u003eSome \u003ctypewritten-text paused\u003etext to type out!\u003c/typewritten-text\u003e\u003c/p\u003e\n```\n\n### All Attributes\n\n| Attribute | Default | Description |\n| ------------- | --------- | ------------- |\n| `repeat` | - | Whether the text should type itself repeatedly on a loop |\n| `letter-interval` | 100 | Time between each letter in milliseconds |\n| `phrase-interval` | 1000 | Time between completion and restart during a repeat loop in milliseconds |\n| `paused` | - | Whether the animation should start paused |\n\n## Style API\n\nSince `typewritten-text` is Just HTML\u003csup\u003eTM\u003c/sup\u003e, you can style it the same way you style any HTML tag.\n\n```css\ntypewritten-text {\n    color: red;\n}\n```\n\n**Note**: Depending on what you want to do, you may run into some [Implementation Gotchas](#implementation-gotchas).\n\n### Cursor\n\nThe blinking cursor can be customized with either CSS variables or directly via selectors.\n\n| Variable | Default | Description |\n| ------------- | --------- | ------------- |\n| `--typewritten-text_cursor-width` | 0.125em | How wide the cursor is |\n| `--typewritten-text_cursor-style` | solid | Whether the cursor is solid, dashed, dotted, etc; can be any border-style value |\n| `--typewritten-text_cursor-color` | currentColor | Color of the cursor |\n| `--typewriten-text_cursor-interval` | 700ms | The duration of the blink animation |\n\nThe cursor can be arbitrarily customized with the following CSS selectors:\n\n```css\n.typewritten-text_character::after,\n.typewritten-text_start::after { }\n```\n\nThe `*_start` selector represents the start of the text and can be used to style the initial cursor differently than the cursor-in-motion. For example, to hide the cursor while the animation is paused and yet show it at the start, you can do:\n\n```css\ntypewritten-text[paused] .typewritten-text_character::after {\n    visibility: hidden;\n}\n```\n\n## Javascript API\n\nThe element exposes some useful methods to enable custom animation. Once you have obtained a reference to a `TypewrittenText` element:\n\n```js\nconst elem = document.querySelector('typewritten-text')\n```\n\nYou can use the following methods:\n\n| Method | Description |\n| ------------- | ------------- |\n| `start()` | Start the animation cycle if it is currently paused |\n| `pause()` | Pause the animation cycle if it is currently running |\n| `typeNext()` | Manually type the next character |\n| `backspace()` | Manually remove one character |\n| `tick()` | Run one frame of the animation; only works if not paused |\n| `forceTick()` | Run one frame of the animation regardless of paused state |\n| `reverse()` | Reverse the direction of the animation |\n| `reset()` | Completely resets the element and animation; may be useful if the content within the element is dynamic |\n\n### Properties\n\nEach attribute can be accessed as a Javascript property.\n\n* `elem.repeat`\n* `elem.paused`\n* `elem.letterInterval`\n* `elem.phraseInterval`\n\nOne additional property is provided:\n\n* `elem.length`: The total number of typeable characters\n\n### Events\n\nThe `typewritten-text` element dispatches the following events:\n\n| Name | When Triggered |\n| ------------- | ------------- |\n| `typewritten-text:nextchar` | Anytime a character is typed into view |\n| `typewritten-text:prevchar` | Anytime a character is removed from view |\n| `typewritten-text:phrasetyped` | When the full phrase becomes fully typed |\n| `typewritten-text:phraseremoved` | When the full phrase becomes untyped |\n| `typewritten-text:started` | When the animation is started |\n| `typewritten-text:paused` | When the animation is paused |\n\n### Element Class\n\nThe element interface can be accessed in javascript as well.\n\n```js\nimport { TypewrittenText } from '@auroratide/typewritten-text'\n```\n\n## Accessibility\n\nThis custom element is built with accessibility in mind!\n\n* The `typewritten-text` element always represents its textual content regardless of visibility state. Screenreaders should read the text in its entirety.\n* The textual content can be copied and pasted regardless of visibility state.\n* The blinking cursor animation is disabled for people who [prefer reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)\n\n## Implementation Gotchas\n\nIt is possible the non-trivial implementation of `typewritten-text` can lead to unexpected complications with advanced customization.\n\nMost notably, `typewritten-text` works by **cloning** its inner content into a separate custom element called `typewritten-text-mirror`, within which each letter is wrapped with a `span` denoted with the class `typewritten-text_character`. The following is an example before-and-after of what the resulting markup looks like once the element has finished rendering:\n\n```html\n\u003ctypewritten-text\u003eHey\u003c/typewritten-text\u003e\n\n\u003c!-- ...becomes... --\u003e\n\n\u003ctypewritten-text\u003eHey\u003ctypewritten-text-mirror slot=\"mirror\" aria-label=\"Hey\"\u003e\n    \u003cspan class=\"typewritten-text_word\"\u003e\n        \u003cspan class=\"typewritten-text_character\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n        \u003cspan class=\"typewritten-text_character\" aria-hidden=\"true\"\u003eH\u003c/span\u003e\n        \u003cspan class=\"typewritten-text_character\" aria-hidden=\"true\"\u003ee\u003c/span\u003e\n        \u003cspan class=\"typewritten-text_character\" aria-hidden=\"true\"\u003ey\u003c/span\u003e\n    \u003c/span\u003e\n\u003c/typewritten-text-mirror\u003e\u003c/typewritten-text\u003e\n```\n\nThe only part that becomes visible to the viewer is the contents of `typewritten-text-mirror`. As a result, a selector like `typewritten-text \u003e span` will have unexpected results.\n\nThis architecture has the following explicit goals:\n\n* Preserve, as much as possible, the way the web developer has specified the usage of the element. This means not overriding the inner content of `typewritten-text`.\n* Allow the use of semantic markup within `typewritten-text` so it acts as much as possible like a native text-level element\n* Enable typing each individual character regardless of its formatting, allowing for size- and position-independence.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauroratide%2Ftypewritten-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fauroratide%2Ftypewritten-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauroratide%2Ftypewritten-text/lists"}