Arwes

<!-- markdownlint-disable MD033 MD013 MD028 --> <div align="center"> <img src="./static/arwes.jpg" alt="ARWES" /> </div> <p align="center" style="margin-top: 16px; font-size: 1.2rem;"> Futuristic Sci-Fi UI Web Framework </p> <div align="center"> <a href="https://npmjs.org/package/arwes"> <img src="https://img.shields.io/npm/v/arwes.svg?style=flat-square" alt="Version" /> </a> <a href="https://github.com/arwes/arwes/actions"> <img src="https://github.com/arwes/arwes/workflows/ci/badge.svg?style=flat-square" alt="CI" /> </a> <a href="https://www.codefactor.io/repository/github/arwes/arwes"> <img src="https://www.codefactor.io/repository/github/arwes/arwes/badge" alt="CodeFactor" /> </a> <a href="https://github.com/arwes/arwes"> <img src="https://img.shields.io/github/stars/arwes/arwes.svg?style=flat-square&label=stars" alt="Github Stars" /> </a> <a href="https://npmjs.org/package/arwes"> <img src="https://img.shields.io/npm/dm/arwes?label=installs&style=flat-square" alt="npm" /> </a> <a href="https://x.com/arwesjs"> <img src="https://img.shields.io/twitter/follow/arwesjs?style=social" alt="Follow on X" /> </a> <a href="https://discord.gg/s5sbTkw"> <img src="https://img.shields.io/discord/457381046497968128?color=5865F2&logo=discord&logoColor=white&style=flat-square" alt="Discord" /> </a> <a href="https://github.com/arwes/arwes/blob/main/LICENSE"> <img src="https://img.shields.io/github/license/arwes/arwes.svg?maxAge=2592000&style=flat-square" alt="License" /> </a> </div>

---

ARWES is a web framework to build user interfaces based on futuristic science fiction designs, animations, and sound effects. The concepts behind are opinionated with influences from Cyberprep and productions like Star Citizen, Halo, NIKKE, and Mecha Break. It tries to inspire advanced science and technology.

The project is under development and not ready for production yet. It is still in alpha release, so the components are being tested and their API may change as it gets completed.

Branch main is for 1.0.0-alpha releases and public content deployed at arwes.dev.

Branch next is for 1.0.0-next releases and active development deployed at next.arwes.dev.

The previous version @arwes/[package]@1.0.0-alpha.19 was moved to version1-breakpoint2.arwes.dev and playground.version1-breakpoint2.arwes.dev with the branch version1-breakpoint2 where you can find the components, the playground, and the website source code. This version was released in April, 2021, and it is now deprecated.

The previous version arwes@1.0.0-alpha.5 was moved to version1-breakpoint1.arwes.dev with the branch version1-breakpoint1 where you can find the components and the website source code. This version was released in February, 2018, and it is now deprecated.

Packages

Vanilla

Core of the framework. Vanilla packages do not have major external dependencies but most tools are low level APIs and sometimes require elaborated setups. Other implementation packages simplify its use.

React

ARWES offers React v18 specific packages with SSR support. ARWES does not work with React strict mode nor React Server Components.

Community

Apps

