{"id":27107805,"url":"https://github.com/jsem-nerad/dotwave.js","last_synced_at":"2025-04-06T21:28:09.291Z","repository":{"id":284616001,"uuid":"955512186","full_name":"jsem-nerad/DotWave.js","owner":"jsem-nerad","description":"A JavaScript library for making cool star effect reacting to cursor","archived":false,"fork":false,"pushed_at":"2025-04-05T14:53:21.000Z","size":29,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-05T15:27:40.827Z","etag":null,"topics":["animation","javascript","js","library"],"latest_commit_sha":null,"homepage":"http://dotwave.vojtikdortik.eu/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsem-nerad.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":"2025-03-26T18:53:30.000Z","updated_at":"2025-04-05T14:53:25.000Z","dependencies_parsed_at":"2025-03-26T20:22:49.502Z","dependency_job_id":"576437f5-aff7-4844-bfde-1781ec9bddb6","html_url":"https://github.com/jsem-nerad/DotWave.js","commit_stats":null,"previous_names":["jsem-nerad/dot-wave.js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsem-nerad%2FDotWave.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsem-nerad%2FDotWave.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsem-nerad%2FDotWave.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsem-nerad%2FDotWave.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsem-nerad","download_url":"https://codeload.github.com/jsem-nerad/DotWave.js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247553240,"owners_count":20957434,"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":["animation","javascript","js","library"],"created_at":"2025-04-06T21:28:08.652Z","updated_at":"2025-04-06T21:28:09.283Z","avatar_url":"https://github.com/jsem-nerad.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\" style=\"font-size: 40px\"\u003eDotWave.js\u003c/h1\u003e\n\n\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/jsem-nerad/DotWave.js/refs/heads/main/images/preview.png\" style=\"width: 30%; height: auto;\" alt=\"Preview screenshot\"\u003e\n    \u003cbr /\u003e\n    A lightweight JavaScript library that creates interactive dot backgrounds\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/jsem-nerad/DotWave.js/issues/new?labels=bug\u0026template=bug-report---.md\"\u003eReport a Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/jsem-nerad/DotWave.js/issues/new?labels=enhancement\u0026template=feature-request---.md\"\u003eRequest a Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\n\n\u003c!-- TABLE OF CONTENTS \n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\u003ca href=\"#about\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#\"\u003e\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#\"\u003e\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#\"\u003e\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#to-do\"\u003eTo-Do\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e --\u003e\n\n### Try now on [dotwave.vojtikdortik.eu](https://dotwave.vojtikdortik.eu/)\n\n\n\n## Features\n\n- Dots react smoothly to cursor movements\n- Depth perception with parallax effect\n- Fully customizable (colors, sizes, behavior)\n- Responsive design\n- No dependencies\n- Lightweight \n\n## Installation\n\n### Direct Download\nDownload the library [here](https://github.com/jsem-nerad/DotWave.js/blob/main/src/dotwave.js) from the [`src`](https://github.com/jsem-nerad/DotWave.js/tree/main/src) folder and include it in your HTML:\n```xml\n\u003cscript src=\"dotwave.js\"\u003e\u003c/script\u003e\n```\nor you can use it remotely like this:\n```xml\n\u003cscript src=\"https://dotwave.vojtikdortik.eu/src/dotwave.js\"\u003e\u003c/script\u003e\n```\n\n## Basic Usage\n```xml\n\u003c!DOCTYPE html\u003e \n\u003chtml lang=\"en\"\u003e \n\u003chead\u003e \n    \u003cmeta charset=\"UTF-8\"\u003e \n    \u003ctitle\u003eDotWave Basic Example\u003c/title\u003e \n    \u003cstyle\u003e body {height: 100vh;} \u003c/style\u003e\n\u003c/head\u003e \n\u003cbody\u003e \n    \u003cscript src=\"https://dotwave.vojtikdortik.eu/src/dotwave.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        // Initialize with default options\n        const dotwave = new DotWave({container: 'body'});\n    \u003c/script\u003e\n\u003c/body\u003e \n\u003c/html\u003e \n```\n\n### Configuration Options\n\n\n```JavaScript\nconst dotwave = new DotWave({\n    container: 'body',           // Container selector or DOM element\n    numDots: 200,                // Number of dots\n    dotColor: 'white',           // Dot color (CSS color)\n    backgroundColor: 'black',    // Background color\n    dotMinSize: 0.5,             // Minimum dot size\n    dotMaxSize: 2.5,             // Maximum dot size\n    dotMinOpacity: 0.5,          // Minimum dot opacity\n    dotMaxOpacity: 1,            // Maximum dot opacity\n    influenceRadius: 150,        // Mouse influence radius\n    influenceStrength: 0.08,     // Mouse influence strength\n    randomFactor: 0.03,          // Random movement factor\n    friction: 0.97,              // Movement friction\n    maxSpeed: 3,                 // Maximum dot speed\n    responsive: true,            // Automatically resize with container\n    zIndex: -1                   // Canvas z-index\n});\n```\n\n### Methods\n```JavaScript\n// Initialize\nconst dotwave = new DotWave(options);\n\n// Pause animation\ndotwave.pause();\n\n// Resume animation\ndotwave.resume();\n\n// Update options\ndotwave.updateOptions({\n    dotColor: 'blue',\n    numDots: 300\n});\n\n// Clean up when done\ndotwave.destroy();\n```\n\n\n\n## Contributing\nContributions are welcome! Please feel free to submit a pull request or an issue.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsem-nerad%2Fdotwave.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsem-nerad%2Fdotwave.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsem-nerad%2Fdotwave.js/lists"}