Function RotatingTextDemo

src/demo/TextAnimations/RotatingTextDemo.jsx:29–240

()

};

const RotatingTextDemo = () => {
  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const { rotationInterval, staggerDuration, staggerFrom, splitBy, auto, loop } = props;
  const [key, forceRerender] = useForceRerender();

  const propData = useMemo(
    () => [
      {
        name: 'texts',
        type: 'string[]',
        default: '[]',
        description: 'An array of text strings to be rotated.'
      },
      {
        name: 'rotationInterval',
        type: 'number',
        default: '2000',
        description: 'The interval (in milliseconds) between text rotations.'
      },
      {
        name: 'initial',
        type: 'object',
        default: '{ y: "100%", opacity: 0 }',
        description: 'Initial animation state for each element.'
      },
      {
        name: 'animate',
        type: 'object',
        default: '{ y: 0, opacity: 1 }',
        description: 'Animation state when elements enter.'
      },
      {
        name: 'exit',
        type: 'object',
        default: '{ y: "-120%", opacity: 0 }',
        description: 'Exit animation state for elements.'
      },
      {
        name: 'animatePresenceMode',
        type: 'string',
        default: '"wait"',
        description: "Mode for AnimatePresence; for example, 'wait' to finish exit animations before entering."
      },
      {
        name: 'animatePresenceInitial',
        type: 'boolean',
        default: 'false',
        description: 'Determines whether the AnimatePresence component should run its initial animation.'
      },
      {
        name: 'staggerDuration',
        type: 'number',
        default: '0',
        description: "Delay between each character's animation."
      },
      {
        name: 'staggerFrom',
        type: 'string',