@gfazioli/mantine-text-animate 1.0.0

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { type BoxProps, type MantineSize, type PolymorphicFactory, type StylesApiProps } from '@mantine/core';
+export type SpinnerStylesNames = 'root' | 'char' | 'container';
+export type SpinnerCssVariables = {
+    root: '--text-animate-spinner-radius' | '--text-animate-spinner-speed' | '--text-animate-spinner-char-offset';
+};
+export interface SpinnerBaseProps {
+    /**
+     * The text content to animate
+     */
+    children: string;
+    /**
+     * 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
+     */
+    speed?: number;
+    /**
+     * The rotation direction
+     * @default "clockwise"
+     */
+    direction?: 'clockwise' | 'counterclockwise';
+    /**
+     * Whether the spinner is currently rotating
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Character offset in degrees (0-360)
+     * @default 0
+     */
+    charOffset?: number;
+    /**
+     * Whether to reverse the text direction
+     * @default false
+     */
+    reverseText?: boolean;
+    /**
+     * Whether to repeat the text to fill the circle
+     * @default false
+     */
+    repeatText?: boolean;
+    /**
+     * Number of times to repeat the text (only used if repeatText is true)
+     * @default 1
+     */
+    repeatCount?: number;
+}
+export interface SpinnerProps extends BoxProps, SpinnerBaseProps, StylesApiProps<SpinnerFactory> {
+}
+export type SpinnerFactory = PolymorphicFactory<{
+    props: SpinnerProps;
+    defaultComponent: 'div';
+    defaultRef: HTMLDivElement;
+    stylesNames: SpinnerStylesNames;
+    vars: SpinnerCssVariables;
+}>;
+/**
+ * Spinner Component
+ *
+ * A component that displays text in a circle and rotates it.
+ */
+export declare const Spinner: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, SpinnerProps>) => React.ReactElement) & Omit<React.FunctionComponent<(SpinnerProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof SpinnerProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (SpinnerProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
+    props: SpinnerProps;
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: SpinnerStylesNames;
+    vars: SpinnerCssVariables;
+}> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
+    props: SpinnerProps;
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: SpinnerStylesNames;
+    vars: SpinnerCssVariables;
+}> & import("@mantine/core/lib/core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: SpinnerProps;
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: SpinnerStylesNames;
+    vars: SpinnerCssVariables;
+}>;

package/dist/types/TextAnimate.d.ts

