Awesome

<div align="center"> <img src="./static/arwes.jpg" alt="Arwes" /> </div> Futuristic Sci-Fi UI Web Framework <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 alt="npm" src="https://img.shields.io/npm/dm/arwes?label=installs&style=flat-square" /> </a> <a href="https://twitter.com/arwesjs"> <img src="https://img.shields.io/twitter/url?label=ArwesJS&logo=twitter&url=https%3A%2F%2Ftwitter.com%2Farwesjs" alt="Follow on Twitter" /> </a> <a href="https://discord.gg/s5sbTkw"> <img src="https://img.shields.io/discord/457381046497968128?color=5865F2&logo=discord&logoColor=white" alt="Join us on 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 Synthwave, and productions like Star Citizen, Halo, and TRON: Legacy. 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

Package	Status	Description
`@arwes/tools`	Polishing	General React API tools
`@arwes/theme`	Development	Color, units, and general purpose dynamic theming tools
`@arwes/animated`	Polishing	HTML element animation utilities
`@arwes/animator`	Polishing	Assemble and disassemble user interfaces using animation controls
`@arwes/bleeps`	Polishing	Define, manage, and control interactive short sound effects
`@arwes/text`	Polishing	Text rendering effect tools
`@arwes/frames`	Polishing	Build responsive vector graphics components
`@arwes/bgs`	Development	Passive UI background effects
`@arwes/core`	Development	Core UI functionalities
`arwes`	Polishing	All vanilla packages bundle

React

Package	Status	Description
`@arwes/react-tools`	Polishing	General browser API tools
`@arwes/react-animator`	Polishing	Animator interface tools
`@arwes/react-animated`	Polishing	Animated UI elements using animator tools
`@arwes/react-bleeps`	Polishing	Interactive short sound effects manager
`@arwes/react-text`	Polishing	Text effect components
`@arwes/react-frames`	Polishing	Build responsive vector graphics components
`@arwes/react-bgs`	Polishing	Passive UI background effects
`@arwes/react-core`	Specification	Core UI components
`@arwes/react`	Polishing	All vanilla and React packages bundle

Community

Apps

<table> <tr> <td align="center"><a href="https://soulextract.com"><img src="./static/assets/community/apps/images/soulextract.com.jpg" width="252px;" alt="SoulExtract.com" /></a> <a href="https://soulextract.com">SoulExtract.com</a> <a href="https://github.com/soulextract/soulextract.com">soulextract/soulextract.com</a></td> <td align="center"><a href="https://romelperez.dev"><img src="./static/assets/community/apps/images/romelperez.dev.jpg" width="252px;" alt="RomelPerez.dev" /></a> <a href="https://romelperez.dev">RomelPerez.dev</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/images/badgeth.jpg" width="252px;" alt="Badgeth" /></a> <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/images/darkgalaxies.io.jpg" width="252px;" alt="Dark Galaxies" /></a> <a href="https://darkgalaxies.io">Dark Galaxies</a> --</td> <td align="center"><a href="https://cybersocial.herokuapp.com"><img src="./static/assets/community/apps/images/incyberpunk.jpg" width="252px;" alt="inCyberPunk" /></a> <a href="https://cybersocial.herokuapp.com">inCyberPunk</a> <a href="https://github.com/inPhoenix/inCyberPunk2022">inPhoenix/inCyberPunk2022</a></td> <td align="center"><a href="https://beko.famkos.net/tag/streamoverlay"><img src="./static/assets/community/apps/images/beko-stream-overlay.jpg" width="252px;" alt="Stream Overlay" /></a> <a href="https://beko.famkos.net/tag/streamoverlay">Stream Overlay</a> --</td></tr> <tr><td align="center"><a href="https://archiverpg.com"><img src="./static/assets/community/apps/images/archiverpg.com.jpg" width="252px;" alt="ArchiveRPG.com" /></a> <a href="https://archiverpg.com">ArchiveRPG.com</a> --</td> <td align="center"><a href="https://blog.starwards.space"><img src="./static/assets/community/apps/images/starwards.jpg" width="252px;" alt="StarWards" /></a> <a href="https://blog.starwards.space">StarWards</a> <a href="https://github.com/starwards/starwards">starwards/starwards</a></td> <td align="center"><a href="https://cmdb.wrick17.com"><img src="./static/assets/community/apps/images/cmdb.wrick17.jpg" width="252px;" alt="Cyber Movie Database" /></a> <a href="https://cmdb.wrick17.com">Cyber Movie Database</a> <a href="https://github.com/wrick17/cmdb">wrick17/cmdb</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/images/lady-of-shalott.jpg" width="252px;" alt="Lady of the Shalott" /></a> <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/images/AssemblyRTS.jpg" width="252px;" alt="Assembly RTS" /></a> <a href="https://www.indiedb.com/games/assembly-rts">Assembly RTS</a> --</td> <td align="center"><a href="https://universe-dawn.com"><img src="./static/assets/community/apps/images/universe-dawn.com.jpg" width="252px;" alt="Universe Dawn" /></a> <a href="https://universe-dawn.com">Universe Dawn</a> --</td></tr> <tr><td align="center"><a href="https://paingthet.com"><img src="./static/assets/community/apps/images/paingthet.com.jpg" width="252px;" alt="paingthet.com" /></a> <a href="https://paingthet.com">paingthet.com</a> --</td> <td align="center"><a href="https://beko.famkos.net/category/simpit"><img src="./static/assets/community/apps/images/beko-primary-buffer-panel.jpg" width="252px;" alt="Primary Buffer Panel" /></a> <a href="https://beko.famkos.net/category/simpit">Primary Buffer Panel</a> --</td> </tr> </table>

