āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/imskyleen/animate-ui/primitives/texts/morphing ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<MorphingText text="Morphing Text" />
<TypeTable type={{ text: { description: 'The text to display.', type: 'string | string[]', required: true, }, initial: { description: 'The initial state of the text.', type: 'TargetAndTransition | VariantLabels | boolean', required: false, default: '{ opacity: 0, scale: 0.8, filter: "blur(10px)" }', }, animate: { description: 'The animate state of the text.', type: 'TargetAndTransition | VariantLabels | boolean', required: false, default: '{ opacity: 1, scale: 1, filter: "blur(0px)" }', }, exit: { description: 'The exit state of the text.', type: 'TargetAndTransition | VariantLabels | boolean', required: false, default: '{ opacity: 0, scale: 0.8, filter: "blur(10px)" }', }, transition: { description: 'The transition of the text.', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 125, damping: 25, mass: 0.4 }", }, loop: { description: 'Whether the text should loop. Only used if text is a string.', type: 'boolean', required: false, default: 'false', }, holdDelay: { description: 'The delay to use between each text. Only used if text is an array.', type: 'number', required: false, default: '2500', }, delay: { description: 'The delay to use. Only used if text is a string.', type: 'number', required: false, default: '0', }, inView: { description: 'Whether the text is in view. Only used if text is a string.', type: 'boolean', required: false, default: 'false', }, inViewMargin: { description: 'The margin to use when the text is in view. Only used if text is a string.', type: 'string', required: false, default: '0px', }, inViewOnce: { description: 'Whether the text should only animate once. Only used if text is a string.', type: 'boolean', required: false, default: 'true', }, '...props': { description: 'The props of the morphing text.', type: 'HTMLMotionProps<"span">', required: false, }, }} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā