vue-bits/src/demo/Animations/ClickSparkDemo.vue

<template>
  <div class="click-spark-demo">
    <TabbedLayout>
      <template #preview>
        <div class="demo-container">
          <ClickSpark :key="rerenderKey" :spark-color="sparkColor" :spark-size="sparkSize" :spark-radius="sparkRadius"
            :spark-count="sparkCount" :duration="duration" :easing="easing" :extra-scale="extraScale"
            class="click-spark-demo-area">
          </ClickSpark>

          <div
            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none">
            Click Around!
          </div>
        </div>

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

          <PreviewSlider title="Spark Size" v-model="sparkSize" :min="5" :max="30" :step="1"
            @update:model-value="forceRerender" />

          <PreviewSlider title="Spark Radius" v-model="sparkRadius" :min="10" :max="50" :step="5"
            @update:model-value="forceRerender" />

          <PreviewSlider title="Spark Count" v-model="sparkCount" :min="4" :max="20" :step="1"
            @update:model-value="forceRerender" />

          <PreviewSlider title="Duration (ms)" v-model="duration" :min="200" :max="1000" :step="50"
            @update:model-value="forceRerender" />

          <PreviewSlider title="Extra Scale" v-model="extraScale" :min="0.5" :max="2" :step="0.1"
            @update:model-value="forceRerender" />
        </Customize>

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

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

      <template #cli>
        <CliInstallation :command="clickSpark.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 PreviewColor from '../../components/common/PreviewColor.vue'
import PreviewSlider from '../../components/common/PreviewSlider.vue'
import ClickSpark from '../../content/Animations/ClickSpark/ClickSpark.vue'
import { clickSpark } from '@/constants/code/Animations/clickSparkCode'
import { useForceRerender } from '@/composables/useForceRerender'

const sparkColor = ref('#ffffff')
const sparkSize = ref(10)
const sparkRadius = ref(15)
const sparkCount = ref(8)
const duration = ref(400)
const easing = ref<"linear" | "ease-in" | "ease-out" | "ease-in-out">('ease-out')
const extraScale = ref(1)
const { rerenderKey, forceRerender } = useForceRerender()

const propData = [
  { name: 'sparkColor', type: 'string', default: "'#fff'", description: 'Color of the spark lines.' },
  { name: 'sparkSize', type: 'number', default: '10', description: 'Length of each spark line.' },
  { name: 'sparkRadius', type: 'number', default: '15', description: 'Distance sparks travel from the click center.' },
  { name: 'sparkCount', type: 'number', default: '8', description: 'Number of spark lines per click.' },
  { name: 'duration', type: 'number', default: '400', description: 'Animation duration in milliseconds.' },
  { name: 'easing', type: 'string', default: "'ease-out'", description: 'Easing function: "linear", "ease-in", "ease-out", or "ease-in-out".' },
  { name: 'extraScale', type: 'number', default: '1.0', description: 'Scale multiplier for spark distance and size.' }
]
</script>

<style scoped>
.click-spark-demo-area {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.demo-text {
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.demo-text h3 {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.demo-text p {
  font-size: 0.9rem;
  color: #999;
  margin: 0;
}

.demo-content {
  padding: 2rem;
}
</style>