vue-bits/src/demo/Backgrounds/AuroraDemo.vue

<template>
  <div class="aurora-demo">
    <TabbedLayout>
      <template #preview>
        <div class="demo-container">
          <Aurora
            :color-stops="colorStops"
            :amplitude="amplitude"
            :blend="blend"
            :speed="speed"
            :intensity="intensity"
            class="w-full"
          />
        </div>

        <Customize>
          <div class="space-y-2">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Color Stops</h3>

            <div class="flex gap-4">
              <PreviewColor
                v-for="(color, index) in colorStops"
                :key="index"
                :title="`Color ${index + 1}`"
                :model-value="color"
                @update:model-value="value => updateColorStop(index, value)"
              />
            </div>
          </div>

          <PreviewSlider
            title="Amplitude"
            :model-value="amplitude"
            @update:model-value="amplitude = $event"
            :min="0"
            :max="2"
            :step="0.1"
          />

          <PreviewSlider
            title="Blend"
            :model-value="blend"
            @update:model-value="blend = $event"
            :min="0"
            :max="1"
            :step="0.1"
          />

          <PreviewSlider
            title="Speed"
            :model-value="speed"
            @update:model-value="speed = $event"
            :min="0"
            :max="3"
            :step="0.1"
          />

          <PreviewSlider
            title="Intensity"
            :model-value="intensity"
            @update:model-value="intensity = $event"
            :min="0"
            :max="2"
            :step="0.1"
          />
        </Customize>

        <PropTable :data="propData" />

        <Dependencies :dependency-list="['ogl']" />
      </template>

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

      <template #cli>
        <CliInstallation :command="aurora.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 Dependencies from '../../components/code/Dependencies.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Customize from '../../components/common/Customize.vue';
import Aurora from '@/content/Backgrounds/Aurora/Aurora.vue';
import PreviewColor from '@/components/common/PreviewColor.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import { aurora } from '@/constants/code/Backgrounds/auroraCode';

const colorStops = ref(['#171D22', '#7cff67', '#171D22']);
const amplitude = ref(1.0);
const blend = ref(0.5);
const speed = ref(1.0);
const intensity = ref(1.0);

const updateColorStop = (index: number, color: string) => {
  colorStops.value[index] = color;
};

const propData = [
  {
    name: 'colorStops',
    type: 'string[]',
    default: "['#171D22', '#7cff67', '#171D22']",
    description: 'Array of color stops for the aurora gradient.'
  },
  {
    name: 'amplitude',
    type: 'number',
    default: '1.0',
    description: 'Controls the height variation of the aurora effect.'
  },
  {
    name: 'blend',
    type: 'number',
    default: '0.5',
    description: 'Controls the blending/smoothness of the aurora effect.'
  },
  { name: 'speed', type: 'number', default: '1.0', description: 'Controls the animation speed of the aurora effect.' },
  {
    name: 'intensity',
    type: 'number',
    default: '1.0',
    description: 'Controls the overall intensity/opacity of the aurora effect.'
  },
  { name: 'time', type: 'number', default: 'undefined', description: 'Optional time override for the animation.' },
  { name: 'className', type: 'string', default: '""', description: 'Additional CSS class names for styling.' },
  { name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
];
</script>

<style scoped>
.demo-container {
  overflow: hidden;
  padding: 0;
}
</style>