<!-- ARWES-COMMUNITY-APPS:START --> <table> <tr> <td align="center"><a href="https://0kn.io"><img src="./static/assets/community/apps/media/0kn.webp" width="189px;" alt="ØKN" /></a><br /><a href="https://0kn.io">ØKN</a></td> <td align="center"><a href="https://soulextract.com"><img src="./static/assets/community/apps/media/soulextract.com.jpg" width="189px;" alt="SoulExtract.com" /></a><br /><a href="https://soulextract.com">SoulExtract.com</a></td> <td align="center"><a href="https://romelperez.dev"><img src="./static/assets/community/apps/media/romelperez.dev.jpg" width="189px;" alt="RomelPerez.dev" /></a><br /><a href="https://romelperez.dev">RomelPerez.dev</a></td> <td align="center"><a href="https://archiverpg.com"><img src="./static/assets/community/apps/media/archiverpg.com.jpg" width="189px;" alt="Archive RPG" /></a><br /><a href="https://archiverpg.com">Archive RPG</a></td></tr> <tr><td align="center"><a href="https://cmdb.wrick17.com"><img src="./static/assets/community/apps/media/cmdb.wrick17.jpg" width="189px;" alt="Cyber Movie Database" /></a><br /><a href="https://cmdb.wrick17.com">Cyber Movie Database</a></td> <td align="center"><a href="https://beko.famkos.net/category/simpit"><img src="./static/assets/community/apps/media/beko-primary-buffer-panel.jpg" width="189px;" alt="Primary Buffer Panel" /></a><br /><a href="https://beko.famkos.net/category/simpit">Primary Buffer Panel</a></td> <td align="center"><a href="https://universe-dawn.com"><img src="./static/assets/community/apps/media/universe-dawn.com.jpg" width="189px;" alt="Universe Dawn" /></a><br /><a href="https://universe-dawn.com">Universe Dawn</a></td> <td align="center"><a href="https://www.reddit.com/r/reactjs/comments/p6x6j7/show_rreactjs_badgeth_a_scifi_dapp_built_with/"><img src="./static/assets/community/apps/media/badgeth.jpg" width="189px;" alt="Badgeth" /></a><br /><a href="https://www.reddit.com/r/reactjs/comments/p6x6j7/show_rreactjs_badgeth_a_scifi_dapp_built_with/">Badgeth</a></td></tr> <tr><td align="center"><a href="https://darkgalaxies.io"><img src="./static/assets/community/apps/media/darkgalaxies.io.jpg" width="189px;" alt="Dark Galaxies" /></a><br /><a href="https://darkgalaxies.io">Dark Galaxies</a></td> <td align="center"><a href="https://cybersocial.herokuapp.com"><img src="./static/assets/community/apps/media/incyberpunk.jpg" width="189px;" alt="inCyberPunk" /></a><br /><a href="https://cybersocial.herokuapp.com">inCyberPunk</a></td> <td align="center"><a href="https://beko.famkos.net/tag/streamoverlay"><img src="./static/assets/community/apps/media/beko-stream-overlay.jpg" width="189px;" alt="Stream Overlay" /></a><br /><a href="https://beko.famkos.net/tag/streamoverlay">Stream Overlay</a></td> <td align="center"><a href="https://blog.starwards.space"><img src="./static/assets/community/apps/media/starwards.jpg" width="189px;" alt="StarWards" /></a><br /><a href="https://blog.starwards.space">StarWards</a></td></tr> <tr><td align="center"><a href="https://www.myxouz.com/2021/12/lady-of-shalott-first-version-of-our-home-dashboard/"><img src="./static/assets/community/apps/media/lady-of-shalott.jpg" width="189px;" alt="Lady of the Shalott" /></a><br /><a href="https://www.myxouz.com/2021/12/lady-of-shalott-first-version-of-our-home-dashboard/">Lady of the Shalott</a></td> <td align="center"><a href="https://www.indiedb.com/games/assembly-rts"><img src="./static/assets/community/apps/media/AssemblyRTS.jpg" width="189px;" alt="Assembly RTS" /></a><br /><a href="https://www.indiedb.com/games/assembly-rts">Assembly RTS</a></td> <td align="center"><a href="https://paingthet.com"><img src="./static/assets/community/apps/media/paingthet.com.jpg" width="189px;" alt="paingthet.com" /></a><br /><a href="https://paingthet.com">paingthet.com</a></td> <td align="center"><a href="https://glitchy.website"><img src="./static/assets/community/apps/media/glitchy.website.jpg" width="189px;" alt="glitchy.website" /></a><br /><a href="https://glitchy.website">glitchy.website</a></td> </tr> </table> <!-- ARWES-COMMUNITY-APPS:END -->

Complements

• Augmented UI
• Rive App
• tsParticles
• Vanta.js
• Howler.js

Need help?

Open a GitHub issue or let's chat on Discord.

Roadmap

Check out the ARWES Project Boards.

Contributors

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="20%"><a href="https://RomelPerez.dev"><img src="https://avatars2.githubusercontent.com/u/1393135?v=4?s=140" width="140px;" alt="Romel Pérez"/><br />_{<b>Romel Pérez</b>}</a><br /><a href="#projectManagement-romelperez" title="Project Management">📆</a> <a href="https://github.com/arwes/arwes/commits?author=romelperez" title="Code">💻</a> <a href="https://github.com/arwes/arwes/commits?author=romelperez" title="Tests">⚠️</a> <a href="https://github.com/arwes/arwes/commits?author=romelperez" title="Documentation">📖</a></td> <td align="center" valign="top" width="20%"><a href="https://nickwe.st"><img src="https://avatars1.githubusercontent.com/u/3742496?v=4?s=140" width="140px;" alt="Nick West"/><br />_{<b>Nick West</b>}</a><br /><a href="https://github.com/arwes/arwes/commits?