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

<template>
  <div class="truefocus-demo">
    <TabbedLayout>
      <template #preview>
        <div class="relative py-6 overflow-hidden demo-container" style="min-height: 200px">
          <div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
            <TrueFocus v-bind="config" />
          </div>
        </div>

        <Customize>
          <PreviewColor title="Text Color" v-model="borderColor" @update:model-value="forceRerender" />

          <PreviewSwitch
            title="Hover Mode"
            v-model="manualMode"
            @update:model-value="forceRerender"
          />

          <PreviewSlider
            title="Blur Amount"
            v-model="blurAmount"
            :min="0"
            :max="15"
            :step="0.5"
            value-unit="px"
            @update:model-value="forceRerender"
          />

          <PreviewSlider
            title="Animation Duration"
            v-model="animationDuration"
            :min="0.1"
            :max="3"
            :step="0.1"
            value-unit="s"
            :disabled="!manualMode"
            @update:model-value="forceRerender"
          />

          <PreviewSlider
            title="Pause Between Animations"
            v-model="pauseBetweenAnimations"
            :min="0"
            :max="5"
            :step="0.5"
            value-unit="s"
            :disabled="manualMode"
            @update:model-value="forceRerender"
          />
        </Customize>

        <PropTable :data="propData" />
        <Dependencies :dependency-list="['framer-motion']" />
      </template>

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

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

<script setup lang="ts">
import { ref, computed } 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 Dependencies from "../../components/code/Dependencies.vue";
import Customize from "../../components/common/Customize.vue";
import PreviewColor from "../../components/common/PreviewColor.vue";
import PreviewSlider from "../../components/common/PreviewSlider.vue";
import PreviewSwitch from "../../components/common/PreviewSwitch.vue";
import TrueFocus from "../../content/TextAnimations/TrueFocus/TrueFocus.vue";
import { trueFocus } from "../../constants/code/TextAnimations/trueFocusCode";
import { useForceRerender } from "@/composables/useForceRerender";

const { rerenderKey: key, forceRerender } = useForceRerender();

const manualMode = ref(false);
const blurAmount = ref(5);
const animationDuration = ref(0.5);
const pauseBetweenAnimations = ref(1);
const borderColor = ref("#27FF64");

const config = computed(() => ({
  sentence: "True Focus",
  manualMode: manualMode.value,
  blurAmount: blurAmount.value,
  borderColor: borderColor.value,
  animationDuration: animationDuration.value,
  pauseBetweenAnimations: pauseBetweenAnimations.value,
}));

const propData = [
  {
    name: "sentence",
    type: "string",
    default: "'True Focus'",
    description: "The text to display with the focus animation.",
  },
  {
    name: "manualMode",
    type: "boolean",
    default: "false",
    description: "Disables automatic animation when set to true.",
  },
  {
    name: "blurAmount",
    type: "number",
    default: "5",
    description: "The amount of blur applied to non-active words.",
  },
  {
    name: "borderColor",
    type: "string",
    default: "'green'",
    description: "The color of the focus borders.",
  },
  {
    name: "glowColor",
    type: "string",
    default: "'rgba(0, 255, 0, 0.6)'",
    description: "The color of the glowing effect on the borders.",
  },
  {
    name: "animationDuration",
    type: "number",
    default: "0.5",
    description: "The duration of the animation for each word.",
  },
  {
    name: "pauseBetweenAnimations",
    type: "number",
    default: "1",
    description: "Time to pause between focusing on each word (in auto mode).",
  },
];
</script>