{"id":23900135,"url":"https://github.com/howell5/retro-grid","last_synced_at":"2025-04-10T19:21:42.752Z","repository":{"id":268650103,"uuid":"905047582","full_name":"Howell5/retro-grid","owner":"Howell5","description":"A customizable retro grid background component for Vue 3 with built-in themes and advanced customization options.","archived":false,"fork":false,"pushed_at":"2025-01-01T00:59:22.000Z","size":277,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-19T14:40:59.855Z","etag":null,"topics":["npm-package","retro-grid","vue3"],"latest_commit_sha":null,"homepage":"https://howell5.github.io/retro-grid/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Howell5.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2024-12-18T03:56:23.000Z","updated_at":"2025-01-13T01:24:38.000Z","dependencies_parsed_at":"2024-12-18T05:36:26.360Z","dependency_job_id":null,"html_url":"https://github.com/Howell5/retro-grid","commit_stats":null,"previous_names":["howell5/retro-grid"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Howell5%2Fretro-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Howell5%2Fretro-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Howell5%2Fretro-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Howell5%2Fretro-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Howell5","download_url":"https://codeload.github.com/Howell5/retro-grid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248281382,"owners_count":21077423,"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":["npm-package","retro-grid","vue3"],"created_at":"2025-01-04T19:14:35.296Z","updated_at":"2025-04-10T19:21:42.711Z","avatar_url":"https://github.com/Howell5.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Retro Grid\n\n[![npm version](https://img.shields.io/npm/v/retro-grid.svg)](https://www.npmjs.com/package/retro-grid)\n[![npm downloads](https://img.shields.io/npm/dm/retro-grid.svg)](https://www.npmjs.com/package/retro-grid)\n[![license](https://img.shields.io/npm/l/express.svg)]()\n\nA customizable retro grid background component for Vue 3 with built-in themes and advanced customization options.\n\n## Features\n\n- 🎨 Multiple built-in themes (Cyberpunk, Matrix, Vaporwave, etc.)\n- 🎯 Advanced customization mode\n- 🌈 Full color control with gradient support\n- ✨ Configurable neon glow effects\n- 📱 Fully responsive\n- 🔧 TypeScript support\n\n## Demo\n\u003cimg width=\"1551\" alt=\"image\" src=\"https://github.com/user-attachments/assets/f775b7cc-a7c9-4f51-8cfb-8ecb6419fcba\" /\u003e\n\n[Demo](https://howell5.github.io/retro-grid/)\n\n## Installation\n\n```bash\nnpm install retro-grid\n# or\npnpm add retro-grid\n# or\nyarn add retro-grid\n```\n\n## Basic Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cRetroGrid theme=\"cyberpunk\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { RetroGrid } from 'retro-grid'\nimport 'retro-grid/style.css'\n\u003c/script\u003e\n```\n\n## Props\n\n| Prop           | Type   | Description                                                                  |\n| -------------- | ------ | ---------------------------------------------------------------------------- |\n| theme          | string | Predefined theme ('cyberpunk', 'matrix', 'vaporwave', 'classic', 'midnight') |\n| angle          | number | Grid angle in degrees (0-90)                                                 |\n| lineColor      | string | Grid line color (supports RGB/RGBA/HEX)                                      |\n| glowSize       | number | Neon glow effect size in pixels                                              |\n| opacity        | number | Grid line opacity (0-1)                                                      |\n| bgGradientFrom | string | Background gradient start color                                              |\n| bgGradientTo   | string | Background gradient end color                                                |\n\n## Examples\n\n### Using Themes\n\n```vue\n\u003c!-- Cyberpunk theme --\u003e\n\u003cRetroGrid theme=\"cyberpunk\" /\u003e\n\n\u003c!-- Matrix theme --\u003e\n\u003cRetroGrid theme=\"matrix\" /\u003e\n\n\u003c!-- Vaporwave theme --\u003e\n\u003cRetroGrid theme=\"vaporwave\" /\u003e\n```\n\n### Custom Configuration\n\n```vue\n\u003cRetroGrid\n  :angle=\"65\"\n  lineColor=\"rgba(255, 0, 255, 0.5)\"\n  :glowSize=\"5\"\n  :opacity=\"0.5\"\n  bgGradientFrom=\"#140028\"\n  bgGradientTo=\"#000000\"\n/\u003e\n```\n\n### Theme Configuration Reference\n\n```typescript\n// Built-in theme presets\nconst themes = {\n  cyberpunk: {\n    lineColor: 'rgba(255, 0, 255, 0.5)',\n    glowSize: 5,\n    opacity: 0.5,\n    bgGradientFrom: '#140028',\n    bgGradientTo: '#000000',\n  },\n  matrix: {\n    lineColor: 'rgba(0, 255, 0, 0.5)',\n    glowSize: 3,\n    opacity: 0.4,\n    bgGradientFrom: '#001400',\n    bgGradientTo: '#000000',\n  },\n  vaporwave: {\n    lineColor: 'rgba(0, 255, 255, 0.5)',\n    glowSize: 4,\n    opacity: 0.6,\n    bgGradientFrom: '#2b0054',\n    bgGradientTo: '#000000',\n  },\n  // ... other themes\n}\n```\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Start development server with demo page\npnpm dev\n\n# Build for production\npnpm build\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhowell5%2Fretro-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhowell5%2Fretro-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhowell5%2Fretro-grid/lists"}