{"id":17473754,"url":"https://github.com/anyrequest/typoz","last_synced_at":"2026-01-03T13:44:27.718Z","repository":{"id":212454421,"uuid":"731420296","full_name":"AnyRequest/typoz","owner":"AnyRequest","description":"It was created to make it easier for users to implement their own typing effects. We are envisioning unique and diverse effects.","archived":false,"fork":false,"pushed_at":"2024-07-17T10:30:44.000Z","size":2177,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-18T20:46:03.050Z","etag":null,"topics":["javascript","korean-typing","korean-typing-effect","library","react","typescript","typing","typing-builder","typing-effect","write"],"latest_commit_sha":null,"homepage":"https://anyrequest.github.io/typoz/","language":"HTML","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/AnyRequest.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":"2023-12-14T03:31:17.000Z","updated_at":"2024-07-17T10:30:47.000Z","dependencies_parsed_at":"2025-03-03T10:32:17.538Z","dependency_job_id":"50499d1b-fc7e-43b0-8994-755493a4d5f8","html_url":"https://github.com/AnyRequest/typoz","commit_stats":null,"previous_names":["anyrequest/typer","anyrequest/typoz","anyrequest/typex"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyRequest%2Ftypoz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyRequest%2Ftypoz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyRequest%2Ftypoz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyRequest%2Ftypoz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnyRequest","download_url":"https://codeload.github.com/AnyRequest/typoz/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243963589,"owners_count":20375644,"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":["javascript","korean-typing","korean-typing-effect","library","react","typescript","typing","typing-builder","typing-effect","write"],"created_at":"2024-10-18T18:07:00.023Z","updated_at":"2026-01-03T13:44:27.653Z","avatar_url":"https://github.com/AnyRequest.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Typoz\n\n`Typoz`는 '타입(type)'과 'oz(온스)'의 결합으로, 다양한 타이핑 효과를 제공하는 라이브러리입니다.\n\n## Version\n\n`v0.1.2`\n\n## Typoz의 한글 분해, 조합\n\n`음소` -\u003e `음절` \\[조합\\], `음절` -\u003e `음소` \\[분해\\] 하며, 한글을 입력할 때 나타나는 자모의 조합 효과를 그대로 재현합니다.\n\n## Installation\n\n```bash\nnpm install typoz\npnpm add typoz\n```\n\n## CDN\n\n```html\n\u003cscript src=\"https://www.unpkg.com/typoz@0.1.2/umd/typoz.min.js\"\u003e\u003c/script\u003e\n```\n\n## Congifuration\n\n```javascript\nimport Typoz from 'typoz';\n// or import { Typoz } from 'typoz';\n\nconst typoz = new Typoz();\ntypoz.initialize();\ntypoz.globalConfig(/* custom configs */);\n```\n\n## How to use\n\n기본적으로 제공되는 `typoz`의 기능은 크게 세 가지입니다.\n\n1. 지정된 클래스명(.typoz)를 탐색하고 자동 렌더링\n2. 특정 `id` 또는 `class`값으로 지정하여 렌더링\n3. 빌더를 이용한 세부적인 타이핑 제어\n\n### Util (since 0.1.1)\n\n버전 0.1.1부터 유틸리티가 추가됩니다.\n\n- 한글 자음으로 한국어 키워드를 검색할 수 있습니다.\n- 명사에 적합한 조사를 자동으로 부여할 수 있습니다.\n  - 예시) 라면, 사과... =\u003e 라면과 사과와...\n- 적합하지 않은 조사를 검증하고 올바른 조사를 찾을 수 있습니다.\n  - 예시) 라면와 =\u003e 라면과\n- 동사, 형용사를 변환합니다.\n  - 예시) verb + ~서: 무르다 =\u003e 물러, 돕다 =\u003e 도와, 무찌르다 =\u003e 무찔러\n\n### Usage\n\n```html\n\u003c!-- 기본적으로 클래스명 typoz를 탐색하고 자동 실행합니다. --\u003e\n\u003cdiv class=\"typoz\"\u003e테스트 내용 타이핑 효과.\u003c/div\u003e\n```\n\n```javascript\nimport Typoz from 'typoz';\n\nconst typoz = new Typoz();\ntypoz.initialize();\ntypoz.globalConfig();\n```\n\n#### Manual rendering\n\n```html\n\u003c!-- 기본적으로 클래스명 typoz를 탐색하고 자동 실행합니다. --\u003e\n\u003cdiv class=\"typoz\"\u003e테스트 내용 타이핑 효과.\u003c/div\u003e\n```\n\n```javascript\nimport Typoz from 'typoz';\n\nconst typoz = new Typoz();\ntypoz.initialize();\ntypoz.globalConfig({\n  autoRender: false,\n});\n\ntypoz.render();\n```\n\n#### Add TypeNode\n\n원하는 타이핑을 추가로 작성하고 개별/전역 설정을 할 수 있습니다.\n\n```javascript\nimport Typoz from 'typoz';\n\nconst typoz = new Typoz();\ntypoz.initialize();\ntypoz.globalConfig({\n  speed: { write: 1 },\n  nodes: [\n    {\n      select: '#target1',\n      words: ['또 다른 텍스트 입력'],\n      config: {\n        speed: { write: 5 },\n      },\n    },\n  ],\n});\n```\n\n#### Add render element\n\n원하는 타이핑을 추가로 작성하고 개별/전역 설정을 할 수 있습니다.\n\n```javascript\nimport Typoz from 'typoz';\n\nconst typoz = new Typoz();\ntypoz.initialize();\ntypoz.globalConfig({\n  autoRender: false,\n  speed: { write: 1 },\n});\n\nconst myElements = document.querySelectorAll('.test');\ntypoz.render(myElements);\n\n// or\n\nconst myElement = document.querySelector('.test');\ntypoz.render([myElement]);\n```\n\n### TypeNodeBuilder\n\n빌더를 이용해 원하는 타이핑 효과를 제어할 수 있습니다. 빌더는 `TypeNode`를 렌더링하는 방식과 달리 개별 단위로 실행합니다. 메서드 행위는 아래와 같습니다.\n\n- createBuilder(): 빌더 인스턴스를 얻습니다. (✨ since v0.1.0)\n- node(): (deprecated) 빌더 인스턴스를 얻습니다. (since v0.1.0)\n- select(idOrClass: string): 타겟을 지정합니다.\n- conf(config: Options): Typoz의 config와 동일한 포멧입니다.\n- write(word: string): 현재 커서에서 한글, 영문, 숫자 등 모든 문자를 단일 또는 문자열을 입력합니다.\n- move(value: number): value값 만큼 커서를 이동합니다.\n- pause(value: number): value값 만큼 휴식합니다.\n- erase(): 현재 커서에서 글자를 지웁니다.\n- run(): 지정한 흐름으로 한 번 실행한 후 완료 시 멈춥니다.\n- forever(skipErase: boolean = false): 지정한 흐름으로 무한 실행합니다. skipErase는 기본 false 값이며, true일 시 지우기 모션 없이 실행됩니다.\n- pauseRender(): 렌더링을 일시정지합니다. (✨ since v0.1.0)\n- resumeRender(): 렌더링을 재개합니다. (✨ since v0.1.0)\n\n```javascript\nconst typoz = new Typoz();\ntypoz\n  .createBuilder()\n  .select('#test')\n  // .conf(/* custom configs */) // deprecated\n  .config(/* custom configs */)\n  .write('Write the entire text')\n  .write(' ')\n  .write('r')\n  .move(-1)\n  .write('o')\n  .move(2)\n  .write(' ')\n  .write('type each character individually.')\n  .pause(1)\n  .write('지울내용')\n  .erase()\n  .erase()\n  .erase()\n  .erase()\n  .pause(1)\n  .write('여러 문자 등 작성 가능합니다.')\n  .run();\n```\n\n### TypeNodeBuilder: loop with erase motion\n\n지우기 모션이 포함된 무한 루프 실행 예시입니다.\n\n```javascript\nconst typoz = new Typoz();\ntypoz\n  .createBuilder()\n  .select('#test')\n  // .conf(/* custom configs */) // deprecated\n  .config(/* custom configs */)\n  .write('Write the entire text')\n  .forever();\n```\n\n### TypeNodeBuilder: loop without erase motion\n\n지우기 모션이 제거된 무한 루프 실행 예시입니다.\n\n```javascript\nconst typoz = new Typoz();\ntypoz\n  .createBuilder()\n  .select('#test')\n  // .conf(/* custom configs */) // deprecated\n  .config(/* custom configs */)\n  .write('여러 문자 등 작성 가능합니다.')\n  .forever(true);\n```\n\n## License\n\n[MIT](https://github.com/AnyRequest/typoz/blob/main/LICENSE)\n\n## Author\n\n| [devkimson](https://github.com/kkn1125)                                                                                         |\n| ------------------------------------------------------------------------------------------------------------------------------- |\n| \u003cimg src=\"https://avatars.githubusercontent.com/u/71887242?v=4\" alt=\"avatar\" width=\"100\" style=\"border-radius: 9999999999px\" /\u003e |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanyrequest%2Ftypoz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanyrequest%2Ftypoz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanyrequest%2Ftypoz/lists"}