Similars

Augmented UI

Need help?

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

Review frequently asked questions and code of conduct.

Roadmap

Check out Project Task Boards.

Contributors

<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"/> Romel Pérez</a> <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"/> Nick West</a> <a href="https://github.com/arwes/arwes/commits?author=njwest" title="Documentation">📖</a> <a href="#ideas-njwest" title="Ideas, Planning, & Feedback">🤔</a> <a href="#research-njwest" title="Research">🔬</a> <a href="#infra-njwest" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/jdpnielsen"><img src="https://avatars3.githubusercontent.com/u/8746698?v=4?s=140" width="140px;" alt="Joshua Pratt"/> Joshua Pratt</a> <a href="https://github.com/arwes/arwes/commits?author=jdpnielsen" title="Code">💻</a> <a href="https://github.com/arwes/arwes/pulls?q=is%3Apr+reviewed-by%3Ajdpnielsen" title="Reviewed Pull Requests">👀</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/Dessix"><img src="https://avatars.githubusercontent.com/u/434942?v=4?s=140" width="140px;" alt="Zoey"/> Zoey</a> <a href="#ideas-Dessix" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/arwes/arwes/pulls?q=is%3Apr+reviewed-by%3ADessix" title="Reviewed Pull Requests">👀</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/amir-arad"><img src="https://avatars.githubusercontent.com/u/6019373?v=4?s=140" width="140px;" alt="Amir Arad"/> Amir Arad</a> <a href="https://github.com/arwes/arwes/issues?q=author%3Aamir-arad" title="Bug reports">🐛</a> <a href="https://github.com/arwes/arwes/commits?author=amir-arad" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="20%"><a href="https://github.com/StephenCodesThings"><img src="https://avatars.githubusercontent.com/u/126058?v=4?s=140" width="140px;" alt="Stephen Bennett"/> Stephen Bennett</a> <a href="https://github.com/arwes/arwes/issues?q=author%3AStephenCodesThings" title="Bug reports">🐛</a> <a href="https://github.com/arwes/arwes/commits?author=StephenCodesThings" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/TheNetAdmin"><img src="https://avatars.githubusercontent.com/u/18525442?v=4?s=140" width="140px;" alt="Zixuan Wang"/> Zixuan Wang</a> <a href="https://github.com/arwes/arwes/issues?q=author%3ATheNetAdmin" title="Bug reports">🐛</a> <a href="https://github.com/arwes/arwes/commits?author=TheNetAdmin" title="Code">💻</a></td> </tr> </tbody> </table>

This project follows the all-contributors specification.

Want to contribute?

The project is not fully open for sustancial contributions yet until the first beta version is released. Follow the development on Discord and Twitter.