@@ -0,0 +1,174 @@
+import React from 'react';
+import { type BoxProps, type MantineSize, type PolymorphicFactory, type StylesApiProps } from '@mantine/core';
+import { NumberTicker } from './NumberTicker/NumberTicker';
+import { Spinner } from './Spinner/Spinner';
+import { TextTicker } from './TextTicker/TextTicker';
+import { Typewriter } from './Typewriter/Typewriter';
+/**
+ * Type defining how text should be split for animation
+ * - text: Animate the entire text as one unit
+ * - word: Animate each word separately
+ * - character: Animate each character separately
+ * - line: Animate each line separately (split by newlines)
+ */
+export type AnimationType = 'text' | 'word' | 'character' | 'line';
+/**
+ * Available animation variants
+ */
+export type AnimationVariant = 'fade' | 'blur' | 'scale' | 'slideUp' | 'slideDown' | 'slideUpElastic' | 'slideDownElastic' | 'slideLeft' | 'slideRight' | 'slideLeftElastic' | 'slideRightElastic' | 'blurUp' | 'blurDown';
+/**
+ * Animation direction
+ */
+type AnimationDirection = 'in' | 'out' | 'static' | 'none' | false | undefined;
+interface AnimateProps {
+    /**
+     * Controls the distance for slide animations (in pixels)
+     * @default 20
+     */
+    translateDistance?: MantineSize;
+    /**
+     * Controls the scale factor for scale animations
+     * For scaleUp: initial scale = 1 - scaleAmount (e.g., 0.8 means start at 0.2)
+     * For scaleDown: initial scale = 1 + scaleAmount (e.g., 0.8 means start at 1.8)
+     * @default 0.8
+     */
+    scaleAmount?: number;
+    /**
+     * Controls the blur amount for blur animations (in pixels)
+     * @default 10
+     */
+    blurAmount?: MantineSize;
+}
+export type TextAnimateStylesNames = 'root' | 'segment';
+export type TextAnimateCssVariables = {
+    root: '--text-animate-translation-distance' | '--text-animate-blur-amount' | '--text-animate-scale-amount';
+};
+export type TextAnimateDirection = 'horizontal' | 'vertical';
+export type TextAnimateIn = 'positive' | 'negative';
+export type TextAnimateOut = TextAnimateIn;
+export interface TextAnimateBaseProps {
+    /**
+     * The text content to animate
+     */
+    children: string;
+    /**
+     * The class name to be applied to each segment
+     */
+    segmentClassName?: string;
+    /**
+     * The delay before the animation starts (in seconds)
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * The duration of the animation (in seconds)
+     * @default 0.3
+     */
+    duration?: number;
+    /**
+     * How to split the text for animation
+     * @default "word"
+     */
+    by?: AnimationType;
+    /**
+     * Controls the animation direction
+     * - `in`: Animate elements in (appear)
+     * - `out`: Animate elements out (disappear)
+     * - `static`: Do not animate
+     * - `none`: Do not animate
+     * @default undefined (no animation)
+     */
+    animate?: AnimationDirection;
+    /**
+     * The animation preset to use
+     * @default "fadeIn"
+     */
+    animation?: AnimationVariant;
+    /**
+     * The delay between each segment's animation (in seconds)
+     * This controls the staggered timing between segments
+     * @default Based on animation type (0.03-0.06)
+     */
+    segmentDelay?: number;
+    /**
+     * Animation properties to control intensity of animations
+     * @default { translateDistance: 20, scaleAmount: 0.8, blurAmount: 10 }
+     */
+    animateProps?: AnimateProps;
+    /**
+     *  Callback function to be called when the animation starts
+     * @param animate The direction of the animation
+     */
+    onAnimationStart?: (animate: 'in' | 'out') => void;
+    /**
+     * Callback function to be called when the animation ends
+     * @param animate The direction of the animation
+     */
+    onAnimationEnd?: (animate: 'in' | 'out') => void;
+}
+export interface TextAnimateProps extends BoxProps, TextAnimateBaseProps, StylesApiProps<TextAnimateFactory> {
+}
+export type TextAnimateFactory = PolymorphicFactory<{
+    props: TextAnimateProps;
+    defaultComponent: 'div';
+    defaultRef: HTMLDivElement;
+    stylesNames: TextAnimateStylesNames;
+    vars: TextAnimateCssVariables;
+    staticComponents: {
+        Typewriter: typeof Typewriter;
+        Spinner: typeof Spinner;
+        NumberTicker: typeof NumberTicker;
+        TextTicker: typeof TextTicker;
+    };
+}>;
+export declare const TextAnimate: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, TextAnimateProps>) => React.ReactElement) & Omit<React.FunctionComponent<(TextAnimateProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof TextAnimateProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (TextAnimateProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
+    props: TextAnimateProps;
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: TextAnimateStylesNames;
+    vars: TextAnimateCssVariables;
+    staticComponents: {
+        Typewriter: typeof Typewriter;
+        Spinner: typeof Spinner;
+        NumberTicker: typeof NumberTicker;
+        TextTicker: typeof TextTicker;
+    };
+}> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
+    props: TextAnimateProps;
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: TextAnimateStylesNames;
+    vars: TextAnimateCssVariables;
+    staticComponents: {
+        Typewriter: typeof Typewriter;
+        Spinner: typeof Spinner;
+        NumberTicker: typeof NumberTicker;
+        TextTicker: typeof TextTicker;
+    };
+}> & import("@mantine/core/lib/core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: TextAnimateProps;
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: TextAnimateStylesNames;
+    vars: TextAnimateCssVariables;
+    staticComponents: {
+        Typewriter: typeof Typewriter;
+        Spinner: typeof Spinner;
+        NumberTicker: typeof NumberTicker;
+        TextTicker: typeof TextTicker;
+    };
+}> & {
+    Typewriter: typeof Typewriter;
+    Spinner: typeof Spinner;
+    NumberTicker: typeof NumberTicker;
+    TextTicker: typeof TextTicker;
+};
+export {};

