@nbamford123/arwes/README.md

Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps

<div align="center">
  <img src='./static/img/logo-invert.png' alt='Arwes' height='100' />
</div>

<h1 align="center">Arwes</h1>

<p align="center" style="font-size: 1.2rem;">
  Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps
</p>

<div align="center">
  <a href="https://npmjs.org/package/arwes">
    <img src="https://img.shields.io/npm/v/arwes.svg" alt="version" />
  </a>
  <a href="https://travis-ci.org/arwesjs/arwes">
    <img src="https://img.shields.io/travis/arwesjs/arwes.svg" alt="travis" />
  </a>
  <a href="https://github.com/arwesjs/arwes/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/arwesjs/arwes.svg?maxAge=2592000" alt="license" />
  </a>
  <a href="https://npmjs.org/package/arwes">
    <img src="https://img.shields.io/npm/dm/arwes.svg" alt="downloads" />
  </a>
  <a href="https://github.com/arwesjs/arwes">
    <img src="https://img.shields.io/github/stars/arwesjs/arwes.svg?style=social&label=stars" alt="github stars" />
  </a>
</div>

_______________

[Arwes](https://arwes.dev) is a web framework to build user interfaces
for web applications based on science fiction and cyberpunk styles guidelines,
animations and sounds effects. The idea is to let you create realistic
futuristic user experiences for your projects.

The tools are based on [React](https://reactjs.org) for components,
[JSS](http://cssinjs.org) for styles ([learn more about CSSinJS](https://medium.com/jobsity/css-in-javascript-with-jss-and-react-54cdd2720222)),
[react-transition-group](https://reactcommunity.org/react-transition-group/) for
animations, [Howler](https://howlerjs.com/) for sounds and [Prism](http://prismjs.com)
for code highlighting.

> Currently is under development with an alpha version available on npm. Modules and components are under test and their API may change.

## Install

```bash
$ npm install --save arwes
```

## Documentation

See [arwes.dev](https://arwes.dev).

## Need help?

Open [a GitHub issue](https://github.com/arwesjs/arwes/issues/new).

## Want to contribute?

See [contributing guidelines](https://github.com/arwesjs/arwes/blob/master/CONTRIBUTING.md).
All contributions of any kind are welcome!

## Inspiration

This project has many inspiration sources, some of them:

- [TRON: Legacy](http://www.imdb.com/title/tt1104001/)
- [Halo Games](https://www.halowaypoint.com/en-us/games/halo-2)
- [Star Citizen](http://robertsspaceindustries.com)
- [Orbit SciFi UI Kit](https://creativemarket.com/dannehr/163951-Orbit-SciFi-UI-Kit)
- [Hi-Tech Interface Builder Pack](https://www.behance.net/gallery/19051971/Hi-Tech-Interface-Builder-Pack)
- [UXBERT High Tech Sci-Fi UX Dashboards, Infographics, Visual UI Elements](https://www.youtube.com/watch?v=NGIJDM2Xf4w)
- [SciFi HUD Pack](https://videohive.net/item/hud/14206389)
- [Ghost in the Shell](http://www.imdb.com/title/tt1219827/)

## Contributors

<!-- Contributors START
Romel_Perez romelperez https://romelperez.com code doc tutorial answers
Nick_West njwest https://nickwe.st doc
Contributors END -->
<!-- Contributors table START -->
| [<img src="https://avatars.githubusercontent.com/romelperez?s=100" width="100" alt="Romel Perez" /><br /><sub>Romel Perez</sub>](https://romelperez.com)<br />[💻](git@github.com:arwesjs/arwes/commits?author=romelperez) [📖](git@github.com:arwesjs/arwes/commits?author=romelperez) ✅ 💁 | [<img src="https://avatars.githubusercontent.com/njwest?s=100" width="100" alt="Nick West" /><br /><sub>Nick West</sub>](https://nickwe.st)<br />[📖](git@github.com:arwesjs/arwes/commits?author=njwest) |
| :---: | :---: |
<!-- Contributors table END -->

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors)
specification.

## Roadmap

- [x] Design, animations and sounds guidelines
- [x] Playground for development
- [x] Base API for components and tools
- [x] Support for server-side rendering
- [x] Define logo
- [x] Documentation
- [x] Create component API docs
- [x] Create website playground
- [x] Create resources to learn JSS / React
- [ ] Refactor project architecture (In Progress)
- [ ] Standardize core components (In Progress)
- [ ] Add form components
- [ ] Add navigation components
- [ ] Best test coverege

## License

[MIT](./LICENSE)