Function TrueFocusDemo

src/demo/TextAnimations/TrueFocusDemo.jsx:28–155

()

};

const TrueFocusDemo = () => {
  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const { manualMode, blurAmount, animationDuration, pauseBetweenAnimations, borderColor } = props;

  const config = {
    sentence: 'True Focus',
    manualMode,
    blurAmount,
    borderColor,
    animationDuration: animationDuration,
    pauseBetweenAnimations
  };

  const propData = useMemo(
    () => [
      {
        name: 'sentence',
        type: 'string',
        default: "'True Focus'",
        description: 'The text to display with the focus animation.'
      },
      {
        name: 'separator',
        type: 'string',
        default: "' '",
        description: 'Optional string used to separate words in the sentence.'
      },
      {
        name: 'manualMode',
        type: 'boolean',
        default: 'false',
        description: 'Disables automatic animation when set to true.'
      },
      {
        name: 'blurAmount',
        type: 'number',
        default: '5',
        description: 'The amount of blur applied to non-active words.'
      },
      {
        name: 'borderColor',
        type: 'string',
        default: "'green'",
        description: 'The color of the focus borders.'
      },
      {
        name: 'glowColor',
        type: 'string',
        default: "'rgba(0, 255, 0, 0.6)'",
        description: 'The color of the glowing effect on the borders.'
      },
      {
        name: 'animationDuration',
        type: 'number',
        default: '0.5',
        description: 'The duration of the animation for each word.'
      },
      {