scntix

WebAssembly animation engine — production-grade DOM animations powered by Rust

Install

npm install scntix

Bundler Usage

Use the root package or grouped subpaths in Vite, Next, and other bundler apps:

import { animate, Easing } from "scntix";

animate({
  targets: ".card",
  translateX: [0, 120],
  duration: 600,
  easing: Easing.easeOutQuad,
});

import { animate } from "scntix/animation";
import { createDrawable } from "scntix/svg";
import { splitText } from "scntix/text";

Manual Initialization

Browser imports auto-load the WASM runtime. Use the explicit init function only when you need to await readiness yourself:

import { init, animate } from "scntix/web";

await init();
animate({ targets: ".card", opacity: [0, 1] });

Node Usage

Use the dedicated Node entry when you need the Node runtime surface:

import { animate } from "scntix/node";

Export Groups

• animation: animate, animateObject, createAnimatable, createTimer, +7 more
• motion: Easing, followValue, mapValue, motionValue, +8 more
• input: createDraggable, createHover, createObserver, createPan, +6 more
• scroll: createScrollObserver, createScrollSmoother, scrollTo, ScntixScrollObserver, +2 more
• text: scrambleText, splitText, textReplace, ScntixScrambleText, +2 more
• layout: flipCapture, flipFrom, layoutTransition, ScntixFlipAnimation, +2 more
• svg: createDrawable, createMotionPath, DrawableHandle, MotionPathValues, +1 more
• browser: commitStyles, createScope, easingToLinear, init, +8 more
• utils: Utils, version, ScntixEngine

Environment Notes

• Root package and grouped subpaths auto-load the WASM runtime in browser bundlers such as Vite.
• /web is the explicit direct-browser entry for non-bundler usage.
• /node is the explicit Node runtime entry.
• TypeScript declarations are generated for the root package and grouped subpaths.

Internal Layout

• Public entrypoints live at the package root under esm/, esm-node/, cjs/, and types/.
• Internal wasm runtime assets live under _runtime/.
• Subpath imports are the recommended choice when you want smaller consumer bundles.