See the motion,then commit.

AnimeFX collects 88 verified web effects and 8 real-scenario demos, all free and open source.

Installnpm Β· Node.js β‰₯ 22.12
npm install @voltwake/animefx
See the three stepsView source on GitHub β†—
Interface inspired by designbycurio β†—

Effects

Preview right on the card, then open the dedicated detail page to tune every parameter, replay, and copy the call code. The portal keeps only one live preview at a time to avoid exhausting WebGL contexts.

Loading effects…

Three Steps

Already have a design system? Import it directly. If not, pick one from Design by Curio. AnimeFX inherits its colors and fonts β€” you just choose an effect and adjust the parameters.

01

Install and pick an effect

Install AnimeFX and choose the closest fit from 88 effects or 8 scenario demos.

npm install @voltwake/animefx
02

Import a design system

Already have a `design.md`? Import it directly. If not, browse and download from 1000+ systems on Curio, or let your AI fetch one through Curio MCP. This site is a living example β€” every bit of the interface style comes from the Jingdezhen Blanc `design.md`, and every effect comes from AnimeFX.

Pick a design.md on Curio β†—Connect via Curio MCP β†—
03

Open the details and fine-tune

Open any effect detail page and adjust speed, intensity, count and other parameters directly. When you are happy, copy the call code β€” load `lib/anime-fx.js` with a `<script>` tag in the browser, or `import '@voltwake/animefx'` in your project.

Go tune parameters in the catalog β†’
AI

Or hand it to AI in one line

Once animefx is installed, just hand the line below to your AI coding assistant.

Use animefx in this project (npm install @voltwake/animefx if missing): read node_modules/@voltwake/animefx/AGENTS.md and follow it to find and apply the right motion effect for my request.

Demos

8 real-scenario pages you can open directly β€” SaaS hero, ops dashboard, app promo, product page, portfolio, event landing, AI chat and market data. Click any card to play it in a modal; the 1920Γ—1080 canvas scales to fit. The Web / Video tag shows whether a scene leans toward web pages or programmatic video.

Open in new window β†—

Loading demo…

Open Source & Community

The site is for showcasing; the codebase is maintained separately. All release files, contribution guidelines and the security-report entry live in the GitHub repository.

SourceGitHub repositoryBrowse source, issues and releases β†—LicenseMIT License Β· CodeCode is free for commercial use; brand and site assets are reserved β€” contact us for licensing β†’BusinessCommercial licensing & partnershipCommercial use of site assets & custom work Β· X @voltwake β†—ContributeContribution guideImplementation, parameter contracts, previews and regression checks β†’SecuritySecurity policyReport unfixed issues through a private channel β†’