vue-bits/src/demo/TextAnimations/FuzzyTextDemo.vue

<template>
  <div class="fuzzy-text-demo">
    <TabbedLayout>
      <template #preview>
        <div class="demo-container relative h-[500px] overflow-hidden">
          <div class="flex flex-col items-center justify-center h-full">
            <FuzzyText
              :key="`main-${rerenderKey}`"
              text="404"
              :base-intensity="baseIntensity"
              :hover-intensity="hoverIntensity"
              :enable-hover="enableHover"
              :font-size="140"
            />

            <div class="my-1" />

            <FuzzyText
              :key="`sub-${rerenderKey}`"
              text="not found"
              :base-intensity="baseIntensity"
              :hover-intensity="hoverIntensity"
              :enable-hover="enableHover"
              :font-size="70"
              font-family="Gochi Hand"
            />
          </div>
        </div>

        <Customize>
          <PreviewSlider
            title="Base Intensity"
            v-model="baseIntensity"
            :min="0"
            :max="1"
            :step="0.01"
            @update:model-value="forceRerender"
          />

          <PreviewSlider
            title="Hover Intensity"
            v-model="hoverIntensity"
            :min="0"
            :max="2"
            :step="0.01"
            @update:model-value="forceRerender"
          />

          <PreviewSwitch
            title="Enable Hover"
            :model-value="enableHover"
            @update:model-value="
              (val: boolean) => {
                enableHover = val;
                forceRerender();
              }
            "
          />
        </Customize>

        <PropTable :data="propData" />
      </template>

      <template #code>
        <CodeExample :code-object="fuzzyText" />
      </template>

      <template #cli>
        <CliInstallation :command="fuzzyText.cli" />
      </template>
    </TabbedLayout>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import FuzzyText from '../../content/TextAnimations/FuzzyText/FuzzyText.vue';
import { fuzzyText } from '@/constants/code/TextAnimations/fuzzyTextCode';
import { useForceRerender } from '@/composables/useForceRerender';

const baseIntensity = ref(0.2);
const hoverIntensity = ref(0.5);
const enableHover = ref(true);

const { rerenderKey, forceRerender } = useForceRerender();

const propData = [
  {
    name: 'text',
    type: 'string',
    default: '""',
    description: 'The text content to display inside the fuzzy text component.'
  },
  {
    name: 'fontSize',
    type: 'number | string',
    default: '"clamp(2rem, 8vw, 8rem)"',
    description:
      'Specifies the font size of the text. Accepts any valid CSS font-size value or a number (interpreted as pixels).'
  },
  {
    name: 'fontWeight',
    type: 'string | number',
    default: '900',
    description: 'Specifies the font weight of the text.'
  },
  {
    name: 'fontFamily',
    type: 'string',
    default: '"inherit"',
    description: 'Specifies the font family of the text. "inherit" uses the computed style from the parent.'
  },
  {
    name: 'color',
    type: 'string',
    default: '#fff',
    description: 'Specifies the text color.'
  },
  {
    name: 'enableHover',
    type: 'boolean',
    default: 'true',
    description: 'Enables the hover effect for the fuzzy text.'
  },
  {
    name: 'baseIntensity',
    type: 'number',
    default: '0.18',
    description: 'The fuzz intensity when the text is not hovered.'
  },
  {
    name: 'hoverIntensity',
    type: 'number',
    default: '0.5',
    description: 'The fuzz intensity when the text is hovered.'
  }
];
</script>