Function CircularTextDemo

src/demo/TextAnimations/CircularTextDemo.jsx:25–114

()

};

const CircularTextDemo = () => {
  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const { text, onHover, spinDuration } = props;

  const propData = useMemo(
    () => [
      {
        name: 'text',
        type: 'string',
        default: "''",
        description: 'The text to display in a circular layout.'
      },
      {
        name: 'spinDuration',
        type: 'number',
        default: '20',
        description: 'The duration (in seconds) for one full rotation.'
      },
      {
        name: 'onHover',
        type: "'slowDown' | 'speedUp' | 'pause' | 'goBonkers'",
        default: 'undefined',
        description:
          "Specifies the hover behavior variant. Options include 'slowDown', 'speedUp', 'pause', and 'goBonkers'."
      },
      {
        name: 'className',
        type: 'string',
        default: "''",
        description: 'Optional additional CSS classes to apply to the component.'
      }
    ],
    []
  );

  const options = [
    { label: 'Slow Down', value: 'slowDown' },
    { label: 'Speed Up', value: 'speedUp' },
    { label: 'Pause', value: 'pause' },
    { label: 'Go Bonkers', value: 'goBonkers' }
  ];

  return (
    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={resetProps} hasChanges={hasChanges}>
      <TabsLayout>
        <PreviewTab>
          <Box position="relative" className="demo-container" h={400} overflow="hidden">
            <CircularText text={text} onHover={onHover} spinDuration={spinDuration} />
          </Box>

          <Customize className="preview-options">
            <PreviewInput
              title="Text"
              value={text}
              placeholder="Enter text..."
              width={220}
              maxLength={25}
              onChange={val => updateProp('text', val)}