scntix-react

scntix-react is the React 19 adapter for Scntix: a native-backed animation runtime with React components, motion values, presence, layout, gesture, physics, scroll, SVG, text, and browser-animation APIs.

The package has one canonical identity: Scntix. Familiar Motion, GSAP, and Anime.js surfaces are available through explicit compatibility entrypoints, but they all execute through Scntix rather than replacing its API.

• Canonical namespace: scntix.*
• Preserved aliases: animate.*, motion.*, and AnimatePresence
• Canonical presence component: PresenceGroup
• Stable lifecycle props: initial, animate, exit, and transition
• Distribution: ESM, CommonJS, and TypeScript declarations
• Package version: 0.0.1-alpha.1

Installation

npm install scntix scntix-react

Peer dependencies:

• react >= 19
• react-dom >= 19
• scntix 0.0.1-alpha.1

The compatibility adapters are dependency-free facades. Installing gsap or animejs is not required when using scntix-react/compat/gsap or scntix-react/compat/anime.

Quick start

"use client";

import { MotionConfig, PresenceGroup, scntix } from "scntix-react";

export function HeroCard({ open }: { open: boolean }) {
  return (
    <MotionConfig reducedMotion="user">
      <PresenceGroup>
        {open && (
          <scntix.div
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -12 }}
            transition={{ duration: 480, ease: "easeOutCubic" }}
            whileHover={{ scale: 1.03 }}
            whileTap={{ scale: 0.98 }}
          >
            Scntix
          </scntix.div>
        )}
      </PresenceGroup>
    </MotionConfig>
  );
}

Animated intrinsic elements support the HTML and SVG tags defined by Scntix. Use stable React keys when rendering conditional or reordered children inside PresenceGroup.

API model

Canonical animated namespace

Use scntix in new code:

import { scntix } from "scntix-react";

export function Button() {
  return (
    <scntix.button
      whileHover={{ y: -2 }}
      whileTap={{ scale: 0.97 }}
      transition={{ duration: 180, ease: "easeOutCubic" }}
    >
      Continue
    </scntix.button>
  );
}

Every supported intrinsic tag is available on the namespace, including normal HTML elements and SVG elements such as scntix.div, scntix.button, scntix.svg, and scntix.path.

The existing aliases are intentionally preserved and reference the same namespace:

import { animate, motion, scntix } from "scntix-react";

scntix.div === animate.div;
scntix.div === motion.div;

No existing Scntix component namespace was renamed or removed.

Lifecycle and interaction props

The canonical lifecycle props are unchanged:

| Prop | Purpose | | --- | --- | | initial | Initial visual state before the first animation | | animate | Target state or variant state while mounted | | exit | Target state while leaving a PresenceGroup | | transition | Duration, easing, delay, repeat, stagger, and related timing options |

Common interaction and orchestration props include:

• whileHover
• whilePress
• whileTap
• whileInView
• drag
• dragConstraints
• motionValues

Components

The scntix-react/components entrypoint provides:

• MotionConfig and useMotionConfig
• LayoutGroup and useLayoutGroup
• PresenceGroup
• AnimatePresence
• createAnimatedComponent

MotionConfig, LayoutGroup, PresenceGroup, and AnimatePresence are also re-exported from the package root.

PresenceGroup is the canonical Scntix presence API. AnimatePresence remains available as the familiar compatibility name.

MotionConfig supports inherited transition defaults and reduced-motion policies:

<MotionConfig reducedMotion="user" transition={{ duration: 240 }}>
  {children}
</MotionConfig>

Supported reduced-motion policies are user, always, and never.

Published entrypoints

Import from these package subpaths rather than from dist or internal source directories.

| Import | Public surface | | --- | --- | | scntix-react | Canonical namespace, components, hooks, values, feature helpers, orchestration, and public contracts | | scntix-react/components | Animated component creation, MotionConfig, LayoutGroup, and presence components | | scntix-react/hooks | Animation, gesture, viewport, scroll, physics, SVG, text, accessibility, presence, reorder, and value hooks | | scntix-react/values | Motion values, interpolation, value graphs, composition helpers, and value hooks | | scntix-react/controls | WAAPI helpers, external drag controls, animation controls, layout controllers, and timelines | | scntix-react/types | Type-only contracts for components, values, animation, layout, physics, scroll, SVG, text, hooks, and orchestration | | scntix-react/svg | Drawable paths, motion paths, path morphing, and SVG contracts | | scntix-react/text | Text splitting, scrambling, replacement, reveal/layout helpers, and text contracts | | scntix-react/compat/motion | Motion-style component/configuration aliases plus hook, value, and type compatibility exports | | scntix-react/compat/gsap | GSAP-style tweens, timelines, target utilities, and callbacks backed by Scntix | | scntix-react/compat/anime | Anime.js-style animations, timelines, stagger, target utilities, and callbacks backed by Scntix |

Example imports:

import { LayoutGroup, MotionConfig } from "scntix-react/components";
import { useAnimate, useDrag, useInView, useMotionValue } from "scntix-react/hooks";
import { combineValue, useTransform } from "scntix-react/values";
import { createTimelineController } from "scntix-react/controls";
import type { MotionProps } from "scntix-react/types";
import { useDrawable, useMotionPath } from "scntix-react/svg";
import { useScrambleText, useSplitText } from "scntix-react/text";

Canonical feature reference

Hooks

The hooks entrypoint groups APIs by capability:

• Animation: useAnimate, useAnimationControls, useViewTransition
• Values: useMotionValue, useMotionValueEvent, useMotionValueVelocity, useTransform, useFollowValue, useChainValue, useCombineValue
• Gestures: useDrag, useHover, usePan, useObserver
• Viewport and scroll: useInView, useScroll, useScrollProgress, useScrollSmoother, useScrollTrigger
• Physics: useSpring, useInertia, usePhysics2D, usePhysicsProps
• Layout and presence: useLayoutGroup, useReorderGroup, useReorderItem, usePresence, useAnimatePresence
• SVG: useDrawable, useMotionPath, usePathMorph
• Text: useSplitText, useScrambleText, useTextReplace
• Accessibility: useReducedMotion

Motion values and graphs

The values entrypoint provides:

• motionValue, followValue, mapValue
• chainValue, combineValue
• useMotionValue, useMotionValueEvent, useMotionValueVelocity
• useFollowValue, useChainValue, useCombineValue, useTransform
• interpolation and motion-value contracts

Example:

import {
  useMotionValue,
  useMotionValueEvent,
  useTransform,
} from "scntix-react/hooks";

export function ProgressLabel() {
  const progress = useMotionValue(0);
  const opacity = useTransform(progress, [0, 1], [0.4, 1]);

  useMotionValueEvent(progress, "change", (value) => {
    console.log("progress", value);
  });

  return <span style={{ opacity: opacity.get() }}>Loading</span>;
}

Controls and orchestration

The controls entrypoint provides:

• AnimationControls and createAnimationControls
• AnimationGroupControls and createAnimationGroupControls
• createTimelineController and TimelineController
• createLayoutGroupController, getLayoutGroupController, and LayoutGroupController
• PresenceController
• layout projection coordination and registration types
• external drag controls
• WAAPI creation, playback, lifecycle, commit, revert, and disposal helpers

Feature helpers

The root entrypoint also exposes typed helpers for:

• Observer creation, normalization, policy filtering, and disposal
• Scroll containers, media subscriptions, pinning, snapping, and trigger state
• Text line breaks, text units, reveal frames, scramble normalization, and replacement normalization
• WAAPI capability detection and View Transition helpers
• Physics, inertia, drag, scroll, SVG, text, and layout contracts

See scntix-react/types when an API only needs to be imported as a type.

Motion compatibility

The Motion compatibility entrypoint keeps familiar names available without changing the canonical implementation:

import {
  AnimatePresence,
  LayoutGroup,
  MotionConfig,
  motion,
  useMotionConfig,
} from "scntix-react/compat/motion";

It exports the animate, motion, and scntix namespaces, configuration and layout components, PresenceGroup, AnimatePresence, the existing hook surface, value utilities, and type contracts.

GSAP compatibility

The GSAP facade is imported explicitly:

import gsap, { GsapTimeline, GsapTween } from "scntix-react/compat/gsap";

gsap.fromTo(
  ".card",
  { opacity: 0, y: 24 },
  { opacity: 1, y: 0, duration: 0.6, ease: "power2.out" },
);

gsap.timeline({ repeat: 1, yoyo: true })
  .to(".card", { x: 48, duration: 0.4 })
  .to(".card", { rotation: 4, duration: 0.2 });

GSAP facade methods

| Method | Purpose | | --- | --- | | gsap.to(target, vars) | Animate from the current target values to the supplied values | | gsap.from(target, vars) | Animate from supplied values to the current target values | | gsap.fromTo(target, fromVars, toVars) | Explicit start and end values | | gsap.set(target, vars) | Apply values immediately and return a zero-duration handle | | gsap.timeline(vars) | Create a native-backed timeline | | gsap.killTweensOf(target) | Kill active tweens matching a target | | gsap.getProperty(target, property) | Read a current target property | | gsap.utils.toArray(target) | Resolve a DOM target into an element array |

GsapTween supports duration, totalDuration, progress, totalProgress, time, totalTime, timeScale, and targets. GsapTimeline supports to, from, fromTo, set, add, addLabel, duration, totalDuration, progress, time, and timeScale.

GSAP options and mappings

Supported core options include:

• duration and delay in GSAP seconds, converted to Scntix milliseconds
• ease and easing
• repeat and repeatDelay
• yoyo and direction
• stagger
• timeScale
• onStart, onUpdate, onRepeat, onComplete, and onReverseComplete

Common property mappings:

| GSAP property | Scntix property | | --- | --- | | x | translateX | | y | translateY | | z | translateZ | | rotation / rotationZ | rotate | | rotationX | rotateX | | rotationY | rotateY | | autoAlpha | opacity |

