@gfazioli/mantine-text-animate 2.4.2 → 3.0.1

package/dist/types/NumberTicker/use-number-ticker.d.ts

@@ -44,6 +44,13 @@ export interface NumberTickerBaseProps {
      * Callback function called when animation completes
      */
     onCompleted?: () => void;
+    /**
+     * Custom format function that overrides the default Intl.NumberFormat.
+     * When provided, this function is used to format the displayed value.
+     * @param value The current numeric value
+     * @returns The formatted string representation
+     */
+    formatValue?: (value: number) => string;
 }
 /**
  * Hook props interface extending the base props
@@ -85,4 +92,4 @@ export interface UseNumberTickerResult {
  * This hook powers the NumberTicker component and can be used independently
  * for more advanced use cases.
  */
-export declare function useNumberTicker({ value, startValue, delay, decimalPlaces, speed, easing, animate, onCompleted, }: UseNumberTickerProps): UseNumberTickerResult;
+export declare function useNumberTicker({ value, startValue, delay, decimalPlaces, speed, easing, animate, onCompleted, formatValue, }: UseNumberTickerProps): UseNumberTickerResult;

package/dist/types/RotatingText/RotatingText.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { type BoxProps, type PolymorphicFactory, type StylesApiProps } from '@mantine/core';
+import { type RotatingTextBaseProps } from './use-rotating-text';
+export type RotatingTextStylesNames = 'root' | 'text' | 'entering' | 'exiting';
+export type RotatingTextCssVariables = {
+    root: '--text-animate-rotating-speed';
+};
+export type RotatingTextAnimation = 'slideUp' | 'slideDown' | 'fade' | 'blur' | 'blurUp' | 'blurDown';
+export interface RotatingTextProps extends BoxProps, RotatingTextBaseProps, StylesApiProps<RotatingTextFactory> {
+    /**
+     * Animation variant for the transition
+     * @default 'slideUp'
+     */
+    animation?: RotatingTextAnimation;
+}
+export type RotatingTextFactory = PolymorphicFactory<{
+    props: RotatingTextProps;
+    defaultComponent: 'span';
+    defaultRef: HTMLSpanElement;
+    stylesNames: RotatingTextStylesNames;
+    vars: RotatingTextCssVariables;
+}>;
+/**
+ * RotatingText Component
+ *
+ * A component that cycles through an array of text strings with smooth
+ * enter/exit animations, similar to an animated text carousel.
+ */
+export declare const RotatingText: (<C = "span">(props: import("@mantine/core").PolymorphicComponentProps<C, RotatingTextProps>) => React.ReactElement) & Omit<React.FunctionComponent<(RotatingTextProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof RotatingTextProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (RotatingTextProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("@mantine/core").ThemeExtend<{
+    props: RotatingTextProps;
+    defaultComponent: "span";
+    defaultRef: HTMLSpanElement;
+    stylesNames: RotatingTextStylesNames;
+    vars: RotatingTextCssVariables;
+}> & import("@mantine/core").ComponentClasses<{
+    props: RotatingTextProps;
+    defaultComponent: "span";
+    defaultRef: HTMLSpanElement;
+    stylesNames: RotatingTextStylesNames;
+    vars: RotatingTextCssVariables;
+}> & import("@mantine/core").PolymorphicComponentWithProps<{
+    props: RotatingTextProps;
+    defaultComponent: "span";
+    defaultRef: HTMLSpanElement;
+    stylesNames: RotatingTextStylesNames;
+    vars: RotatingTextCssVariables;
+}>;

package/dist/types/RotatingText/use-rotating-text.d.ts

@@ -0,0 +1,49 @@
+export interface RotatingTextBaseProps {
+    /**
+     * Array of text strings to rotate through
+     */
+    values: string[];
+    /**
+     * Whether the rotation animation is active
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Time in milliseconds each text stays visible before rotating
+     * @default 3000
+     */
+    interval?: number;
+    /**
+     * Animation speed multiplier (higher = faster transition)
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * Callback fired when the text rotates to a new index
+     */
+    onCycle?: (index: number) => void;
+}
+export interface UseRotatingTextResult {
+    /** Index of the currently displayed text */
+    currentIndex: number;
+    /** The currently displayed text */
+    currentText: string;
+    /** Index of the next text to display */
+    nextIndex: number;
+    /** The next text to display */
+    nextText: string;
+    /** Whether a transition animation is in progress */
+    isTransitioning: boolean;
+    /** Callback to attach to the entering element's onAnimationEnd */
+    onTransitionEnd: () => void;
+    /** Start the rotation */
+    start: () => void;
+    /** Stop the rotation */
+    stop: () => void;
+    /** Reset to the first text */
+    reset: () => void;
+}
+/**
+ * A hook that creates a rotating text effect, cycling through an array of strings
+ */
+export declare function useRotatingText(options: RotatingTextBaseProps): UseRotatingTextResult;

package/dist/types/Spinner/Spinner.d.ts

@@ -6,17 +6,20 @@ export type SpinnerCssVariables = {
 };
 export interface SpinnerBaseProps {
     /**
-     * The text content to animate
+     * The text content to animate.
+     * Pass a string for text processing (repeat/reverse), or an array of ReactNode
+     * for custom content (repeat/reverse will be skipped).
+     * When passing ReactNode[], you must provide an explicit `aria-label`.
      */
-    children: string;
+    children: string | React.ReactNode[];
     /**
      * The radius of the circle in pixels or Mantine size
      * @default "md"
      */
     radius?: MantineSize | number | string;
     /**
-     * The rotation speed in seconds per full rotation
-     * @default 10
+     * The rotation speed multiplier (higher = faster)
+     * @default 2
      */
     speed?: number;
     /**

package/dist/types/SplitFlap/SplitFlap.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import { type BoxProps, type MantineColor, type MantineRadius, type PolymorphicFactory, type StylesApiProps } from '@mantine/core';
+import { type SplitFlapBaseProps } from './use-split-flap';
+export type SplitFlapStylesNames = 'root' | 'character' | 'charTop' | 'charBottom' | 'flapTop' | 'flapBottom';
+export type SplitFlapCssVariables = {
+    root: '--text-animate-split-flap-bg' | '--text-animate-split-flap-color' | '--text-animate-split-flap-gap' | '--text-animate-split-flap-flip-duration' | '--text-animate-split-flap-char-width' | '--text-animate-split-flap-char-height' | '--text-animate-split-flap-radius' | '--text-animate-split-flap-divider-color';
+};
+export interface SplitFlapProps extends BoxProps, SplitFlapBaseProps, StylesApiProps<SplitFlapFactory> {
+    /**
+     * Background color of each flap
+     * @default '#1a1a2e'
+     */
+    bg?: MantineColor;
+    /**
+     * Text color
+     * @default '#e0e0e0'
+     */
+    textColor?: MantineColor;
+    /**
+     * Gap between characters in px
+     * @default 4
+     */
+    gap?: number;
+    /**
+     * Width of each character cell
+     * @default '1.2em'
+     */
+    charWidth?: string;
+    /**
+     * Height of each character cell
+     * @default '1.8em'
+     */
+    charHeight?: string;
+    /**
+     * Border radius of each flap card
+     * @default '4px'
+     */
+    radius?: MantineRadius;
+    /**
+     * Color of the horizontal divider line between top and bottom halves.
+     * Set to 'transparent' to hide it.
+     * @default 'rgba(0,0,0,0.3)'
+     */
+    dividerColor?: MantineColor;
+}
+export type SplitFlapFactory = PolymorphicFactory<{
+    props: SplitFlapProps;
+    defaultComponent: 'div';
+    defaultRef: HTMLDivElement;
+    stylesNames: SplitFlapStylesNames;
+    vars: SplitFlapCssVariables;
+}>;
+/**
+ * SplitFlap Component
+ *
+ * An airport departure board (split-flap display) effect that animates text
+ * by cycling each character through a character set with a 3D flip animation.
+ */
+export declare const SplitFlap: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, SplitFlapProps>) => React.ReactElement) & Omit<React.FunctionComponent<(SplitFlapProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof SplitFlapProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (SplitFlapProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("@mantine/core").ThemeExtend<{
+    props: SplitFlapProps;
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: SplitFlapStylesNames;
+    vars: SplitFlapCssVariables;
+}> & import("@mantine/core").ComponentClasses<{
+    props: SplitFlapProps;
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: SplitFlapStylesNames;
+    vars: SplitFlapCssVariables;
+}> & import("@mantine/core").PolymorphicComponentWithProps<{
+    props: SplitFlapProps;
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: SplitFlapStylesNames;
+    vars: SplitFlapCssVariables;
+}>;

package/dist/types/SplitFlap/use-split-flap.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Represents the state of a single character in the split-flap display
+ */
+export interface SplitFlapCharacter {
+    /** The character currently displayed */
+    current: string;
+    /** The next character to flip to */
+    next: string;
+    /** Whether this character is currently mid-flip */
+    isFlipping: boolean;
+    /** Whether this character has reached its target */
+    settled: boolean;
+    /** Key that changes on every flip step — used to force-remount flap elements so CSS animations restart */
+    flipKey: number;
+}
+/**
+ * Base props shared between SplitFlap component and useSplitFlap hook
+ */
+export interface SplitFlapBaseProps {
+    /**
+     * The target text to display (will be uppercased)
+     */
+    value: string;
+    /**
+     * Whether the animation should be active
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Speed multiplier (higher = faster)
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * Character set to cycle through
+     * @default 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 '
+     */
+    characterSet?: string;
+    /**
+     * Duration of each flip in milliseconds
+     * @default 300
+     */
+    flipDuration?: number;
+    /**
+     * Delay between each character starting its animation in milliseconds
+     * @default 80
+     */
+    staggerDelay?: number;
+    /**
+     * Delay before the animation starts in seconds
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Callback fired when all characters have settled
+     */
+    onCompleted?: () => void;
+}
+/**
+ * Hook props interface extending the base props
+ */
+export interface UseSplitFlapProps extends SplitFlapBaseProps {
+}
+/**
+ * Return value interface for the useSplitFlap hook
+ */
+export interface UseSplitFlapResult {
+    /** Current state of each character */
+    characters: SplitFlapCharacter[];
+    /** Start or restart the animation */
+    start: () => void;
+    /** Stop the animation, keeping current state */
+    stop: () => void;
+    /** Reset all characters to space */
+    reset: () => void;
+    /** Whether the animation is currently running */
+    isAnimating: boolean;
+}
+/**
+ * Hook that provides split-flap (airport departure board) animation functionality.
+ *
+ * Each character cycles through the characterSet in order until reaching
+ * the target character, with staggered start times for a realistic effect.
+ */
+export declare function useSplitFlap({ value, animate, speed: _speed, characterSet, flipDuration, staggerDelay, delay, onCompleted, }: UseSplitFlapProps): UseSplitFlapResult;

package/dist/types/TextAnimate.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
 import { type BoxProps, type MantineSize, type PolymorphicFactory, type StylesApiProps, type TextProps, type TextStylesNames, type TextVariant } from '@mantine/core';
+import { Gradient } from './Gradient/Gradient';
+import { Highlight } from './Highlight/Highlight';
+import { Morphing } from './Morphing/Morphing';
 import { NumberTicker } from './NumberTicker/NumberTicker';
+import { RotatingText } from './RotatingText/RotatingText';
 import { Spinner } from './Spinner/Spinner';
+import { SplitFlap } from './SplitFlap/SplitFlap';
 import { TextTicker } from './TextTicker/TextTicker';
 import { Typewriter } from './Typewriter/Typewriter';
 /**
@@ -19,7 +24,7 @@ export type TextAnimateAnimationVariant = 'fade' | 'blur' | 'scale' | 'slideUp'
 /**
  * Animation direction
  */
-export type TextAnimateAnimationDirection = 'in' | 'out' | 'static' | 'none' | false | undefined;
+export type TextAnimateAnimationDirection = 'in' | 'out' | 'loop' | 'static' | 'none' | false | undefined;
 interface TextAnimateAnimateProps {
     /**
      * Controls the distance for slide animations (in pixels)
@@ -39,6 +44,28 @@ interface TextAnimateAnimateProps {
      */
     blurAmount?: MantineSize;
 }
+/**
+ * Trigger mode for TextAnimate animation
+ * - `mount`: Animate on mount (default behavior)
+ * - `inView`: Animate when the element enters the viewport
+ * - `manual`: Do not auto-animate; control via `animate` prop only
+ */
+export type TextAnimateTrigger = 'mount' | 'inView' | 'manual';
+/**
+ * Options for the IntersectionObserver when trigger is "inView"
+ */
+export interface TextAnimateTriggerOptions {
+    /**
+     * IntersectionObserver threshold (0-1)
+     * @default 0.1
+     */
+    threshold?: number;
+    /**
+     * IntersectionObserver root margin
+     * @default "0px"
+     */
+    rootMargin?: string;
+}
 export type TextAnimateStylesNames = 'root' | 'segment' | TextStylesNames;
 export type TextAnimateCssVariables = {
     root: '--text-animate-translation-distance' | '--text-animate-blur-amount' | '--text-animate-scale-amount';
@@ -105,6 +132,29 @@ export interface TextAnimateBaseProps {
      * @param animate The direction of the animation
      */
     onAnimationEnd?: (animate: 'in' | 'out') => void;
+    /**
+     * Callback function called when all segments have completed their animation
+     * @param animate The direction of the animation
+     */
+    onAnimationComplete?: (animate: 'in' | 'out') => void;
+    /**
+     * Trigger mode for animation
+     * - `mount`: Animate on mount (default, preserves v2 behavior)
+     * - `inView`: Animate when element enters the viewport via IntersectionObserver
+     * - `manual`: Do not auto-animate; control via `animate` prop only
+     * @default "mount"
+     */
+    trigger?: TextAnimateTrigger;
+    /**
+     * Options for IntersectionObserver when trigger is "inView"
+     */
+    triggerOptions?: TextAnimateTriggerOptions;
+    /**
+     * Delay in milliseconds between loop phases (in→pause→out→pause→in)
+     * Only used when `animate="loop"`
+     * @default 2000
+     */
+    loopDelay?: number;
 }
 export interface TextAnimateProps extends BoxProps, Omit<TextProps, 'classNames' | 'styles' | 'unstyled' | 'vars' | 'attributes'>, TextAnimateBaseProps, StylesApiProps<TextAnimateFactory> {
 }
@@ -120,6 +170,11 @@ export type TextAnimateFactory = PolymorphicFactory<{
         Spinner: typeof Spinner;
         NumberTicker: typeof NumberTicker;
         TextTicker: typeof TextTicker;
+        Gradient: typeof Gradient;
+        Highlight: typeof Highlight;
+        SplitFlap: typeof SplitFlap;
+        Morphing: typeof Morphing;
+        RotatingText: typeof RotatingText;
     };
 }>;
 export declare const TextAnimate: (<C = "p">(props: import("@mantine/core").PolymorphicComponentProps<C, TextAnimateProps>) => React.ReactElement) & Omit<React.FunctionComponent<(TextAnimateProps & {
@@ -142,6 +197,11 @@ export declare const TextAnimate: (<C = "p">(props: import("@mantine/core").Poly
         Spinner: typeof Spinner;
         NumberTicker: typeof NumberTicker;
         TextTicker: typeof TextTicker;
+        Gradient: typeof Gradient;
+        Highlight: typeof Highlight;
+        SplitFlap: typeof SplitFlap;
+        Morphing: typeof Morphing;
+        RotatingText: typeof RotatingText;
     };
 }> & import("@mantine/core").ComponentClasses<{
     props: TextAnimateProps;
@@ -155,6 +215,11 @@ export declare const TextAnimate: (<C = "p">(props: import("@mantine/core").Poly
         Spinner: typeof Spinner;
         NumberTicker: typeof NumberTicker;
         TextTicker: typeof TextTicker;
+        Gradient: typeof Gradient;
+        Highlight: typeof Highlight;
+        SplitFlap: typeof SplitFlap;
+        Morphing: typeof Morphing;
+        RotatingText: typeof RotatingText;
     };
 }> & import("@mantine/core").PolymorphicComponentWithProps<{
     props: TextAnimateProps;
@@ -168,11 +233,21 @@ export declare const TextAnimate: (<C = "p">(props: import("@mantine/core").Poly
         Spinner: typeof Spinner;
         NumberTicker: typeof NumberTicker;
         TextTicker: typeof TextTicker;
+        Gradient: typeof Gradient;
+        Highlight: typeof Highlight;
+        SplitFlap: typeof SplitFlap;
+        Morphing: typeof Morphing;
+        RotatingText: typeof RotatingText;
     };
 }> & {
     Typewriter: typeof Typewriter;
     Spinner: typeof Spinner;
     NumberTicker: typeof NumberTicker;
     TextTicker: typeof TextTicker;
+    Gradient: typeof Gradient;
+    Highlight: typeof Highlight;
+    SplitFlap: typeof SplitFlap;
+    Morphing: typeof Morphing;
+    RotatingText: typeof RotatingText;
 };
 export {};

package/dist/types/TextTicker/use-text-ticker.d.ts

@@ -70,6 +70,20 @@ export interface TextTickerBaseProps {
      * @default "left-to-right"
      */
     revealDirection?: TextTickerRevealDirection;
+    /**
+     * When set, enables "scramble" mode: each character cycles through random characters
+     * for exactly this duration (in ms) before settling on the target.
+     * This replaces the default probabilistic reveal with a deterministic per-character timer.
+     * @example 800
+     */
+    scrambleDuration?: number;
+    /**
+     * Delay in milliseconds between each character starting its scramble animation.
+     * Only used when `scrambleDuration` is set.
+     * Creates a wave-like "decryption" effect from the reveal direction.
+     * @default 50
+     */
+    staggerDelay?: number;
     /**
      * Callback function called when animation completes
      */
@@ -111,4 +125,4 @@ export interface UseTextTickerResult {
  * This hook powers the TextTicker component and can be used independently
  * for more advanced use cases.
  */
-export declare function useTextTicker({ value, initialText, animate, characterSet, customCharacters, delay, speed, easing, randomChangeSpeed, revealDirection, onCompleted, }: UseTextTickerProps): UseTextTickerResult;
+export declare function useTextTicker({ value, initialText, animate, characterSet, customCharacters, delay, speed, easing, randomChangeSpeed, revealDirection, scrambleDuration, staggerDelay, onCompleted, }: UseTextTickerProps): UseTextTickerResult;

package/dist/types/Typewriter/use-typewriter.d.ts

@@ -14,8 +14,8 @@ export interface TypewriterBaseProps {
      */
     multiline?: boolean;
     /**
-     * The typing speed in seconds per character
-     * @default 0.03
+     * Animation speed multiplier (higher = faster)
+     * @default 1
      */
     speed?: number;
     /**
@@ -37,6 +37,30 @@ export interface TypewriterBaseProps {
      * and the animation is about to start again
      */
     onTypeLoop?: () => void;
+    /**
+     * Callback function called for each character typed
+     * @param char The character that was typed
+     * @param index The index of the character in the current text
+     */
+    onCharType?: (char: string, index: number) => void;
+    /**
+     * Map of character indices to custom pause durations (in milliseconds)
+     * The typing will pause for the specified duration at the given character index
+     * @example { 5: 1000, 10: 500 } — pause 1s after char 5, 500ms after char 10
+     */
+    pauseAt?: Record<number, number>;
+    /**
+     * Whether to play a mechanical keyboard click sound on each character typed
+     * Uses Web Audio API to synthesize sounds. Requires user gesture to start AudioContext.
+     * Respects `prefers-reduced-motion`.
+     * @default false
+     */
+    withSound?: boolean;
+    /**
+     * Volume of the typing sound (0 to 1)
+     * @default 0.3
+     */
+    soundVolume?: number;
 }
 export interface UseTypewriterResult {
     /**

package/dist/types/index.d.mts

@@ -1,9 +1,18 @@
 export { TextAnimate } from './TextAnimate';
-export type { TextAnimateAnimationDirection, TextAnimateAnimationType, TextAnimateAnimationVariant, TextAnimateBaseProps, TextAnimateCssVariables, TextAnimateDirection, TextAnimateFactory, TextAnimateIn, TextAnimateOut, TextAnimateProps, TextAnimateStylesNames, } from './TextAnimate';
+export type { TextAnimateAnimationDirection, TextAnimateAnimationType, TextAnimateAnimationVariant, TextAnimateBaseProps, TextAnimateCssVariables, TextAnimateDirection, TextAnimateFactory, TextAnimateIn, TextAnimateOut, TextAnimateProps, TextAnimateStylesNames, TextAnimateTrigger, TextAnimateTriggerOptions, } from './TextAnimate';
+export type { GradientFactory, GradientProps } from './Gradient/Gradient';
+export type { HighlightFactory, HighlightProps } from './Highlight/Highlight';
+export type { MorphingFactory, MorphingProps } from './Morphing/Morphing';
 export type { NumberTickerFactory, NumberTickerProps } from './NumberTicker/NumberTicker';
+export type { RotatingTextFactory, RotatingTextProps } from './RotatingText/RotatingText';
 export type { SpinnerFactory, SpinnerProps } from './Spinner/Spinner';
+export type { SplitFlapFactory, SplitFlapProps } from './SplitFlap/SplitFlap';
 export type { TextTickerFactory, TextTickerProps } from './TextTicker/TextTicker';
 export type { TypewriterFactory, TypewriterProps } from './Typewriter/Typewriter';
+export { useMorphing } from './Morphing/use-morphing';
+export { useRotatingText } from './RotatingText/use-rotating-text';
 export { useNumberTicker, type NumberTickerEasing } from './NumberTicker/use-number-ticker';
+export { useSplitFlap } from './SplitFlap/use-split-flap';
+export { useTextAnimate, type UseTextAnimateResult } from './use-text-animate';
 export { useTextTicker } from './TextTicker/use-text-ticker';
 export { useTypewriter } from './Typewriter/use-typewriter';

package/dist/types/index.d.ts

@@ -1,9 +1,18 @@
 export { TextAnimate } from './TextAnimate';
-export type { TextAnimateAnimationDirection, TextAnimateAnimationType, TextAnimateAnimationVariant, TextAnimateBaseProps, TextAnimateCssVariables, TextAnimateDirection, TextAnimateFactory, TextAnimateIn, TextAnimateOut, TextAnimateProps, TextAnimateStylesNames, } from './TextAnimate';
+export type { TextAnimateAnimationDirection, TextAnimateAnimationType, TextAnimateAnimationVariant, TextAnimateBaseProps, TextAnimateCssVariables, TextAnimateDirection, TextAnimateFactory, TextAnimateIn, TextAnimateOut, TextAnimateProps, TextAnimateStylesNames, TextAnimateTrigger, TextAnimateTriggerOptions, } from './TextAnimate';
+export type { GradientFactory, GradientProps } from './Gradient/Gradient';
+export type { HighlightFactory, HighlightProps } from './Highlight/Highlight';
+export type { MorphingFactory, MorphingProps } from './Morphing/Morphing';
 export type { NumberTickerFactory, NumberTickerProps } from './NumberTicker/NumberTicker';
+export type { RotatingTextFactory, RotatingTextProps } from './RotatingText/RotatingText';
 export type { SpinnerFactory, SpinnerProps } from './Spinner/Spinner';
+export type { SplitFlapFactory, SplitFlapProps } from './SplitFlap/SplitFlap';
 export type { TextTickerFactory, TextTickerProps } from './TextTicker/TextTicker';
 export type { TypewriterFactory, TypewriterProps } from './Typewriter/Typewriter';
+export { useMorphing } from './Morphing/use-morphing';
+export { useRotatingText } from './RotatingText/use-rotating-text';
 export { useNumberTicker, type NumberTickerEasing } from './NumberTicker/use-number-ticker';
+export { useSplitFlap } from './SplitFlap/use-split-flap';
+export { useTextAnimate, type UseTextAnimateResult } from './use-text-animate';
 export { useTextTicker } from './TextTicker/use-text-ticker';
 export { useTypewriter } from './Typewriter/use-typewriter';

package/dist/types/use-text-animate.d.ts

@@ -0,0 +1,36 @@
+import type { TextAnimateAnimationDirection } from './TextAnimate';
+export interface UseTextAnimateResult {
+    /**
+     * The current animation direction
+     */
+    animate: TextAnimateAnimationDirection;
+    /**
+     * Set the animation direction
+     */
+    setAnimate: (direction: TextAnimateAnimationDirection) => void;
+    /**
+     * Replay the animation by forcing a remount via key change
+     */
+    replay: () => void;
+    /**
+     * Whether the animation is currently running
+     */
+    isAnimating: boolean;
+    /**
+     * Key to pass to TextAnimate for remount-based replay
+     */
+    key: number;
+    /**
+     * Callback to pass to TextAnimate's onAnimationComplete prop
+     */
+    onAnimationComplete: (direction: 'in' | 'out') => void;
+}
+/**
+ * Hook that provides control over TextAnimate component
+ *
+ * Returns state and controls for managing TextAnimate animation direction,
+ * replay capability, and animation status tracking.
+ *
+ * @param initialDirection - The initial animation direction
+ */
+export declare function useTextAnimate(initialDirection?: TextAnimateAnimationDirection): UseTextAnimateResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gfazioli/mantine-text-animate",
-  "version": "2.4.2",
+  "version": "3.0.1",
   "description": "The TextAnimate component allows you to animate text with various effects.",
   "homepage": "https://gfazioli.github.io/mantine-text-animate/",
   "packageManager": "yarn@4.0.1",