{"id":27018960,"url":"https://github.com/hyperb1iss/lightscript-workshop","last_synced_at":"2025-04-10T20:19:09.972Z","repository":{"id":286077233,"uuid":"960153639","full_name":"hyperb1iss/lightscript-workshop","owner":"hyperb1iss","description":"Modern TypeScript framework for creating SignalRGB lightscripts","archived":false,"fork":false,"pushed_at":"2025-04-04T21:14:59.000Z","size":4139,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T18:05:45.866Z","etag":null,"topics":["canvas2d","creative-coding","full-rgb","glsl","rgb","rgb-lighting","signalrgb","typescript","vite","webgl"],"latest_commit_sha":null,"homepage":"https://hyperbliss.tech","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/hyperb1iss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2025-04-04T00:18:34.000Z","updated_at":"2025-04-04T21:15:02.000Z","dependencies_parsed_at":"2025-04-04T08:34:41.817Z","dependency_job_id":null,"html_url":"https://github.com/hyperb1iss/lightscript-workshop","commit_stats":null,"previous_names":["hyperb1iss/lightscript-workshop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperb1iss%2Flightscript-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperb1iss%2Flightscript-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperb1iss%2Flightscript-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperb1iss%2Flightscript-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperb1iss","download_url":"https://codeload.github.com/hyperb1iss/lightscript-workshop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248289466,"owners_count":21078916,"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":["canvas2d","creative-coding","full-rgb","glsl","rgb","rgb-lighting","signalrgb","typescript","vite","webgl"],"created_at":"2025-04-04T17:17:39.079Z","updated_at":"2025-04-10T20:19:09.945Z","avatar_url":"https://github.com/hyperb1iss.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hyperb1iss","https://ko-fi.com/hyperb1iss","https://ko-fi.com/hyperb1iss)!"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 🌠 LightScript Workshop for SignalRGB 🔮\n\n![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![Three.js](https://img.shields.io/badge/Three.js-000000?style=for-the-badge\u0026logo=three.js\u0026logoColor=white)\n![WebGL](https://img.shields.io/badge/WebGL-990000?style=for-the-badge\u0026logo=webgl\u0026logoColor=white)\n![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge\u0026logo=vite\u0026logoColor=white)\n\n_Create stunning RGB lighting effects with modern tools_\n\n![LightScript Workshop Screenshot](public/assets/workshop.png)\n\n\u003c/div\u003e\n\nLightScript Workshop is a modern TypeScript framework for creating beautiful RGB lighting effects for [SignalRGB](https://signalrgb.com/). Transform the way you build Lightscripts with a type-safe, decorator-based approach featuring hot reloading, WebGL integration, and an efficient build system.\n\n## ⚡ Features\n\n- **🔷 Modern TypeScript** - Full type safety prevents runtime errors\n- **🔮 Three.js Integration** - Powerful WebGL rendering capabilities\n- **🎨 Canvas 2D Support** - Traditional drawing API for simpler effects\n- **⚡ Hot Reloading** - Instant visual feedback while coding\n- **🧩 Decorator-Based Controls** - Define UI elements with TypeScript decorators\n- **⚙️ Optimized Build Pipeline** - Production-ready effects with Vite\n- **🧪 Testing Framework** - Maintain quality with Vitest\n- **🤖 AI-Assisted Development** - Create effects with AI assistance\n\n## 🌐 Quick Start\n\n```bash\n# Clone the repository\ngit clone https://github.com/hyperb1iss/lightscript-workshop.git\ncd lightscript-workshop\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\nThen open your browser to http://localhost:3000 to see the default effect. Add `?effect=effect-name` to the URL to view specific effects.\n\n## 📚 Documentation\n\nWe've created comprehensive documentation to help you get the most out of LightScript Workshop:\n\n- [**Developer Guide**](/docs/developer-guide.md) - Start here for a complete introduction\n- [**API Reference**](/docs/api-reference.md) - Detailed technical documentation\n- [**Examples**](/docs/examples.md) - Ready-to-use effect examples with explanations\n- [**Advanced Guide**](/docs/advanced.md) - Deep dives into advanced techniques\n- [**AI-Assisted Development**](/docs/ai-assisted-development.md) - Create effects with AI assistance\n\n## 🌈 Example Effects\n\nThe framework includes these demonstration effects:\n\n### 🌀 Puff Stuff Tunnel\n\nA ray-marched tunnel effect with dynamic colors and style options.\n\n**Key features:**\n\n- Ray marching in fragment shader\n- Multiple color schemes\n- Dynamically adjustable parameters\n\n### 🌊 Simple Wave\n\nA wave-based RGB effect showcasing smooth animation and minimal resource usage.\n\n**Key features:**\n\n- Sine wave generation\n- Multiple color modes\n- Optimized for performance\n\n### ✨ Glow Particles\n\nA vibrant particle system with glowing effects using Canvas 2D rendering.\n\n**Key features:**\n\n- Particle physics simulation\n- Glowing effects with shadows\n- Trail rendering with transparency\n- Multiple color schemes\n\n## 💻 Development Workflow\n\n1. **Create** a new effect directory in `effects/your-effect-name/`\n\n   ```\n   effects/your-effect-name/\n   ├── fragment.glsl  # Shader code\n   └── main.ts        # Effect implementation with decorators\n   ```\n\n2. **Register** your effect in the effects registry\n\n3. **Develop** with live reloading\n\n   ```bash\n   npm run dev\n   ```\n\n4. **Build** for SignalRGB\n\n   ```bash\n   EFFECT=your-effect-name npm run build\n   ```\n\n5. **Import** the generated HTML file into SignalRGB\n\n## 🔬 Creating a Custom Effect\n\nCreating a new effect is easy with the LightScript framework:\n\n1. Create effect directory structure in `effects/`\n2. Define controls using TypeScript decorators in your effect class\n3. Create GLSL shader for visuals\n4. Implement TypeScript class extending BaseEffect with the `@Effect` decorator\n5. Register your effect\n\nCheck the [Developer Guide](/docs/developer-guide.md) for a complete walkthrough or try the [AI-Assisted Development](/docs/ai-assisted-development.md) approach for faster results.\n\n## ⚙️ Building \u0026 Deployment\n\n### Building a Single Effect\n\n```bash\nEFFECT=effect-name npm run build\n```\n\n### Building All Effects\n\n```bash\nnpm run build\n```\n\n### Debug Builds\n\nFor easier troubleshooting:\n\n```bash\nNO_MINIFY=true EFFECT=effect-name npm run build:debug\n```\n\n## 🎮 SignalRGB Integration\n\n1. Build your effect using the commands above\n2. Copy your HTML file(s) from the `dist/` directory to:\n   - Windows: `~/Documents/WhirlwindFX/Effects`\n3. Restart SignalRGB or click the refresh button in the app\n4. Your custom effect will now appear in the \"Lighting Effects\" section\n\n## 🤝 Contributing\n\nContributions are welcome! Whether you're fixing bugs, improving documentation, or creating new effects, please feel free to jump in. Check out our existing issues or open a new one to discuss proposed changes.\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\nCreated by [Stefanie Jane 🌠](https://github.com/hyperb1iss)\n\nIf you love lightscript-workshop, star the repo and [buy me a Monster Ultra Violet](https://ko-fi.com/hyperb1iss)! ⚡️\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperb1iss%2Flightscript-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperb1iss%2Flightscript-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperb1iss%2Flightscript-workshop/lists"}