# arwes

**Repository Path**: vectorlin/arwes

## Basic Information

- **Project Name**: arwes
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-06
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!-- markdownlint-disable MD033 MD013 -->

<div align="center">
  <img src="./docs/static/arwes.gif" alt="Arwes" />
</div>

<p align="center" style="margin-top: 16px; 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/arwes">
        <img src="https://img.shields.io/npm/v/@arwes/arwes.svg" alt="version" />
    </a>
    <a href="https://travis-ci.org/arwes/arwes">
        <img src="https://img.shields.io/travis/arwes/arwes.svg" alt="travis" />
    </a>
    <a href="https://standardjs.com">
        <img src="https://img.shields.io/badge/code_style-standardjs-d2bb09.svg?style=flat-square" alt="code style: standardjs">
    </a>
    <a href="https://jestjs.io">
        <img src="https://img.shields.io/badge/tested%20with-jest-15c213.svg?style=flat-square" alt="tested with: jest">
    </a>
    <a href="https://lernajs.io">
        <img src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" alt="lerna" />
    </a>
    <a href="https://github.com/arwes/arwes/blob/master/LICENSE">
        <img src="https://img.shields.io/github/license/arwes/arwes.svg?maxAge=2592000" alt="license" />
    </a>
</div>

<div align="center">
    <a href="https://github.com/arwes/arwes">
        <img src="https://img.shields.io/github/stars/arwes/arwes.svg?style=social&label=stars" alt="github stars" />
    </a>
    <a href="https://twitter.com/arwesjs">
        <img src="https://img.shields.io/twitter/follow/arwesjs.svg?label=%40arwesjs&style=social" alt="Twitter Follow">
    </a>
    <a href="https://discord.gg/s5sbTkw">
        <img src="https://img.shields.io/badge/chat-discord-blue.svg" alt="chat on discord">
    </a>
</div>

----

