Function CurvedLoopDemo

src/demo/TextAnimations/CurvedLoopDemo.jsx:26–144

()

};

const CurvedLoopDemo = () => {
  const [key, forceRerender] = useForceRerender();

  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const { marqueeText, speed, curveAmount, interactive } = props;

  const propData = useMemo(
    () => [
      {
        name: 'marqueeText',
        type: 'string',
        default: '""',
        description: 'The text to display in the curved marquee'
      },
      {
        name: 'speed',
        type: 'number',
        default: '2',
        description: 'Animation speed of the marquee text'
      },
      {
        name: 'className',
        type: 'string',
        default: 'undefined',
        description: 'CSS class name for styling the text'
      },
      {
        name: 'curveAmount',
        type: 'number',
        default: '400',
        description: 'Amount of curve in the text path'
      },
      {
        name: 'direction',
        type: '"left" | "right"',
        default: '"left"',
        description: 'Initial direction of the marquee animation'
      },
      {
        name: 'interactive',
        type: 'boolean',
        default: 'true',
        description: 'Whether the marquee can be dragged by the user'
      }
    ],
    []
  );

  return (
    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={resetProps} hasChanges={hasChanges}>
      <TabsLayout>
        <PreviewTab>
          <Box position="relative" className="demo-container" h={400} overflow="hidden" p={0}>
            <CurvedLoop
              key={key}
              marqueeText={marqueeText}
              speed={speed}
              curveAmount={curveAmount}