{"id":46016139,"url":"https://github.com/mzebley/dynamowaves","last_synced_at":"2026-03-01T01:12:38.210Z","repository":{"id":37322877,"uuid":"505649284","full_name":"mzebley/dynamowaves","owner":"mzebley","description":"Buttery smooth, animatable SVG wave HTML templates that generate themselves on render.","archived":false,"fork":false,"pushed_at":"2025-12-14T23:44:07.000Z","size":679,"stargazers_count":43,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-12-17T11:40:01.949Z","etag":null,"topics":["generative","html","javascript","svg","templates-html","wave","waves"],"latest_commit_sha":null,"homepage":"https://dynamowaves.markzebley.com","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/mzebley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-06-21T01:23:47.000Z","updated_at":"2025-12-14T23:44:10.000Z","dependencies_parsed_at":"2024-12-12T01:18:55.006Z","dependency_job_id":"c54282c1-180f-42e1-b86f-bb998ad70f26","html_url":"https://github.com/mzebley/dynamowaves","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/mzebley/dynamowaves","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzebley%2Fdynamowaves","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzebley%2Fdynamowaves/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzebley%2Fdynamowaves/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzebley%2Fdynamowaves/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mzebley","download_url":"https://codeload.github.com/mzebley/dynamowaves/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzebley%2Fdynamowaves/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29957131,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T22:53:01.873Z","status":"ssl_error","status_checked_at":"2026-02-28T22:52:50.699Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["generative","html","javascript","svg","templates-html","wave","waves"],"created_at":"2026-03-01T01:12:37.634Z","updated_at":"2026-03-01T01:12:38.196Z","avatar_url":"https://github.com/mzebley.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dynamowaves\nLightweight, dependency-free SVG wave templates that generate a new path every time they render. Each wave is a standard [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) (`\u003cdynamo-wave\u003e`) that swaps itself into the DOM, inherits your styling, and can morph or animate on demand.\n\n[Documentation + live examples](https://dynamowaves.markzebley.com)\n\n## Features\n- **Drop-in custom element** – include `\u003cdynamo-wave\u003e` anywhere in your markup; classes, styles, and IDs flow through automatically.\n- **Deterministic or generative** – seed waves for reproducible shapes, or let them randomize and re-render via Intersection Observer triggers.\n- **Rich data attributes** – configure direction, variance, anchoring, animation speed, observation behavior, and more without writing JS.\n- **Runtime controls** – programmatic API (`generateNewWave`, `play`, `pause`) with TypeScript definitions plus a `dynamo-wave-complete` event hook.\n- **Animation aware** – honors `prefers-reduced-motion` and pauses observers/loops when the element leaves the DOM.\n\n## Installation\n### npm\n```bash\nnpm install dynamowaves\n```\n\n```js\n// Registers the \u003cdynamo-wave\u003e custom element globally\nimport 'dynamowaves';\n```\n\n### CDN or direct script\n```html\n\u003c!-- Local copy --\u003e\n\u003cscript src=\"/path/to/dynamowaves.js\"\u003e\u003c/script\u003e\n\n\u003c!-- jsDelivr CDN --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/mzebley/dynamowaves/dist/dynamowaves.min.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\n### Angular\n1. Add the script to the `angular.json` `scripts` array:\n   ```json\n   \"scripts\": [\n     \"node_modules/dynamowaves/dist/dynamowaves.js\"\n   ]\n   ```\n2. Opt in to custom elements support:\n   ```ts\n   import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n   @NgModule({\n     // ...\n     schemas: [CUSTOM_ELEMENTS_SCHEMA]\n   })\n   export class AppModule {}\n   ```\n\n## Quick start\n```html\n\u003cdynamo-wave class=\"fill-theme\"\u003e\u003c/dynamo-wave\u003e\n\n\u003cstyle\u003e\n  .fill-theme { fill: var(--theme); }\n\u003c/style\u003e\n```\n\n## Data attributes\n| Attribute | Default | Purpose |\n| --- | --- | --- |\n| `data-wave-points` | `6` | Number of anchor points. |\n| `data-wave-variance` | `3` | Max point deviation. |\n| `data-wave-seed` | _unset_ | Encoded deterministic path. |\n| `data-start-end-zero` | _false_ | Anchors endpoints on baseline. |\n| `data-wave-face` | `top` | Orientation of the wave. |\n| `data-wave-speed` | `7500` | Loop duration. |\n| `data-wave-animate` | `false` | Auto-animate. |\n| `data-wave-observe` | _unset_ | Regenerate on viewport changes. |\n\n## Reusing wave seeds\n```html\n\u003cdynamo-wave id=\"hero-wave\" data-wave-animate=\"true\"\u003e\u003c/dynamo-wave\u003e\n\u003cscript\u003e\n  const heroSeed = document.getElementById('hero-wave')?.getAttribute('data-wave-seed');\n  if (heroSeed) {\n    const footerWave = document.createElement('dynamo-wave');\n    footerWave.setAttribute('data-wave-seed', heroSeed);\n    document.body.appendChild(footerWave);\n  }\n\u003c/script\u003e\n```\n\n## JavaScript API\n| Method | Description |\n| --- | --- |\n| `generateNewWave(duration?)` | Morph to a new random path. |\n| `play(duration?)` | Start loop. |\n| `pause()` | Stop loop. |\n\n## Practical ideas\nSee `www/snippets/practical-application/examples.md` or the docs site.\n\n## Accessibility\n- Decorative by default.\n- Respects reduced-motion.\n- Seeds for SSR consistency.\n\n## Development\n```bash\ngit clone https://github.com/mzebley/dynamowaves.git\ncd dynamowaves\nnpm install\nnpm run build\n```\n\nDocs use **mark↓**.  \nUse:\n- `npm run docs:manifest`\n- `npm run docs:build`\n- `npm run docs:watch`\n\n## License\nISC © Mark Zebley\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzebley%2Fdynamowaves","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmzebley%2Fdynamowaves","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzebley%2Fdynamowaves/lists"}