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:

@arwes/toolsPolishingnpm bundle size (scoped)DownloadsGeneral browser API tools
@arwes/themeDevelopmentnpm bundle size (scoped)DownloadsColor, units, and general purpose dynamic theming tools
@arwes/animatedPolishingnpm bundle size (scoped)DownloadsHTML element animation utilities
@arwes/animatorPolishingnpm bundle size (scoped)DownloadsAssemble and disassemble user interfaces using animation controls
@arwes/bleepsPolishingnpm bundle size (scoped)DownloadsDefine, manage, and control interactive short sound effects
@arwes/textPolishingnpm bundle size (scoped)DownloadsText rendering effect tools
@arwes/framesPolishingnpm bundle size (scoped)DownloadsBuild responsive vector graphics components
@arwes/bgsDevelopmentnpm bundle size (scoped)DownloadsPassive UI background effects
@arwes/coreDevelopmentnpm bundle size (scoped)DownloadsCore UI functionalities
arwesPolishingnpm bundle size (scoped)DownloadsAll vanilla packages bundle


The framework offers React.js v18 specific packages with SSR support.

Get started with Next.js or any other React setup for a new or existing project.

Arwes does not work with React strict mode nor React Server Components.

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 <Global/> component.

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:

@arwes/react-toolsPolishingnpm bundle size (scoped)DownloadsGeneral React API tools
@arwes/react-animatorPolishingnpm bundle size (scoped)DownloadsAnimator interface tools
@arwes/react-animatedPolishingnpm bundle size (scoped)DownloadsAnimated UI elements using animator tools
@arwes/react-bleepsPolishingnpm bundle size (scoped)DownloadsInteractive short sound effects manager
@arwes/react-textPolishingnpm bundle size (scoped)DownloadsText effect components
@arwes/react-framesPolishingnpm bundle size (scoped)DownloadsBuild responsive vector graphics components
@arwes/react-bgsPolishingnpm bundle size (scoped)DownloadsPassive UI background effects
@arwes/react-coreSpecificationnpm bundle size (scoped)DownloadsCore UI components
@arwes/reactPolishingnpm bundle size (scoped)DownloadsAll vanilla and React packages bundle