@gfazioli/mantine-text-animate
Version:
The TextAnimate component allows you to animate text with various effects.
82 lines (81 loc) • 2.77 kB
TypeScript
import { type BoxProps, type MantineColor, type PolymorphicFactory, type StylesApiProps } from '@mantine/core';
import React from 'react';
export type GradientStylesNames = 'root';
export type GradientCssVariables = {
root: '--text-animate-gradient-speed' | '--text-animate-gradient-direction' | '--text-animate-gradient-end-x' | '--text-animate-gradient-end-y';
};
export interface GradientBaseProps {
/**
* Array of color values for the gradient — accepts Mantine color names or CSS values
* @example ['red', '#00ff00', 'blue']
*/
colors: MantineColor[];
/**
* Animation speed multiplier (higher = faster)
* @default 1
*/
speed?: number;
/**
* Gradient direction in degrees
* @default 90
*/
direction?: number;
/**
* Whether the gradient animation is active
* @default true
*/
animate?: boolean;
/**
* The text content to display with gradient
*/
children: React.ReactNode;
}
export interface GradientProps extends BoxProps, GradientBaseProps, StylesApiProps<GradientFactory> {
}
export type GradientFactory = PolymorphicFactory<{
props: GradientProps;
defaultComponent: 'span';
defaultRef: HTMLSpanElement;
stylesNames: GradientStylesNames;
vars: GradientCssVariables;
}>;
/**
* Gradient Component
*
* A component that displays text with an animated gradient background.
*/
export declare const Gradient: (<C = "span">(props: import("@mantine/core").PolymorphicComponentProps<C, GradientProps>) => React.ReactElement) & Omit<React.FunctionComponent<(GradientProps & {
component?: any;
} & Omit<any, keyof GradientProps | "component"> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (GradientProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("@mantine/core").ThemeExtend<{
props: GradientProps;
defaultComponent: "span";
defaultRef: HTMLSpanElement;
stylesNames: GradientStylesNames;
vars: GradientCssVariables;
}> & import("@mantine/core").ComponentClasses<{
props: GradientProps;
defaultComponent: "span";
defaultRef: HTMLSpanElement;
stylesNames: GradientStylesNames;
vars: GradientCssVariables;
}> & {
varsResolver: import("@mantine/core").VarsResolver<{
props: GradientProps;
defaultComponent: "span";
defaultRef: HTMLSpanElement;
stylesNames: GradientStylesNames;
vars: GradientCssVariables;
}>;
} & import("@mantine/core").PolymorphicComponentWithProps<{
props: GradientProps;
defaultComponent: "span";
defaultRef: HTMLSpanElement;
stylesNames: GradientStylesNames;
vars: GradientCssVariables;
}> & Record<string, never>;