https://github.com/halvves/morse-keyframes
we've moved to sourcehut! this is just a mirror of: https://sr.ht/~merl/morse-keyframes/
https://github.com/halvves/morse-keyframes
Last synced: 24 days ago
JSON representation
we've moved to sourcehut! this is just a mirror of: https://sr.ht/~merl/morse-keyframes/
- Host: GitHub
- URL: https://github.com/halvves/morse-keyframes
- Owner: halvves
- License: mit
- Created: 2018-07-13T02:52:40.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-03-31T06:22:21.000Z (about 1 year ago)
- Last Synced: 2025-04-14T02:29:10.388Z (24 days ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/morse-keyframes
- Size: 80.1 KB
- Stars: 5
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# morse-keyframes
| | |
|---|---|
| npm | [v0.3.1](https://www.npmjs.com/package/morse-keyframes) |
| size | [420b minzipped](./scripts/sizecheck.js) |
| dependencies | [zero](./package.json) |
| license | [MIT](./LICENSE) |
*turn morse code into css keyframes*
`morse-keyframes` is a tiny library created to help communicate messages via morse code using css animations.
## usage
### script include
```html
```
```javascript
const CODE_STRING = '... ___ ...';
const PERCENT_OFFSET = 20;
const DASH_CHAR = '_';
const DOT_CHAR = '.';
const SPACE_CHAR = ' ';
const m = morseKeyframes(
CODE_STRING,
PERCENT_OFFSET,
0,
1,
DASH_CHAR,
DOT_CHAR,
SPACE_CHAR
);
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `@keyframes morse {${m}}`;
document.getElementsByTagName('head')[0].appendChild(style);
```
```css
.selector {
animation: 4s linear infinite morse;
}
```
### import
`npm install morse-keyframes`
```javascript
import React from 'react';
import styled, { keyframes } from 'styled-components';
import morse from 'morse-keyframes';
const Secret = styled.div`
position: fixed;
bottom: 0;
left: calc(50% - 25px);
height: 50px;
width: 50px;
background: #00f;
border-radius: 4px;
animation: 5s linear infinite ${keyframes`${morse(
'gggbrrrbggg',
20,
'{transform: translate3d(0, 40%, 0) scale3d(1.5, 1, 1); opacity: 0;}',
'{transform: translate3d(0, 0, 0) scale3d(1, 1, 1); opacity: 1;}'
)}`};
`;
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(React.createElement(Secret), app);
```
## api
some of the api may be a bit obtuse, but this is to help your easter eggs/puzzles stay hidden!
### parameters
| parameter | type | default | description |
|-----------------|----------------|---------|------------------|
| `morse` | string | `''` | morse coded message |
| `percentOffset` | number | `20` | css animation percent delay before starting the message |
| `offValue` | number/string | `0` | the opacity or css when "off" (opacity when number, css when string) |
| `onValue` | number/string | `1` | the opacity or css when "on" (opacity when number, css when string) |
| `dash` | string | `'r'` | character to match for morse dash |
| `dot` | string | `'g'` | character to match for morse dot |
| `space` | string | `'b'` | character to match for morse space |