package/dist/types/TextTicker/TextTicker.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { type BoxProps, type PolymorphicFactory, type StylesApiProps } from '@mantine/core';
+import { type TextTickerBaseProps } from './use-text-ticker';
+export type TextTickerStylesNames = 'root';
+export type TextTickerCssVariables = {
+    root: '--text-ticker-animation-duration' | '--text-ticker-animation-delay';
+};
+export interface TextTickerProps extends BoxProps, TextTickerBaseProps, StylesApiProps<TextTickerFactory> {
+}
+export type TextTickerFactory = PolymorphicFactory<{
+    props: TextTickerProps;
+    defaultComponent: 'p';
+    defaultRef: HTMLParagraphElement;
+    stylesNames: TextTickerStylesNames;
+    vars: TextTickerCssVariables;
+}>;
+/**
+ * TextTicker Component
+ *
+ * A component that animates text from random characters to a target string.
+ * This implementation uses the useTextTicker hook internally.
+ */
+export declare const TextTicker: (<C = "p">(props: import("@mantine/core").PolymorphicComponentProps<C, TextTickerProps>) => React.ReactElement) & Omit<React.FunctionComponent<(TextTickerProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof TextTickerProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (TextTickerProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
+    props: TextTickerProps;
+    defaultComponent: "p";
+    defaultRef: HTMLParagraphElement;
+    stylesNames: TextTickerStylesNames;
+    vars: TextTickerCssVariables;
+}> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
+    props: TextTickerProps;
+    defaultComponent: "p";
+    defaultRef: HTMLParagraphElement;
+    stylesNames: TextTickerStylesNames;
+    vars: TextTickerCssVariables;
+}> & import("@mantine/core/lib/core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: TextTickerProps;
+    defaultComponent: "p";
+    defaultRef: HTMLParagraphElement;
+    stylesNames: TextTickerStylesNames;
+    vars: TextTickerCssVariables;
+}>;

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

