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

<template>
  <div class="shiny-text-demo">
    <TabbedLayout>
      <template #preview>
        <h2 class="demo-title-extra">Basic</h2>

        <div class="demo-container">
          <ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
        </div>

        <h2 class="demo-title-extra">Button Text</h2>

        <div class="demo-container">
          <div class="shiny-button">
            <ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
          </div>
        </div>

        <h2 class="demo-title-extra">Configurable Speed</h2>

        <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
          <ShinyText
            :text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
            :disabled="false"
            :speed="speed"
            class-name="shiny-text-demo"
          />
        </div>

        <Customize>
          <PreviewSlider title="Animation Duration" v-model="speed" :min="1" :max="5" :step="0.1" value-unit="s" />
        </Customize>

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

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

      <template #cli>
        <CliInstallation :command="shinyText.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 ShinyText from '../../content/TextAnimations/ShinyText/ShinyText.vue';
import { shinyText } from '@/constants/code/TextAnimations/shinyTextCode';

const speed = ref(3);

const propData = [
  {
    name: 'text',
    type: 'string',
    default: '-',
    description: 'The text to be displayed with the shiny effect.'
  },
  {
    name: 'disabled',
    type: 'boolean',
    default: 'false',
    description: 'Disables the shiny effect when set to true.'
  },
  {
    name: 'speed',
    type: 'number',
    default: '5',
    description: 'Specifies the duration of the animation in seconds.'
  },
  {
    name: 'className',
    type: 'string',
    default: "''",
    description: 'Adds custom classes to the root element.'
  }
];
</script>

<style scoped>
.demo-container {
  min-height: 200px;
}

.shiny-button {
  padding: 12px 24px;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.shiny-button:hover {
  transform: translateY(-2px);
}

.shiny-text-demo {
  font-weight: 600;
}
</style>