scntix-react

React adapter for scntix.

This package provides typed animate.* and motion.* intrinsic components plus React hooks on top of the browser-first Scntix SDK.

Install

npm install scntix scntix-react

Subpath Imports

import { MotionConfig, PresenceGroup } from "scntix-react/components";
import { useAnimate, useDrag, useScroll } from "scntix-react/hooks";
import { useDrawable, useMotionPath } from "scntix-react/svg";
import { useSplitText, useTextReplace } from "scntix-react/text";

Example

"use client";

import { motion } from "scntix-react";

export function HeroCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 24 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 480, ease: "easeOutCubic" }}
      whileHover={{ scale: 1.03 }}
      whileTap={{ scale: 0.98 }}
    >
      Scntix
    </motion.div>
  );
}

Current Scope

This first slice includes:

• animate.* and motion.* intrinsic HTML and SVG components
• initial, animate, exit, transition
• Framer-style aliases: whileTap, transition.ease, transition.repeat, transition.repeatType, onAnimationStart, onAnimationComplete
• interaction props:
  • whileHover
  • whilePress
  • drag
  • dragConstraints
  • whileInView
  • motionValues
• PresenceGroup / AnimatePresence
• usePresence / useAnimatePresence
• useAnimate
• useMotionValue
• useTransform
• useReducedMotion
• useDrag
• useInView
• useScroll
• useDrawable
• useMotionPath
• usePathMorph
• useSplitText
• useScrambleText
• useTextReplace
• LayoutGroup

Layout groups, presence, viewport hooks, SVG helpers, and text helpers are all part of the current package surface.

Presence components should be used with stable keyed children. Unkeyed children fall back to index-based keys for compatibility, but reorder-heavy trees can produce incorrect enter/exit ordering without explicit React keys.

Client / SSR Notes

• scntix-react is client-oriented and only touches the browser SDK in effects
• importing the package is SSR-safe, but animated components and hooks should be used in client-rendered React trees
• MotionConfig propagates reduced-motion and transition defaults through React context without creating nested-policy conflicts

Migration Notes

useDrag and DragControls.ref Type Update

The ref property in DragControls now uses React.Ref<TElement | null>, which accepts both callback refs and object refs (via .current). This change enables better integration with React's ref patterns while maintaining backward compatibility.

If your code previously relied on ref.current, no changes are needed—the type update supports both patterns:

// Both patterns work
const { ref, controls } = useDrag();

// As a callback ref:
<div ref={ref} />

// Or through a ref object (create your own):
const elementRef = useRef<HTMLDivElement>(null);
const { ref: callbackRef } = useDrag();
// Note: useDrag returns a callback ref, so use it directly as shown above