Function BlurTextDemo

src/demo/TextAnimations/BlurTextDemo.jsx:29–156

()

};

const BlurTextDemo = () => {
  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const { animateBy, direction, delay } = props;

  const [key, forceRerender] = useForceRerender();

  const propData = useMemo(
    () => [
      {
        name: 'text',
        type: 'string',
        default: '""',
        description: 'The text content to animate.'
      },
      {
        name: 'animateBy',
        type: 'string',
        default: '"words"',
        description: "Determines whether to animate by 'words' or 'letters'."
      },
      {
        name: 'direction',
        type: 'string',
        default: '"top"',
        description: "Direction from which the words/letters appear ('top' or 'bottom')."
      },
      {
        name: 'delay',
        type: 'number',
        default: '200',
        description: 'Delay between animations for each word/letter (in ms).'
      },
      {
        name: 'stepDuration',
        type: 'number',
        default: '0.35',
        description: 'The time taken for each letter/word to animate (in seconds).'
      },
      {
        name: 'threshold',
        type: 'number',
        default: '0.1',
        description: 'Intersection threshold for triggering the animation.'
      },
      {
        name: 'rootMargin',
        type: 'string',
        default: '"0px"',
        description: 'Root margin for the intersection observer.'
      },
      {
        name: 'onAnimationComplete',
        type: 'function',
        default: 'undefined',
        description: 'Callback function triggered when all animations complete.'
      }
    ],
    []