{"id":19713750,"url":"https://github.com/hyperb1iss/hyper-light-card","last_synced_at":"2025-10-17T00:43:19.284Z","repository":{"id":250423989,"uuid":"834434033","full_name":"hyperb1iss/hyper-light-card","owner":"hyperb1iss","description":"A dazzling custom card for controlling SignalRGB through Home Assistant","archived":false,"fork":false,"pushed_at":"2025-03-15T07:35:22.000Z","size":4744,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-03T12:40:03.152Z","etag":null,"topics":["arr-gee-bee","dashboard-card","full-rgb","home-assistant","home-automation","lighting-effects","lovelace-card","signalrgb","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyperb1iss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":"hyperb1iss","ko_fi":"hyperb1iss"}},"created_at":"2024-07-27T08:57:33.000Z","updated_at":"2025-08-24T12:38:32.000Z","dependencies_parsed_at":"2024-07-27T10:32:04.174Z","dependency_job_id":"69641555-435f-4062-9695-3399f6758e47","html_url":"https://github.com/hyperb1iss/hyper-light-card","commit_stats":null,"previous_names":["hyperb1iss/hyper-light-card"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/hyperb1iss/hyper-light-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperb1iss%2Fhyper-light-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperb1iss%2Fhyper-light-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperb1iss%2Fhyper-light-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperb1iss%2Fhyper-light-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperb1iss","download_url":"https://codeload.github.com/hyperb1iss/hyper-light-card/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperb1iss%2Fhyper-light-card/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279261677,"owners_count":26136375,"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-10-16T02:00:06.019Z","response_time":53,"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":["arr-gee-bee","dashboard-card","full-rgb","home-assistant","home-automation","lighting-effects","lovelace-card","signalrgb","typescript"],"created_at":"2024-11-11T22:24:43.764Z","updated_at":"2025-10-17T00:43:19.243Z","avatar_url":"https://github.com/hyperb1iss.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hyperb1iss","https://ko-fi.com/hyperb1iss"],"categories":[],"sub_categories":[],"readme":"# 🌟 hyper-light-card for Home Assistant\n\n\u003cdiv align=\"center\"\u003e\n\n[![HACS Custom][hacs-shield]][hacs]\n[![GitHub Release][releases-shield]][releases]\n[![License][license-shield]](LICENSE)\n\n_A dazzling custom card for controlling SignalRGB through Home Assistant_\n\n[Installation](#installation) • [Configuration](#configuration) • [Usage](#usage) • [Contributing](#contributing) • [License](#license)\n\n\u003c/div\u003e\n\n## 🎮 Features\n\n- 💅 Sleek, modern design that adapts to your SignalRGB effects\n- 🎨 Dynamic color palette extraction from your running effects\n- 🌈 Automatic UI theming based on the current effect colors\n- 📱 Responsive layout for both desktop and mobile\n- 🔀 Easy effect switching with an intelligent dropdown menu\n- 📊 Layout and preset selection support\n- ⏭️ Effect navigation controls (next, previous, random)\n- 💡 Intuitive on/off toggle with animated feedback\n- 🔆 Smooth brightness control slider\n- ℹ️ Detailed effect information display\n- 🔧 Comprehensive customization options\n- 🎛️ Effect parameter display\n\n## 🌈 Screenshots\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"images/dark_magic.png\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"images/sakura.png\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"images/rave_visualizer.png\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"images/poison_expanded.png\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"images/cyberpunk_2077_expanded.png\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"images/corrosive_expanded.png\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## 🛠️ Installation\n\n\u003ca name=\"installation\"\u003e\u003c/a\u003e\n\n### Prerequisites\n\n- Home Assistant 2024.2.0 or newer\n- [SignalRGB Home Assistant Integration](https://github.com/hyperb1iss/signalrgb-homeassistant) (Required)\n- Latest SignalRGB Beta version (Required for full functionality)\n\n### HACS Installation (Recommended)\n\n1. Make sure you have [HACS](https://hacs.xyz/) installed in your Home Assistant instance.\n2. Go to HACS → Frontend → \"+ Explore \u0026 Download Repositories\"\n3. Search for \"hyper-light-card\" and add it.\n4. Refresh your browser cache by holding down Ctrl and pressing F5.\n\nNOTE: This component isn't in the official HACS repository yet. You can add it as a custom\nrepository for now- go to HACS, click on the 3 dots, click custom repositories, and enter\n\"hyperb1iss/hyper-light-card\" for the repository and select \"Lovelace\" for the\ncategory.\n\n### Manual Installation\n\n1. Download `hyper-light-card.js` from the [latest release](https://github.com/hyperb1iss/hyper-light-card/releases).\n2. Copy it into your `config/www` directory.\n3. Add the following to your `configuration.yaml`:\n\n   ```yaml\n   lovelace:\n     resources:\n       - url: /local/hyper-light-card.js\n         type: module\n   ```\n\n4. Restart Home Assistant.\n\n## ⚙️ Configuration\n\n\u003ca name=\"configuration\"\u003e\u003c/a\u003e\n\nAdd the card to your dashboard:\n\n1. Edit your dashboard\n2. Click \"+ Add Card\"\n3. Search for \"Hyper Light Card\" in Custom Cards\n4. Choose your SignalRGB entity and configure options in the visual editor\n\nOr add it manually to your Lovelace configuration:\n\n```yaml\ntype: custom:hyper-light-card\nentity: light.signalrgb\nname: 'All The RGBeez'\nicon: mdi:led-strip-variant\nshow_effect_info: true\nshow_effect_parameters: true\nshow_brightness_control: true\nbackground_opacity: 0.7\nlayout_entity: select.signalrgb_layout\npreset_entity: select.signalrgb_preset\nnext_effect_entity: button.signalrgb_next_effect\nprevious_effect_entity: button.signalrgb_previous_effect\nrandom_effect_entity: button.signalrgb_random_effect\nshow_layout_select: true\nshow_preset_select: true\nshow_effect_controls: true\nallowed_effects:\n  - 'Lava Lamp'\n  - 'Bubbles'\n  - 'Rave Visualizer'\n```\n\n### Configuration Options\n\n| Option                    | Type     | Default                   | Description                                                                     |\n| ------------------------- | -------- | ------------------------- | ------------------------------------------------------------------------------- |\n| `entity`                  | string   | **Required**              | The entity_id of your SignalRGB light                                           |\n| `name`                    | string   | `friendly_name` of entity | Card title                                                                      |\n| `icon`                    | string   | `mdi:led-strip-variant`   | Icon to display                                                                 |\n| `show_effect_info`        | boolean  | `true`                    | Show effect description and publisher                                           |\n| `show_effect_parameters`  | boolean  | `true`                    | Display effect parameters                                                       |\n| `show_brightness_control` | boolean  | `true`                    | Display brightness slider                                                       |\n| `background_opacity`      | number   | `0.7`                     | Opacity of the effect image background (0-1)                                    |\n| `layout_entity`           | string   | `undefined`               | ID of a select entity for controlling layouts                                   |\n| `preset_entity`           | string   | `undefined`               | ID of a select entity for controlling presets                                   |\n| `next_effect_entity`      | string   | `undefined`               | ID of a button entity to switch to next effect                                  |\n| `previous_effect_entity`  | string   | `undefined`               | ID of a button entity to switch to previous effect                              |\n| `random_effect_entity`    | string   | `undefined`               | ID of a button entity to pick a random effect                                   |\n| `show_layout_select`      | boolean  | `true`                    | Show layout selection dropdown (if layout_entity defined)                       |\n| `show_preset_select`      | boolean  | `true`                    | Show preset selection dropdown (if preset_entity defined)                       |\n| `show_effect_controls`    | boolean  | `true`                    | Show effect navigation controls                                                 |\n| `allowed_effects`         | string[] | `undefined`               | List of effects to show in the dropdown. If not set, all effects will be shown. |\n\n## 🚀 Usage\n\n\u003ca name=\"usage\"\u003e\u003c/a\u003e\n\nhyper-light-card provides an intuitive interface for controlling your SignalRGB setup:\n\n- **Power Toggle**: Click the light icon to turn your SignalRGB setup on or off.\n- **Effect Selection**: Use the dropdown to choose from available effects.\n- **Layout \u0026 Preset Selection**: Select layouts and presets from their respective dropdowns.\n- **Effect Navigation**: Use the next, previous, and random buttons to quickly cycle through effects.\n- **Brightness Control**: Adjust the brightness using the slider.\n- **Effect Info**: View the current effect's description and publisher.\n- **Effect Parameters**: See detailed parameters for the current effect.\n\nThe card dynamically adapts its color scheme based on the current effect, creating a cohesive and stylish look for your dashboard. The ColorThief integration automatically extracts colors from your effect images to theme the UI elements.\n\n## 👩‍💻 Development\n\n\u003ca name=\"development\"\u003e\u003c/a\u003e\n\nThis project uses a modern TypeScript toolchain for development:\n\n- **TypeScript**: Type-safe JavaScript\n- **Lit**: Lightweight reactive web components\n- **Vite**: Modern build tool with fast HMR\n- **ColorThief**: For color palette extraction\n- **Chroma.js**: For color manipulation and contrast verification\n\n### Getting Started\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server with hot reload\nnpm start\n\n# Run tests\nnpm test\n\n# Build for production\nnpm run build\n```\n\n## 🤝 Contributing\n\n\u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\nContributions are what make the open-source community such a fantastic place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. Please see our [CONTRIBUTING.md](CONTRIBUTING.md) file for more details on how to get started.\n\n## 📄 License\n\n\u003ca name=\"license\"\u003e\u003c/a\u003e\n\nDistributed under the Apache License 2.0. See `LICENSE` for more information.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n📚 [Documentation](https://github.com/hyperb1iss/hyper-light-card/wiki) • 🐛 [Report Bug](https://github.com/hyperb1iss/hyper-light-card/issues) • 💡 [Request Feature](https://github.com/hyperb1iss/hyper-light-card/issues)\n\n\u003c/div\u003e\n\n## 💖 Acknowledgements\n\n- [SignalRGB](https://www.signalrgb.com/) for their amazing RGB control software\n- [Home Assistant](https://www.home-assistant.io/) for the incredible smart home platform\n- [ColorThief](https://lokeshdhakar.com/projects/color-thief/) for color extraction capabilities\n- [Lit](https://lit.dev/) for the powerful web components framework\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\nCreated by [Stefanie Jane 🌠](https://github.com/hyperb1iss)\n\nIf you find this project useful, [buy me a Monster Ultra Violet!](https://ko-fi.com/hyperb1iss) ⚡️\n\n\u003c/div\u003e\n\n[hacs-shield]: https://img.shields.io/badge/HACS-Custom-pink.svg?style=for-the-badge\n[hacs]: https://github.com/custom-components/hacs\n[releases-shield]: https://img.shields.io/github/release/hyperb1iss/hyper-light-card.svg?style=for-the-badge\n[releases]: https://github.com/hyperb1iss/hyper-light-card/releases\n[license-shield]: https://img.shields.io/github/license/hyperb1iss/hyper-light-card.svg?style=for-the-badge\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperb1iss%2Fhyper-light-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperb1iss%2Fhyper-light-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperb1iss%2Fhyper-light-card/lists"}