@@ -0,0 +1,114 @@
+/**
+ * Available easing functions for the animation
+ */
+export type TextTickerEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+/**
+ * Character sets for random characters
+ */
+export type TextTickerCharacterSet = 'alphanumeric' | 'alphabetic' | 'numeric' | 'symbols' | 'custom';
+/**
+ * Direction for revealing the target text
+ */
+export type TextTickerRevealDirection = 'left-to-right' | 'right-to-left' | 'center-out' | 'random';
+/**
+ * Initial text display options
+ */
+export type TextTickerInitialDisplay = 'none' | 'random' | 'target';
+/**
+ * Base props shared between TextTicker component and useTextTicker hook
+ */
+export interface TextTickerBaseProps {
+    /**
+     * The target text to animate to
+     */
+    value: string;
+    /**
+     * Initial text display option
+     * - `none`: Display nothing until animation starts
+     * - `random`: Display random characters until animation starts
+     * - `target`: Display the target text immediately
+     * @default "random"
+     */
+    initialText?: TextTickerInitialDisplay;
+    /**
+     * Whether the animation should be active
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Character set to use for random characters
+     * @default "alphanumeric"
+     */
+    characterSet?: TextTickerCharacterSet;
+    /**
+     * Custom characters to use when characterSet is `custom`
+     * @default ""
+     */
+    customCharacters?: string;
+    /**
+     * Delay before starting the animation in seconds
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Animation speed multiplier (higher = faster)
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * Easing function for the animation
+     * @default "ease-out"
+     */
+    easing?: TextTickerEasing;
+    /**
+     * Speed multiplier for random character changes (higher = more frequent changes)
+     * @default 1
+     */
+    randomChangeSpeed?: number;
+    /**
+     * Direction for revealing the target text
+     * @default "left-to-right"
+     */
+    revealDirection?: TextTickerRevealDirection;
+    /**
+     * Callback function called when animation completes
+     */
+    onCompleted?: () => void;
+}
+/**
+ * Hook props interface extending the base props
+ */
+export interface UseTextTickerProps extends TextTickerBaseProps {
+}
+/**
+ * Return value interface for the useTextTicker hook
+ */
+export interface UseTextTickerResult {
+    /**
+     * The current text being displayed
+     */
+    text: string;
+    /**
+     * Function to start the animation
+     */
+    start: () => void;
+    /**
+     * Function to stop the animation while keeping the current text
+     */
+    stop: () => void;
+    /**
+     * Function to reset the animation to the initial text
+     */
+    reset: () => void;
+    /**
+     * Whether the animation is currently running
+     */
+    isAnimating: boolean;
+}
+/**
+ * Hook that provides text ticker animation functionality
+ *
+ * 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;

package/dist/types/Typewriter/Typewriter.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { type BoxProps, type PolymorphicFactory, type StylesApiProps } from '@mantine/core';
+import { type TypewriterBaseProps } from './use-typewriter';
+export type TypewriterStylesNames = 'root' | 'cursor';
+export type TypewriterCssVariables = {};
+export interface TypewriterComponentProps extends TypewriterBaseProps {
+    /**
+     * The left section to display before the text
+     */
+    leftSection?: React.ReactNode;
+    /**
+     * Whether to show a cursor
+     * @default true
+     */
+    withCursor?: boolean;
+    /**
+     * The cursor character or ReactNode
+     * @default "|"
+     */
+    cursorChar?: React.ReactNode | string;
+    /**
+     * Whether the cursor should blink
+     * @default true
+     */
+    withBlink?: boolean;
+}
+export interface TypewriterProps extends BoxProps, TypewriterComponentProps, StylesApiProps<TypewriterFactory> {
+}
+export type TypewriterFactory = PolymorphicFactory<{
+    props: TypewriterProps;
+    defaultComponent: 'p';
+    defaultRef: HTMLParagraphElement;
+    stylesNames: TypewriterStylesNames;
+    vars: TypewriterCssVariables;
+}>;
+/**
+ * Typewriter Component
+ *
+ * A component that creates a typewriter effect using TextAnimate.
+ */
+export declare const Typewriter: (<C = "p">(props: import("@mantine/core").PolymorphicComponentProps<C, TypewriterProps>) => React.ReactElement) & Omit<React.FunctionComponent<(TypewriterProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof TypewriterProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (TypewriterProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
+    props: TypewriterProps;
+    defaultComponent: "p";
+    defaultRef: HTMLParagraphElement;
+    stylesNames: TypewriterStylesNames;
+    vars: TypewriterCssVariables;
+}> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
+    props: TypewriterProps;
+    defaultComponent: "p";
+    defaultRef: HTMLParagraphElement;
+    stylesNames: TypewriterStylesNames;
+    vars: TypewriterCssVariables;
+}> & import("@mantine/core/lib/core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: TypewriterProps;
+    defaultComponent: "p";
+    defaultRef: HTMLParagraphElement;
+    stylesNames: TypewriterStylesNames;
+    vars: TypewriterCssVariables;
+}>;

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

