Arwes packages are categorized by "vanilla" and "implementation" packages. Arwes vanilla packages do not have UI libraries or frameworks dependencies, while the implementation packages depend on specific UI tools to simplify their use and add custom UI components.
Their purpose can be for visual, motion, or audio design, or UI components implementations. The Playground can be used to experiment with various use cases in real-time in browser to get a sense of what is possible to do.
Vanilla packages can be used with any other UI library but many tools are low level APIs and require more elaborated configurations. Implementation packages mostly provide "sugar-APIs" to facilitate their use.
Available vanilla packages:
Get started with Next.js or any other React setup for a new or existing project.
If using Next.js, in the configuration file, disable React strict mode:
And then install Arwes for React.
The package re-exports all the vanilla packages and the React specific packages.
One possible solution for styling can be Emotion. Install Emotion for React.
Arwes provides a base customizable theme and global baseline styles. They can be applied with the Emotion
If the app is going to use the Arwes animator system, some optional global animation settings can be setup at the root component. For example, to enable/disable animations or their durations.
Now there can be also a root Animator component to manage the app children animations.
Sound effects can be setup globally so any children component can read and play them.
Some applications would use visual animated patterns effects for their backgrounds. Multiple UI effects can be used together for more styles.
To experiment with some Arwes building blocks, a card component can be created to display a title and a description. It would use a custom frame style (with colors defined by CSS) and transition animations for the text.
With all these elements there is a simple web page with custom and flexible sci-fi effects. Open the playground sandbox to see it in real-time in-browser.
Available React packages: