react-animations-library

Orbit-style animation component for React + TypeScript. Ships with a single CoreOrbit component that arranges labels around a glowing center (logo or text) and rotates them on an interval. All sizing is driven by font-size, so you can scale the graphic by passing a size prop.

Install

npm install @kata-center/react-animations-library
# or
pnpm add @kata-center/react-animations-library

Usage

import { CoreOrbit, type CoreNode } from "@kata-center/react-animations-library";
// Vite/Webpack/Rspack: CSS is auto-imported from the bundle.
// If your setup needs an explicit import, use the line below instead:
// import "@kata-center/react-animations-library/styles.css";

const nodes: CoreNode[] = [
  { label: "Tỉ mỉ", tone: "blue" },
  { label: "Tận tâm", tone: "green" },
  { label: "Chuyên nghiệp", tone: "orange" },
  { label: "Chu đáo", tone: "purple" },
];

export function Example() {
  return (
    <CoreOrbit
      nodes={nodes}
      center={{ logoSrc: "/logo.png" }}
      useLine
      size={16} // px, or pass "18px"/"1rem"
    />
  );
}

Props

• nodes: CoreNode[] — list of orbiting labels with tone (blue | green | orange | purple).
• center: { logoSrc?: string; label?: string; } — provide either logoSrc or fallback label.
• useLine?: boolean (default true) — show/hide lines connecting nodes to the center.
• size?: number | string (default 16px) — root font-size for the SVG; scales all internal dimensions (em units).
• className?: string — extra class names applied to the SVG element.

Build locally

cd react-animations-library
npm install
npm run build

Outputs to dist/ with JS, d.ts, and CSS.

Publish to npm (public)

cd react-animations-library
npm version patch   # or minor/major
npm publish --access public

For an org scope (e.g., @your-org/react-animations-library), rename the "name" in package.json, ensure the scope sets access=public, and run the same publish command.

You’ll need an npm token: npm login (or npm config set //registry.npmjs.org/:_authToken <token>). Double-check package.json files and exports before publishing.

More details: docs/publish.md.

Project structure

• src/components/CoreOrbit/ — component + styles.
• src/index.ts — public exports.
• docs/ — publish guide, component docs (docs/components/core-orbit.md).
• Animations docs: docs/components/animations.md (liệt kê tất cả effect/animation và props).
• examples/basic/ — Vite + React sample page (uses local file dependency to this package).

To run example locally:

cd react-animations-library
npm install
npm run build
cd examples/basic
npm install
npm run dev