Function TextCursorDemo

src/demo/TextAnimations/TextCursorDemo.jsx:25–136

()

};

const TextCursorDemo = () => {
  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const { text, followMouseDirection, randomFloat } = props;

  const [key, forceRerender] = useForceRerender();

  const propData = useMemo(
    () => [
      {
        name: 'text',
        type: 'string',
        default: '⚛️',
        description: 'The text string to display as the trail.'
      },
      {
        name: 'spacing',
        type: 'number',
        default: '100',
        description: 'The spacing in pixels between each trail point.'
      },
      {
        name: 'followMouseDirection',
        type: 'boolean',
        default: 'true',
        description: 'If true, each text rotates to follow the mouse direction.'
      },
      {
        name: 'randomFloat',
        type: 'boolean',
        default: 'true',
        description: 'If true, enables random floating offsets in position and rotation for a dynamic effect.'
      },
      {
        name: 'exitDuration',
        type: 'number',
        default: '0.5',
        description: 'The duration in seconds for the exit animation of each trail item.'
      },
      {
        name: 'removalInterval',
        type: 'number',
        default: '30',
        description: 'The interval in milliseconds between removing trail items when the mouse stops moving.'
      },
      {
        name: 'maxPoints',
        type: 'number',
        default: '5',
        description: 'The maximum number of trail points to display.'
      }
    ],
    []
  );

  return (
    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={resetProps} hasChanges={hasChanges}>
      <TabsLayout>
        <PreviewTab>