Function ASCIITextDemo

src/demo/TextAnimations/ASCIITextDemo.jsx:72–140

()

];

const ASCIITextDemo = () => {
  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const { text, enableWaves, asciiFontSize } = props;

  const [key, forceRerender] = useForceRerender();
  const dependencyList = useMemo(() => ['three'], []);

  useEffect(() => {
    forceRerender();
  }, [forceRerender]);

  return (
    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={resetProps} hasChanges={hasChanges}>
      <TabsLayout>
        <PreviewTab>
          <Box position="relative" className="demo-container" minH={400} maxH={400} overflow="hidden" mb={6}>
            <ASCIIText
              key={key}
              text={text}
              enableWaves={enableWaves}
              asciiFontSize={asciiFontSize}
              textFontSize={250}
              planeBaseHeight={12}
            />
          </Box>

          <Customize>
            <PreviewInput
              title="Text"
              value={text}
              placeholder="Enter text..."
              width={200}
              maxLength={10}
              onChange={val => updateProp('text', val)}
            />

            <PreviewSlider
              title="Size"
              min={1}
              max={64}
              step={1}
              value={asciiFontSize}
              onChange={val => {
                updateProp('asciiFontSize', Number(val) || 1);
                forceRerender();
              }}
            />

            <PreviewSwitch
              title="Waves"
              isChecked={enableWaves}
              onChange={checked => {
                updateProp('enableWaves', checked);
                forceRerender();
              }}
            />
          </Customize>