{"id":21819562,"url":"https://github.com/halvves/morse-keyframes","last_synced_at":"2025-04-14T02:29:14.920Z","repository":{"id":51607255,"uuid":"140789052","full_name":"halvves/morse-keyframes","owner":"halvves","description":"we've moved to sourcehut! this is just a mirror of: https://sr.ht/~merl/morse-keyframes/","archived":false,"fork":false,"pushed_at":"2024-03-31T06:22:21.000Z","size":82,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-14T02:29:10.388Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/morse-keyframes","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/halvves.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}},"created_at":"2018-07-13T02:52:40.000Z","updated_at":"2024-09-08T22:13:06.000Z","dependencies_parsed_at":"2024-03-31T07:23:24.849Z","dependency_job_id":"ab48f70f-fc03-4fd1-a632-578b82018d73","html_url":"https://github.com/halvves/morse-keyframes","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvves%2Fmorse-keyframes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvves%2Fmorse-keyframes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvves%2Fmorse-keyframes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvves%2Fmorse-keyframes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halvves","download_url":"https://codeload.github.com/halvves/morse-keyframes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248810794,"owners_count":21165184,"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":[],"created_at":"2024-11-27T16:20:01.144Z","updated_at":"2025-04-14T02:29:14.888Z","avatar_url":"https://github.com/halvves.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# morse-keyframes\n\n|   |   |\n|---|---|\n| npm | [v0.3.1](https://www.npmjs.com/package/morse-keyframes) |\n| size | [420b minzipped](./scripts/sizecheck.js) |\n| dependencies | [zero](./package.json) |\n| license | [MIT](./LICENSE) |\n\n*turn morse code into css keyframes*\n\n`morse-keyframes` is a tiny library created to help communicate messages via morse code using css animations.\n\n## usage\n\n### script include\n\n```html\n\u003cscript src=\"https://unpkg.com/morse-keyframes\"\u003e\u003c/script\u003e\n```\n```javascript\nconst CODE_STRING = '... ___ ...';\nconst PERCENT_OFFSET = 20;\nconst DASH_CHAR = '_';\nconst DOT_CHAR = '.';\nconst SPACE_CHAR = ' ';\n\nconst m = morseKeyframes(\n\tCODE_STRING,\n\tPERCENT_OFFSET,\n\t0,\n\t1,\n\tDASH_CHAR,\n\tDOT_CHAR,\n\tSPACE_CHAR\n);\n\nconst style = document.createElement('style');\nstyle.type = 'text/css';\nstyle.innerHTML = `@keyframes morse {${m}}`;\ndocument.getElementsByTagName('head')[0].appendChild(style);\n```\n```css\n.selector {\n\tanimation: 4s linear infinite morse;\n}\n```\n\n### import\n\n`npm install morse-keyframes`\n\n```javascript\nimport React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport morse from 'morse-keyframes';\n\nconst Secret = styled.div`\n\tposition: fixed;\n\tbottom: 0;\n\tleft: calc(50% - 25px);\n\theight: 50px;\n\twidth: 50px;\n\tbackground: #00f;\n\tborder-radius: 4px;\n\tanimation: 5s linear infinite ${keyframes`${morse(\n\t\t'gggbrrrbggg',\n\t\t20,\n\t\t'{transform: translate3d(0, 40%, 0) scale3d(1.5, 1, 1); opacity: 0;}',\n\t\t'{transform: translate3d(0, 0, 0) scale3d(1, 1, 1); opacity: 1;}'\n\t)}`};\n`;\n\nconst app = document.createElement('div');\ndocument.body.appendChild(app);\nReactDOM.render(React.createElement(Secret), app);\n```\n\n## api\n\nsome of the api may be a bit obtuse, but this is to help your easter eggs/puzzles stay hidden!\n\n### parameters\n\n| parameter       | type           | default | description      |\n|-----------------|----------------|---------|------------------|\n| `morse`         | string         | `''`    | morse coded message |\n| `percentOffset` | number         | `20`    | css animation percent delay before starting the message |\n| `offValue`      | number/string  | `0`     | the opacity or css when \"off\" (opacity when number, css when string) |\n| `onValue`       | number/string  | `1`     | the opacity or css when \"on\" (opacity when number, css when string) |\n| `dash`          | string         | `'r'`   | character to match for morse dash |\n| `dot`           | string         | `'g'`   | character to match for morse dot |\n| `space`         | string         | `'b'`   | character to match for morse space |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalvves%2Fmorse-keyframes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalvves%2Fmorse-keyframes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalvves%2Fmorse-keyframes/lists"}