diff --git a/packages/calligraph/src/index.tsx b/packages/calligraph/src/index.tsx
index faba526..b32477d 100644
--- a/packages/calligraph/src/index.tsx
+++ b/packages/calligraph/src/index.tsx
@@ -105,7 +105,6 @@ export function Calligraph(props: CalligraphProps) {
     initial: animateInitial = false,
     onComplete,
     autoSize = true,
-    className,
     style,
     ...rest
   } = props;
@@ -115,24 +114,18 @@ export function Calligraph(props: CalligraphProps) {
 
   const rendererProps = {
     text: String(children ?? ""),
-    Component,
     transition,
     stagger,
     animateInitial,
     onComplete,
-    className,
-    style,
-    rest,
   };
 
-  let content: React.ReactNode;
-
-  if (variant === "number") {
-    content = <NumberRenderer {...rendererProps} />;
-  } else if (variant === "slots") {
-    content = <SlotsRenderer {...rendererProps} />;
-  } else {
-    content = (
+  const content: React.ReactNode =
+    variant === "number" ? (
+      <NumberRenderer {...rendererProps} />
+    ) : variant === "slots" ? (
+      <SlotsRenderer {...rendererProps} />
+    ) : (
       <TextRenderer
         {...rendererProps}
         driftX={driftX}
@@ -140,11 +133,17 @@ export function Calligraph(props: CalligraphProps) {
         trend={trend}
       />
     );
-  }
-
-  if (autoSize) {
-    return <AutoSizeWrapper transition={transition}>{content}</AutoSizeWrapper>;
-  }
 
-  return content;
+  return (
+    <Component
+      {...rest}
+      style={{ display: "inline-flex", position: "relative", ...style }}
+    >
+      {autoSize ? (
+        <AutoSizeWrapper transition={transition}>{content}</AutoSizeWrapper>
+      ) : (
+        content
+      )}
+    </Component>
+  );
 }
diff --git a/packages/calligraph/src/number.tsx b/packages/calligraph/src/number.tsx
index 4f69dd7..00e634b 100644
--- a/packages/calligraph/src/number.tsx
+++ b/packages/calligraph/src/number.tsx
@@ -1,53 +1,39 @@
 import type { Transition } from "motion/react";
 import { AnimatePresence, MotionConfig, motion } from "motion/react";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { reconcileDigitKeys } from "./reconcile";
 import { DIGIT_DISTANCE, isDigit, splitGraphemes } from "./shared";
 
 export function NumberRenderer({
   text,
-  Component,
   transition,
   stagger,
   animateInitial,
   onComplete,
-  className,
-  style,
-  rest,
 }: {
   text: string;
-  Component: React.ElementType;
   transition: Transition;
   stagger: number;
   animateInitial: boolean;
   onComplete?: () => void;
-  className?: string;
-  style?: React.CSSProperties;
-  rest: Record<string, unknown>;
 }) {
   const chars = splitGraphemes(text);
 
-  const nextIdRef = useRef(chars.length);
+  const [nextId, setNextId] = useState(chars.length);
   const [prevText, setPrevText] = useState(text);
   const [digitKeys, setDigitKeys] = useState<number[]>(() =>
     chars.map((_, i) => i),
   );
-  const dirRef = useRef(1);
+  const [direction, setDirection] = useState(1);
 
   if (text !== prevText) {
-    const result = reconcileDigitKeys(
-      prevText,
-      text,
-      digitKeys,
-      nextIdRef.current,
-    );
-    nextIdRef.current = result.nextId;
-    dirRef.current = result.direction;
+    const result = reconcileDigitKeys(prevText, text, digitKeys, nextId);
+    setNextId(result.nextId);
+    setDirection(result.direction);
     setDigitKeys(result.keys);
     setPrevText(text);
   }
 
-  const dir = dirRef.current;
   const prefixLen = (() => {
     const idx = chars.findIndex((c) => isDigit(c));
     return idx === -1 ? chars.length : idx;
@@ -55,88 +41,81 @@ export function NumberRenderer({
 
   return (
     <MotionConfig transition={transition}>
-      <Component
-        aria-label={text}
-        style={{ display: "inline-flex", position: "relative", ...style }}
-        className={className}
-        {...rest}
-      >
-        <AnimatePresence mode="popLayout" initial={animateInitial}>
-          {chars.map((char, i) => {
-            const isPrefix = i < prefixLen;
-            const outerKey = isPrefix
-              ? `pre-${i}`
-              : `col-${chars.length - 1 - i}`;
-            const delay = i * stagger;
-            const isLast = i === chars.length - 1;
+      <AnimatePresence mode="popLayout" initial={animateInitial}>
+        {chars.map((char, i) => {
+          const isPrefix = i < prefixLen;
+          const outerKey = isPrefix
+            ? `pre-${i}`
+            : `col-${chars.length - 1 - i}`;
+          const delay = i * stagger;
+          const isLast = i === chars.length - 1;
 
-            return (
-              <motion.span
-                key={outerKey}
-                layout="position"
-                initial={isPrefix ? false : { opacity: 0 }}
-                animate={isPrefix ? undefined : { opacity: 1 }}
-                exit={isPrefix ? undefined : { opacity: 0 }}
-                style={{ display: "inline-block", position: "relative" }}
-              >
-                {isPrefix ? (
-                  <span style={{ display: "inline-block", whiteSpace: "pre" }}>
-                    {char}
-                  </span>
-                ) : (
-                  <AnimatePresence
-                    mode="popLayout"
-                    initial={animateInitial}
-                    propagate
+          return (
+            <motion.span
+              key={outerKey}
+              layout="position"
+              initial={isPrefix ? false : { opacity: 0 }}
+              animate={isPrefix ? undefined : { opacity: 1 }}
+              exit={isPrefix ? undefined : { opacity: 0 }}
+              style={{ display: "inline-block", position: "relative" }}
+            >
+              {isPrefix ? (
+                <span style={{ display: "inline-block", whiteSpace: "pre" }}>
+                  {char}
+                </span>
+              ) : (
+                <AnimatePresence
+                  mode="popLayout"
+                  initial={animateInitial}
+                  propagate
+                >
+                  <motion.span
+                    key={digitKeys[i]}
+                    aria-hidden="true"
+                    initial={{
+                      y: isDigit(char)
+                        ? direction > 0
+                          ? DIGIT_DISTANCE
+                          : -DIGIT_DISTANCE
+                        : 0,
+                      filter: "blur(2px)",
+                      scale: 0.5,
+                      opacity: 0,
+                    }}
+                    animate={{
+                      y: 0,
+                      opacity: 1,
+                      filter: "blur(0px)",
+                      scale: 1,
+                      transition: { delay },
+                    }}
+                    exit={{
+                      y: isDigit(char)
+                        ? direction > 0
+                          ? -DIGIT_DISTANCE
+                          : DIGIT_DISTANCE
+                        : 0,
+                      opacity: 0,
+                      filter: "blur(2px)",
+                      scale: 0.5,
+                      transition: { delay },
+                    }}
+                    onAnimationComplete={
+                      isLast && onComplete ? onComplete : undefined
+                    }
+                    style={{
+                      display: "inline-block",
+                      whiteSpace: "pre",
+                    }}
                   >
-                    <motion.span
-                      key={digitKeys[i]}
-                      aria-hidden="true"
-                      initial={{
-                        y: isDigit(char)
-                          ? dir > 0
-                            ? DIGIT_DISTANCE
-                            : -DIGIT_DISTANCE
-                          : 0,
-                        filter: "blur(2px)",
-                        scale: 0.5,
-                        opacity: 0,
-                      }}
-                      animate={{
-                        y: 0,
-                        opacity: 1,
-                        filter: "blur(0px)",
-                        scale: 1,
-                        transition: { delay },
-                      }}
-                      exit={{
-                        y: isDigit(char)
-                          ? dir > 0
-                            ? -DIGIT_DISTANCE
-                            : DIGIT_DISTANCE
-                          : 0,
-                        opacity: 0,
-                        filter: "blur(2px)",
-                        scale: 0.5,
-                        transition: { delay },
-                      }}
-                      onAnimationComplete={
-                        isLast && onComplete ? onComplete : undefined
-                      }
-                      style={{
-                        display: "inline-block",
-                        whiteSpace: "pre",
-                      }}
-                    >
-                      {char}
-                    </motion.span>
-                  </AnimatePresence>
-                )}
-              </motion.span>
-            );
-          })}
-        </AnimatePresence>
-      </Component>
+                    {char}
+                  </motion.span>
+                </AnimatePresence>
+              )}
+            </motion.span>
+          );
+        })}
+      </AnimatePresence>
     </MotionConfig>
   );
 }
diff --git a/packages/calligraph/src/slots.tsx b/packages/calligraph/src/slots.tsx
index f1809aa..45c0f11 100644
--- a/packages/calligraph/src/slots.tsx
+++ b/packages/calligraph/src/slots.tsx
@@ -132,52 +132,38 @@ function SlotColumn({
 
 export function SlotsRenderer({
   text,
-  Component,
   transition,
   stagger,
   animateInitial,
-  className,
-  style,
-  rest,
 }: {
   text: string;
-  Component: React.ElementType;
   transition: Transition;
   stagger: number;
   animateInitial: boolean;
   onComplete?: () => void;
-  className?: string;
-  style?: React.CSSProperties;
-  rest: Record<string, unknown>;
 }) {
   const chars = splitGraphemes(text);
 
-  const nextIdRef = useRef(chars.length);
+  const [nextId, setNextId] = useState(chars.length);
   const [prevText, setPrevText] = useState(text);
   const [digitKeys, setDigitKeys] = useState<number[]>(() =>
     chars.map((_, i) => i),
   );
-  const dirRef = useRef(1);
-  const mountedRef = useRef(false);
+  const [direction, setDirection] = useState(1);
+  const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
-    mountedRef.current = true;
+    setIsMounted(true);
   }, []);
 
   if (text !== prevText) {
-    const result = reconcileDigitKeys(
-      prevText,
-      text,
-      digitKeys,
-      nextIdRef.current,
-    );
-    nextIdRef.current = result.nextId;
-    dirRef.current = result.direction;
+    const result = reconcileDigitKeys(prevText, text, digitKeys, nextId);
+    setNextId(result.nextId);
+    setDirection(result.direction);
     setDigitKeys(result.keys);
     setPrevText(text);
   }
 
-  const dir = dirRef.current;
   const prefixLen = (() => {
     const idx = chars.findIndex((c) => isDigit(c));
     return idx === -1 ? chars.length : idx;
@@ -188,72 +174,61 @@ export function SlotsRenderer({
 
   return (
     <MotionConfig transition={transition}>
-      <Component
-        aria-label={text}
+      <span
         style={{
           display: "inline-flex",
-          position: "relative",
-          ...style,
+          paddingTop: FADE_HEIGHT,
+          paddingBottom: FADE_HEIGHT,
+          marginTop: `calc(-1 * ${FADE_HEIGHT})`,
+          marginBottom: `calc(-1 * ${FADE_HEIGHT})`,
+          maskImage: FADE_MASK,
+          WebkitMaskImage: FADE_MASK,
         }}
-        className={className}
-        {...rest}
       >
-        <span
-          style={{
-            display: "inline-flex",
-            paddingTop: FADE_HEIGHT,
-            paddingBottom: FADE_HEIGHT,
-            marginTop: `calc(-1 * ${FADE_HEIGHT})`,
-            marginBottom: `calc(-1 * ${FADE_HEIGHT})`,
-            maskImage: FADE_MASK,
-            WebkitMaskImage: FADE_MASK,
-          }}
-        >
-          <AnimatePresence mode="popLayout" initial={animateInitial}>
-            {chars.map((char, i) => {
-              const isPrefix = i < prefixLen;
-              const outerKey = isPrefix
-                ? `pre-${i}`
-                : `col-${chars.length - 1 - i}`;
-
-              if (isPrefix || !isDigit(char)) {
-                return (
-                  <motion.span
-                    key={outerKey}
-                    layout="position"
-                    initial={false}
-                    exit={isPrefix ? undefined : { opacity: 0 }}
-                    style={{ display: "inline-block", whiteSpace: "pre" }}
-                  >
-                    {char}
-                  </motion.span>
-                );
-              }
-
-              const delay = (digitCount - 1 - digitIndex) * stagger;
-              digitIndex++;
-
+        <AnimatePresence mode="popLayout" initial={animateInitial}>
+          {chars.map((char, i) => {
+            const isPrefix = i < prefixLen;
+            const outerKey = isPrefix
+              ? `pre-${i}`
+              : `col-${chars.length - 1 - i}`;
+
+            if (isPrefix || !isDigit(char)) {
               return (
                 <motion.span
                   key={outerKey}
                   layout="position"
                   initial={false}
-                  exit={{ opacity: 0 }}
-                  style={{ display: "inline-block" }}
+                  exit={isPrefix ? undefined : { opacity: 0 }}
+                  style={{ display: "inline-block", whiteSpace: "pre" }}
                 >
-                  <SlotColumn
-                    digit={Number(char)}
-                    direction={dir}
-                    transition={transition}
-                    delay={delay}
-                    animateIn={mountedRef.current || animateInitial}
-                  />
+                  {char}
                 </motion.span>
               );
-            })}
-          </AnimatePresence>
-        </span>
-      </Component>
+            }
+
+            const delay = (digitCount - 1 - digitIndex) * stagger;
+            digitIndex++;
+
+            return (
+              <motion.span
+                key={outerKey}
+                layout="position"
+                initial={false}
+                exit={{ opacity: 0 }}
+                style={{ display: "inline-block" }}
+              >
+                <SlotColumn
+                  digit={Number(char)}
+                  direction={direction}
+                  transition={transition}
+                  delay={delay}
+                  animateIn={isMounted || animateInitial}
+                />
+              </motion.span>
+            );
+          })}
+        </AnimatePresence>
+      </span>
     </MotionConfig>
   );
 }
diff --git a/packages/calligraph/src/text.tsx b/packages/calligraph/src/text.tsx
index 5c70cda..8d92588 100644
--- a/packages/calligraph/src/text.tsx
+++ b/packages/calligraph/src/text.tsx
@@ -1,24 +1,19 @@
 import type { Transition } from "motion/react";
 import { AnimatePresence, MotionConfig, motion } from "motion/react";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { reconcileTextKeys } from "./reconcile";
 import { splitGraphemes } from "./shared";
 
 export function TextRenderer({
   text,
-  Component,
   transition,
   driftX,
   driftY,
   trend,
   animateInitial,
   onComplete,
-  className,
-  style,
-  rest,
 }: {
   text: string;
-  Component: React.ElementType;
   transition: Transition;
   driftX: number;
   driftY: number;
@@ -26,12 +21,9 @@ export function TextRenderer({
   stagger: number;
   animateInitial: boolean;
   onComplete?: () => void;
-  className?: string;
-  style?: React.CSSProperties;
-  rest: Record<string, unknown>;
 }) {
   const graphemes = splitGraphemes(text);
-  const nextIdRef = useRef(graphemes.length);
+  const [nextId, setNextId] = useState(graphemes.length);
   const [prevText, setPrevText] = useState(text);
   const [charKeys, setCharKeys] = useState<string[]>(() =>
     graphemes.map((_, i) => `c${i}`),
@@ -39,13 +31,8 @@ export function TextRenderer({
   const [changeRatio, setChangeRatio] = useState(0);
 
   if (text !== prevText) {
-    const result = reconcileTextKeys(
-      prevText,
-      text,
-      charKeys,
-      nextIdRef.current,
-    );
-    nextIdRef.current = result.nextId;
+    const result = reconcileTextKeys(prevText, text, charKeys, nextId);
+    setNextId(result.nextId);
     setPrevText(text);
     setCharKeys(result.keys);
     setChangeRatio(result.changeRatio);
@@ -53,59 +40,52 @@ export function TextRenderer({
 
   return (
     <MotionConfig transition={transition}>
-      <Component
-        aria-label={text}
-        style={{ display: "inline-flex", ...style }}
-        className={className}
-        {...rest}
-      >
-        <AnimatePresence mode="popLayout" initial={animateInitial}>
-          {graphemes.map((char, i) => {
-            const key = charKeys[i];
-            const progress =
-              graphemes.length <= 1 ? 0 : i / (graphemes.length - 1);
-            const offsetX = (progress - 0.5) * driftX * changeRatio;
-            const offsetY = (progress - 0.5) * driftY * changeRatio;
-            const trendY = trend * 8 * changeRatio;
-            const isLast = i === graphemes.length - 1;
+      <AnimatePresence mode="popLayout" initial={animateInitial}>
+        {graphemes.map((char, i) => {
+          const key = charKeys[i];
+          const progress =
+            graphemes.length <= 1 ? 0 : i / (graphemes.length - 1);
+          const offsetX = (progress - 0.5) * driftX * changeRatio;
+          const offsetY = (progress - 0.5) * driftY * changeRatio;
+          const trendY = trend * 8 * changeRatio;
+          const isLast = i === graphemes.length - 1;
 
-            return (
-              <motion.span
-                key={key}
-                aria-hidden="true"
-                layout="position"
-                initial={{
-                  opacity: 0,
-                  x: offsetX,
-                  y: offsetY + trendY,
-                  filter: "blur(4px)",
-                  scale: 0.85,
-                }}
-                animate={{
-                  opacity: 1,
-                  x: 0,
-                  y: 0,
-                  filter: "blur(0px)",
-                  scale: 1,
-                }}
-                exit={{
-                  opacity: 0,
-                  x: offsetX,
-                  y: offsetY - trendY,
-                  filter: "blur(4px)",
-                  scale: 0.85,
-                }}
-                onAnimationComplete={
-                  isLast && onComplete ? onComplete : undefined
-                }
-                style={{ display: "inline-block", whiteSpace: "pre" }}
-              >
-                {char}
-              </motion.span>
-            );
-          })}
-        </AnimatePresence>
-      </Component>
+          return (
+            <motion.span
+              key={key}
+              aria-hidden="true"
+              layout="position"
+              initial={{
+                opacity: 0,
+                x: offsetX,
+                y: offsetY + trendY,
+                filter: "blur(4px)",
+                scale: 0.85,
+              }}
+              animate={{
+                opacity: 1,
+                x: 0,
+                y: 0,
+                filter: "blur(0px)",
+                scale: 1,
+              }}
+              exit={{
+                opacity: 0,
+                x: offsetX,
+                y: offsetY - trendY,
+                filter: "blur(4px)",
+                scale: 0.85,
+              }}
+              onAnimationComplete={
+                isLast && onComplete ? onComplete : undefined
+              }
+              style={{ display: "inline-block", whiteSpace: "pre" }}
+            >
+              {char}
+            </motion.span>
+          );
+        })}
+      </AnimatePresence>
     </MotionConfig>
   );
 }