{"id":13618388,"url":"https://github.com/crashmax-dev/twallpaper","last_synced_at":"2025-09-02T02:34:09.954Z","repository":{"id":41127792,"uuid":"466500939","full_name":"crashmax-dev/twallpaper","owner":"crashmax-dev","description":"🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.","archived":false,"fork":false,"pushed_at":"2023-09-21T13:51:56.000Z","size":9487,"stargazers_count":88,"open_issues_count":0,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-04T02:53:17.834Z","etag":null,"topics":["animation","background","canvas","gradient","hacktoberfest","javascript","library","multicolor","npm-package","telegram","typescript","wallpaper","zero-dependency"],"latest_commit_sha":null,"homepage":"https://twallpaper.js.org","language":"TypeScript","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/crashmax-dev.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}},"created_at":"2022-03-05T16:03:44.000Z","updated_at":"2025-07-29T06:24:41.000Z","dependencies_parsed_at":"2024-01-19T10:58:00.140Z","dependency_job_id":"8077b5f5-075e-4322-936e-2db0d5413738","html_url":"https://github.com/crashmax-dev/twallpaper","commit_stats":{"total_commits":183,"total_committers":3,"mean_commits":61.0,"dds":0.08743169398907102,"last_synced_commit":"6ffd289864890fe60ce1dea3eee2450f8a5d4479"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/crashmax-dev/twallpaper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crashmax-dev%2Ftwallpaper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crashmax-dev%2Ftwallpaper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crashmax-dev%2Ftwallpaper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crashmax-dev%2Ftwallpaper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crashmax-dev","download_url":"https://codeload.github.com/crashmax-dev/twallpaper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crashmax-dev%2Ftwallpaper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273220428,"owners_count":25066382,"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","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["animation","background","canvas","gradient","hacktoberfest","javascript","library","multicolor","npm-package","telegram","typescript","wallpaper","zero-dependency"],"created_at":"2024-08-01T20:02:00.171Z","updated_at":"2025-09-02T02:34:09.896Z","avatar_url":"https://github.com/crashmax-dev.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://twallpaper.js.org\"\u003e\n    \u003cimg height=\"220\" src=\"https://twallpaper.js.org/utya.webp\"/\u003e\n    \u003cbr/\u003e\n    \u003ch1 align=\"center\"\u003eTWallpaper\u003c/h1\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003e🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/crashmax-dev/twallpaper/actions\"\u003e\n    \u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/actions/workflow/status/crashmax-dev/twallpaper/gh-pages.yaml?branch=master\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/twallpaper\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/twallpaper\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/twallpaper\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/twallpaper?color=blue\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/package/twallpaper@latest\"\u003e\n    \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/twallpaper\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n - 🔥 Zero [dependencies](https://www.npmjs.com/package/twallpaper?activeTab=dependents)\n - ⚙️ Flexible [configuration](#options-1)\n - 📦 Lightweight ([~2.5kB gzipped](https://bundlephobia.com/package/twallpaper))\n - 📜 Supports [TypeScript](https://www.typescriptlang.org) type definition\n\n## Installation\n\n```sh\nnpm install twallpaper\n```\n\n```sh\nyarn add twallpaper\n```\n\n```sh\npnpm add twallpaper\n```\n\n## Demo\n\nYou can play with `twallpaper` on [twallpaper.js.org](https://twallpaper.js.org)\n\n## Usage (vanilla)\n\n\u003c!-- MARKDOWN-AUTO-DOCS:START (CODE:src=./.github/markdown-autodocs/usage.js) --\u003e\n\u003c!-- The below code snippet is automatically added from ./.github/markdown-autodocs/usage.js --\u003e\n```js\nimport { TWallpaper } from 'twallpaper'\nimport 'twallpaper/css'\n\nconst container = document.querySelector('.tw-wrap')\nconst wallpaper = new TWallpaper(container, {\n  colors: [\n    '#dbddbb',\n    '#6ba587',\n    '#d5d88d',\n    '#88b884'\n  ]\n})\nwallpaper.init()\n```\n\u003c!-- MARKDOWN-AUTO-DOCS:END --\u003e\n\n\u003ca href=\"https://codesandbox.io/s/twallpaper-typescript-example-1hwedw?fontsize=14\u0026hidenavigation=1\u0026theme=dark\"\u003e\n  \u003cimg alt=\"Edit twallpaper-typescript-example\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n\u003c/a\u003e\n\n## React\n\n```sh\nnpm install @twallpaper/react\n```\n\n```sh\nyarn add @twallpaper/react\n```\n\n```sh\npnpm add @twallpaper/react\n```\n\n\u003c!-- MARKDOWN-AUTO-DOCS:START (CODE:src=./.github/markdown-autodocs/usage-react.js) --\u003e\n\u003c!-- The below code snippet is automatically added from ./.github/markdown-autodocs/usage-react.js --\u003e\n```js\nimport { TWallpaper } from '@twallpaper/react'\nimport '@twallpaper/react/css'\n\nexport function App() {\n  return (\n    \u003cTWallpaper\n      options={{\n        colors: [\n          '#dbddbb',\n          '#6ba587',\n          '#d5d88d',\n          '#88b884'\n        ]\n      }}\n    /\u003e\n  )\n}\n```\n\u003c!-- MARKDOWN-AUTO-DOCS:END --\u003e\n\n\u003ca href=\"https://codesandbox.io/s/twallpaper-react-example-sl2sy0?fontsize=14\u0026hidenavigation=1\u0026theme=dark\"\u003e\n  \u003cimg alt=\"Edit twallpaper-react-example\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n\u003c/a\u003e\n\n## Vue\n\n```sh\nnpm install @twallpaper/vue\n```\n\n```sh\nyarn add @twallpaper/vue\n```\n\n```sh\npnpm add @twallpaper/vue\n```\n\n[![Edit @twallpaper/vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/compassionate-fog-wmhg4d?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Using CDN\n```html\n\u003c!-- JSDelivr  --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/twallpaper@latest/dist/index.umd.js\"\u003e\u003c/script\u003e\n\n\u003c!-- UNPKG --\u003e\n\u003cscript src=\"https://unpkg.com/twallpaper@latest/dist/index.umd.js\"\u003e\u003c/script\u003e\n```\n\n## API\n\n### `.init(options?, container?)`\nInitialize animation (before reinitializing, calls the `dispose()` method).\n\n#### options\nType: [`TWallpaperOptions`](https://github.com/crashmax-dev/twallpaper/blob/master/packages/twallpaper/src/types.ts#L21-L28)\n\n#### container\nType: `Element`\n\n### `.animate(start?)`\nStart or stop animation.\n\n#### start\nType: `boolean`\\\nDefault: `true`\n\n### `.dispose()`\nDestroy the instance wallpaper.\n\n### `.scrollAnimate(start?)`\nStart or stop mouse scroll animation.\n\n#### start\nType: `boolean`\\\nDefault: `false`\n\n### `.toNextPosition(onNext?)`\nNext animation position (animation turns off after use).\n\n#### onNext\nExecution `toNextPosition` is finished.\\\nType: `function`\n\n### `.updateColors(colors)`\nForce update colors.\n\n#### colors\nType: `string[]`\n\n### `.updateFrametime(fps?)`\nForce update frametime.\n\n#### fps\nType: `number`\\\nDefault: `30`\n\n### `.updatePattern(pattern)`\nForce update pattern options.\n\n#### pattern\nType: [`PatternOptions`](https://github.com/crashmax-dev/twallpaper/blob/master/packages/twallpaper/src/types.ts#L12-L19)\n\n### `.updateTails(tails?)`\nForce update tails speed.\n\n#### tails\nType: `number`\\\nDefault `90`\n\n## Options\n\n\u003c!-- MARKDOWN-AUTO-DOCS:START (JSON_TO_HTML_TABLE:src=./.github/markdown-autodocs/options.json) --\u003e\n\u003ctable class=\"JSON-TO-HTML-TABLE\"\u003e\u003cthead\u003e\u003ctr\u003e\u003cth class=\"key-th\"\u003eKey\u003c/th\u003e\u003cth class=\"type-th\"\u003eType\u003c/th\u003e\u003cth class=\"default-th\"\u003eDefault\u003c/th\u003e\u003cth class=\"description-th\"\u003eDescription\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody \u003e\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003ecolors\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003estring[]\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_num\"\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003eArray of colors in hex format. Allowed maximum of 4 colors.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003efps\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_text\"\u003e\u003ccode\u003e30\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003eAnimation speed.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003etails\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_text\"\u003e\u003ccode\u003e90\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003eTail speed animation.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003eanimate\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_text\"\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003eAnimation is enabled.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003escrollAnimate\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_text\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003eAnimation is enabled when scrolling.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003epattern\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003e\u003ca href='https://github.com/crashmax-dev/twallpaper/blob/master/packages/twallpaper/src/types.ts#L12-L19'\u003ePatternOptions\u003c/a\u003e\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_num\"\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003ePattern options.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003epattern.image\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_num\"\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003eWallpaper image. Use standard \u003ca href='https://github.com/crashmax-dev/twallpaper/tree/master/website/public/patterns'\u003epattern\u003c/a\u003e or create your own.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003epattern.mask\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_text\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003eOption enables a mask for the background image using the \u003ca href='https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image'\u003emask-image\u003c/a\u003e css-property.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003epattern.background\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_text\"\u003e\u003ccode\u003e#000\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003eBackground color for the pattern image. Background does not work when \u003ccode\u003epattern.mask\u003c/code\u003e is enabled.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003epattern.size\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_text\"\u003e\u003ccode\u003eauto\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003eSize of the pattern image.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003epattern.blur\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_text\"\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003eBlur of the pattern image. Blur does not work when \u003ccode\u003epattern.mask\u003c/code\u003e is enabled.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr \u003e\u003ctd class=\"key-td td_text\"\u003epattern.opacity\u003c/td\u003e\u003ctd class=\"type-td td_text\"\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"default-td td_text\"\u003e\u003ccode\u003e0.5\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"description-td td_text\"\u003eOpacity of the pattern image.\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\n\u003c!-- MARKDOWN-AUTO-DOCS:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrashmax-dev%2Ftwallpaper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrashmax-dev%2Ftwallpaper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrashmax-dev%2Ftwallpaper/lists"}