@@ -0,0 +1,67 @@
+export interface TypewriterBaseProps {
+    /**
+     * The text or array of texts to display in typewriter effect
+     */
+    value: string | string[];
+    /**
+     * Controls if the animation is running (`true`) or reset (false)
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Whether to display text in multiple lines
+     * @default false
+     */
+    multiline?: boolean;
+    /**
+     * The typing speed in seconds per character
+     * @default 0.03
+     */
+    speed?: number;
+    /**
+     * The delay between text changes in milliseconds (when using multiple texts)
+     * @default 2000
+     */
+    delay?: number;
+    /**
+     * Whether to loop through the texts
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Callback function to be called when the typing animation ends
+     */
+    onTypeEnd?: () => void;
+    /**
+     * Callback function to be called when the typing animation is looped
+     * and the animation is about to start again
+     */
+    onTypeLoop?: () => void;
+}
+export interface UseTypewriterResult {
+    /**
+     * The current text being displayed
+     * If multiline is true, this will be an array of strings
+     */
+    text: string | string[];
+    /**
+     * Whether the typewriter is currently typing
+     */
+    isTyping: boolean;
+    /**
+     * Start the typewriter animation
+     */
+    start: () => void;
+    /**
+     * Stop the typewriter animation
+     */
+    stop: () => void;
+    /**
+     * Reset the typewriter to its initial state
+     */
+    reset: () => void;
+}
+/**
+ * A hook that creates a typewriter effect
+ */
+export declare function useTypewriter(options: TypewriterBaseProps): UseTypewriterResult;

package/dist/types/index.d.mts

@@ -0,0 +1,9 @@
+export { TextAnimate } from './TextAnimate';
+export type { TextAnimateBaseProps, TextAnimateCssVariables, TextAnimateDirection, TextAnimateFactory, TextAnimateIn, TextAnimateOut, TextAnimateProps, } from './TextAnimate';
+export type { NumberTickerFactory, NumberTickerProps } from './NumberTicker/NumberTicker';
+export type { SpinnerFactory, SpinnerProps } from './Spinner/Spinner';
+export type { TextTickerFactory, TextTickerProps } from './TextTicker/TextTicker';
+export type { TypewriterFactory, TypewriterProps } from './Typewriter/Typewriter';
+export { useNumberTicker } from './NumberTicker/use-number-ticker';
+export { useTextTicker } from './TextTicker/use-text-ticker';
+export { useTypewriter } from './Typewriter/use-typewriter';

package/dist/types/index.d.ts

@@ -0,0 +1,9 @@
+export { TextAnimate } from './TextAnimate';
+export type { TextAnimateBaseProps, TextAnimateCssVariables, TextAnimateDirection, TextAnimateFactory, TextAnimateIn, TextAnimateOut, TextAnimateProps, } from './TextAnimate';
+export type { NumberTickerFactory, NumberTickerProps } from './NumberTicker/NumberTicker';
+export type { SpinnerFactory, SpinnerProps } from './Spinner/Spinner';
+export type { TextTickerFactory, TextTickerProps } from './TextTicker/TextTicker';
+export type { TypewriterFactory, TypewriterProps } from './Typewriter/Typewriter';
+export { useNumberTicker } from './NumberTicker/use-number-ticker';
+export { useTextTicker } from './TextTicker/use-text-ticker';
+export { useTypewriter } from './Typewriter/use-typewriter';

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@gfazioli/mantine-text-animate",
+  "version": "1.0.0",
+  "description": "TextAnimate component is a wrapper for any component that can be flipped. It is used to create cards, flip boxes and more.",
+  "homepage": "https://gfazioli.github.io/mantine-text-animate/",
+  "packageManager": "yarn@4.0.1",
+  "license": "MIT",
+  "author": "Giovambattista Fazioli <giovambattista.fazioli@gmail.com>",
+  "keywords": [
+    "animation",
+    "card",
+    "extension",
+    "flip",
+    "mantine",
+    "react",
+    "react-component",
+    "typescript",
+    "widget"
+  ],
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.mts",
+        "default": "./dist/esm/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./styles.layer.css": "./dist/styles.layer.css"
+  },
+  "repository": "https://github.com/gfazioli/mantine-text-animate.git",
+  "peerDependencies": {
+    "@mantine/core": ">=7.0.0",
+    "@mantine/hooks": ">=7.0.0",
+    "react": "^18.x || ^19.x",
+    "react-dom": "^18.x || ^19.x"
+  },
+  "bugs": "https://github.com/gfazioli/mantine-text-animate/issues"
+}