The facade supports CSS selectors, Element instances, element arrays, NodeListOf<Element>, and plain object targets.

GSAP plugins such as ScrollTrigger, Flip, DrawSVG, and MotionPathPlugin are not silently emulated. Use the corresponding explicit Scntix APIs for those features.

Anime.js compatibility

The Anime.js facade is also imported explicitly:

import anime, {
  animate,
  createTimeline,
  stagger,
} from "scntix-react/compat/anime";

animate(".card", {
  translateY: [24, 0],
  opacity: [0, 1],
  duration: 600,
  easing: "easeOutCubic",
  delay: stagger(80),
});

createTimeline({ autoplay: true })
  .add({ targets: ".card", translateX: 48, duration: 400 })
  .add({ targets: ".card", rotate: 4, duration: 200 });

The default export is the callable animejs facade. The named anime export is an alias for animate.

Anime.js facade methods

• animate(target, params)
• anime(target, params)
• createTimeline(params)
• stagger(value, options)
• set(target, params)
• remove(target)
• getProperty(target, property)

AnimeAnimation exposes duration, currentTime, progress, seek, speed, and targets. AnimeTimeline exposes add, set, duration, currentTime, and progress.

Supported core options include:

• duration, delay, and endDelay in Anime.js milliseconds
• easing
• loop and direction
• stagger
• speed and autoplay
• begin, loopBegin, update, loopComplete, and complete
• timeline defaults

Anime.js property names map directly to Scntix's CSS and transform property surface. The facade supports CSS selectors, Element instances, element arrays, NodeListOf<Element>, and plain object targets.

Anime.js-specific plugins, modifiers, and unsupported runtime features are not silently approximated. Use explicit Scntix features when those capabilities are required.

Targets and runtime behavior

The compatibility facades accept these target forms:

type Target =
  | Element
  | string // CSS selector
  | readonly Element[]
  | NodeListOf<Element>
  | Record<string, unknown>; // plain object animation

• DOM targets use the Scntix host and animation adapters.
• Plain objects use Scntix's object animation bridge.
• Selectors and NodeList resolution require a browser document.
• Invalid mixed element arrays fail with a named target error.
• Compatibility handles are native-backed and expose playback/lifecycle state through the adapter.

SVG and text APIs

The SVG entrypoint provides:

• useDrawable
• useMotionPath
• usePathMorph
• SVG path, morph, drawable-range, and motion-path contracts

The text entrypoint provides:

• useSplitText
• useScrambleText
• useTextReplace
• computeTextLineBreaks
• groupTextUnits
• revealTextAt
• text effect, replacement, reveal, and normalization helpers

import { useMotionPath, usePathMorph } from "scntix-react/svg";
import { useScrambleText, useSplitText } from "scntix-react/text";

Accessibility, client boundaries, and SSR

• Put browser-facing components and hooks in a client module when using a framework with server/client boundaries.
• Browser APIs are accessed through the adapter lifecycle rather than eagerly during module import.
• Use MotionConfig reducedMotion="user" and useReducedMotion to respect system preferences.
• reducedMotion="always" removes animation delay and duration while preserving the remaining transition options.
• reducedMotion="never" explicitly opts out of the reduced-motion override.
• DOM selector resolution and DOM property reads require a browser document; plain object animation can remain non-DOM.
• Do not import internal source files or depend on generated dist paths.

Package layout and distribution

The published package contains:

packages/scntix-react/
├── package.json
├── README.md
├── LICENSE
└── dist/
    ├── esm/
    ├── cjs/
    └── types/

The export map exposes every documented subpath in all three formats:

• dist/esm/ — ESM JavaScript
• dist/cjs/ — CommonJS JavaScript
• dist/types/ — TypeScript declarations

Consumers should use package exports such as scntix-react/compat/gsap, not paths inside dist.

Development and validation

From packages/scntix-react:

npm install
npm run check
npm run typecheck
npm run test:node
npm run test:vitest
npm run build
npm run pack:dry-run

Useful scripts:

| Script | Purpose | | --- | --- | | npm run check | Biome formatting and lint validation | | npm run typecheck | TypeScript validation without emitting files | | npm run test:node | Node-focused runtime and export tests | | npm run test:vitest | Browser/component Vitest suite | | npm run build | ESM, CJS, and declaration output via tsup | | npm run pack:dry-run | Inspect the files npm would publish | | npm run validate | Full check, typecheck, tests, build, and pack sequence |

API stability and compatibility policy

The canonical Scntix API remains authoritative. Compatibility layers are additive and explicit:

• Existing animate.*, motion.*, and AnimatePresence names remain available.
• PresenceGroup remains the canonical presence component.
• initial, animate, exit, and transition remain stable lifecycle props.
• GSAP and Anime.js adapters cover documented core APIs, not every third-party plugin.
• Rust/WASM core APIs are not changed by the React compatibility adapters.

License

Scntix React is distributed under the MIT License. See LICENSE.