[Arwes](https://arwes.dev) is a web framework to build user interfaces
for web applications based on futuristic science fiction and cyberpunk styles,
animations, and sound effects. The concepts behind are opinionated
and try to inspire advanced space technology and alien influence. It is built
on top of [React](https://reactjs.org), [JSS](https://cssinjs.org), [Anime](https://animejs.com),
and [Howler](https://howlerjs.com).

The project has a working version with the package [`arwes`](https://npmjs.org/package/arwes)
and the documentation with the website [arwes.dev](https://arwes.dev).
This is an _alpha_ release. Modules and components are being tested and their
API may change. Check out the source code at
**[`version1-breakpoint1`](https://github.com/arwes/arwes/tree/version1-breakpoint1)**
branch where you can find the components and the website.

Currently, the development is at [`master`](https://github.com/arwes/arwes) branch
with the packages `@arwes/[package]`. They are not a working version yet, and they
have major breaking changes with the `arwes` package.

## Packages

### Functional

The main functionalities which power the UI component system.

#### [`@arwes/design`](./packages/design)

<div>
    <img src="https://img.shields.io/badge/status-in%20concept-999999.svg" alt="status">
    <img src="https://img.shields.io/npm/dm/@arwes/design.svg" alt="downloads" />
    <img src="https://img.shields.io/bundlephobia/minzip/@arwes/design" alt="npm bundle size">
</div>

Styling tools using [JSS](https://cssinjs.org) with React components.

#### [`@arwes/animation`](./packages/animation)

<div>
    <img src="https://img.shields.io/badge/status-in%20development-orange.svg" alt="status">
    <img src="https://img.shields.io/npm/dm/@arwes/animation.svg" alt="downloads" />
    <img src="https://img.shields.io/bundlephobia/minzip/@arwes/animation" alt="npm bundle size">
</div>

Assemble and disassemble user interfaces using animations from React components.

#### [`@arwes/sounds`](./packages/sounds)

<div>
    <img src="https://img.shields.io/badge/status-in%20polishing-yellow.svg" alt="status">
    <img src="https://img.shields.io/npm/dm/@arwes/sounds.svg" alt="downloads" />
    <img src="https://img.shields.io/bundlephobia/minzip/@arwes/sounds" alt="npm bundle size">
</div>

Define, manage and control interactive sound effects from React components.

#### [`@arwes/platform`](./packages/platform)

<div>
    <img src="https://img.shields.io/badge/status-in%20concept-999999.svg" alt="status">
    <img src="https://img.shields.io/npm/dm/@arwes/platform.svg" alt="downloads" />
    <img src="https://img.shields.io/bundlephobia/minzip/@arwes/platform" alt="npm bundle size">
</div>

Resource loading, responsive control, and general browser API tools.

#### [`@arwes/core`](./packages/core)

<div>
    <img src="https://img.shields.io/badge/status-in%20concept-999999.svg" alt="status">
    <img src="https://img.shields.io/npm/dm/@arwes/core.svg" alt="downloads" />
    <img src="https://img.shields.io/bundlephobia/minzip/@arwes/core" alt="npm bundle size">
</div>

Core UI React components.

### Design

Using the core functionalities and based on the guidelines, these are
design system or design component implementations.

#### [`@arwes/arwes`](./packages/arwes)

<div>
    <img src="https://img.shields.io/badge/status-in%20concept-999999.svg" alt="status">
    <img src="https://img.shields.io/npm/dm/@arwes/arwes.svg" alt="downloads" />
    <img src="https://img.shields.io/bundlephobia/minzip/@arwes/arwes" alt="npm bundle size">
</div>

Arwes design system React components.

## Documentation

**[arwes.dev](https://arwes.dev)** is for version `1.0.0-alpha.5`.

**[docs](./docs)** is a _work in progress_ of the latest version.

## Need help?

Open [a GitHub issue](https://github.com/arwes/arwes/issues/new) or let's chat on [Discord](https://discord.gg/s5sbTkw).

Review [frequently asked questions](./docs/FAQ.md) and [code of conduct](./docs/CODE_OF_CONDUCT.md).

## Showcase

### [SoulExtract.com](https://soulextract.com)

[![SoulExtract.com](./docs/static/soulextractcom.gif)](https://soulextract.com)

Alternative Rock injected with electronic and cinematic elements.
Proud member of the [FiXT](https://www.fixtonline.com) roster.

Repository: [soulextract/soulextract.com](https://github.com/soulextract/soulextract.com)

### [RomelPerez.dev](https://romelperez.dev)

[![RomelPerez.dev](./docs/static/romelperezdev.gif)](https://romelperez.dev)

Romel Pérez's personal website.

Repository: [romelperez/romelperez.dev](https://github.com/romelperez/romelperez.dev)

## Roadmap

Check out [Arwes Roadmap](./docs/ROADMAP.md) for the project planning.

See [changelog](./docs/CHANGELOG.md).

## Want to contribute?

See [how to contribute](./docs/CONTRIBUTING.md). All contributions of any kind are welcome!

Review the [project boards](https://github.com/arwes/arwes/projects).

## Contributors

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
<table><tr><td align="center"><a href="https://RomelPerez.com"><img src="https://avatars2.githubusercontent.com/u/1393135?v=4" width="100px;" alt="Romel Pérez"/><br /><sub><b>Romel Pérez</b></sub></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="Documentation">📖</a> <a href="#question-romelperez" title="Answering Questions">💬</a></td><td align="center"><a href="https://nickwe.st"><img src="https://avatars1.githubusercontent.com/u/3742496?v=4" width="100px;" alt="Nick West 眨眼龙"/><br /><sub><b>Nick West 眨眼龙</b></sub></a><br /><a href="https://github.com/arwes/arwes/commits?author=njwest" title="Documentation">📖</a> <a href="#ideas-njwest" title="Ideas, Planning, & Feedback">🤔</a></td></tr></table>

<!-- ALL-CONTRIBUTORS-LIST:END -->

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