Create <Antigravity /> animation

2026-04-22 01:54:38 -06:00 · 2025-12-26 19:34:59 +07:00
parent b91dd767ac
commit 37d8fa2928
5 changed files with 602 additions and 1 deletions
@@ -0,0 +1,230 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container h-[600px] overflow-hidden p-0">
+        <Antigravity
+          :key="componentKey"
+          :count="count"
+          :magnetRadius="magnetRadius"
+          :ringRadius="ringRadius"
+          :waveSpeed="waveSpeed"
+          :waveAmplitude="waveAmplitude"
+          :particleSize="particleSize"
+          :lerpSpeed="lerpSpeed"
+          :color="color"
+          :autoAnimate="autoAnimate"
+          :particleVariance="particleVariance"
+          :rotationSpeed="rotationSpeed"
+          :depthFactor="depthFactor"
+          :pulseSpeed="pulseSpeed"
+          :particleShape="particleShape"
+          :fieldStrength="fieldStrength"
+        />
+      </div>
+
+      <Customize>
+        <PreviewColor title="Color" v-model="color" />
+
+        <PreviewSelect
+          title="Particle Shape"
+          :options="shapeOptions"
+          v-model="particleShape"
+        />
+
+        <PreviewSlider title="Magnet Radius" :min="5" :max="50" :step="1" v-model="magnetRadius" />
+
+        <PreviewSlider title="Ring Radius" :min="5" :max="25" :step="1" v-model="ringRadius" />
+
+        <PreviewSlider title="Wave Speed" :min="0" :max="5" :step="0.1" v-model="waveSpeed" />
+
+        <PreviewSlider title="Wave Amplitude" :min="0" :max="5" :step="0.1" v-model="waveAmplitude" />
+
+        <PreviewSlider title="Particle Size" :min="0.1" :max="2" :step="0.1" v-model="particleSize" />
+
+        <PreviewSlider title="Particle Variance" :min="0" :max="1" :step="0.1" v-model="particleVariance" />
+
+        <PreviewSlider title="Lerp Speed" :min="0.01" :max="0.2" :step="0.01" v-model="lerpSpeed" />
+
+        <PreviewSlider title="Count" :min="100" :max="5000" :step="100" v-model="count" />
+
+        <PreviewSlider title="Rotation Speed" :min="0" :max="5" :step="0.1" v-model="rotationSpeed" />
+
+        <PreviewSlider title="Depth Factor" :min="0" :max="5" :step="0.1" v-model="depthFactor" />
+
+        <PreviewSlider title="Pulse Speed" :min="0" :max="10" :step="0.1" v-model="pulseSpeed" />
+
+        <PreviewSlider title="Field Strength" :min="0.1" :max="20" :step="0.1" v-model="fieldStrength" />
+
+        <PreviewSwitch title="Auto Animate" v-model="autoAnimate" />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['three']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="antigravity" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="antigravity.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from '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 PreviewSelect from '../../components/common/PreviewSelect.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import { antigravity } from '../../constants/code/Animations/antigravityCode';
+import Antigravity, { type ParticleShape } from '../../content/Animations/Antigravity/Antigravity.vue';
+
+const magnetRadius = ref(6);
+const ringRadius = ref(7);
+const waveSpeed = ref(0.4);
+const waveAmplitude = ref(1);
+const particleSize = ref(1.5);
+const lerpSpeed = ref(0.05);
+const count = ref(300);
+const color = ref('#27FF64');
+const autoAnimate = ref(true);
+const particleVariance = ref(1);
+const rotationSpeed = ref(0);
+const depthFactor = ref(1);
+const pulseSpeed = ref(3);
+const particleShape = ref<ParticleShape>('capsule');
+const fieldStrength = ref(10);
+
+const componentKey = ref(0);
+
+const shapeOptions = [
+  { value: 'capsule', label: 'Capsule' },
+  { value: 'sphere', label: 'Sphere' },
+  { value: 'box', label: 'Box' },
+  { value: 'tetrahedron', label: 'Tetrahedron' }
+];
+
+watch(
+  [
+    magnetRadius,
+    ringRadius,
+    waveSpeed,
+    waveAmplitude,
+    particleSize,
+    lerpSpeed,
+    count,
+    color,
+    autoAnimate,
+    particleVariance,
+    rotationSpeed,
+    depthFactor,
+    pulseSpeed,
+    particleShape,
+    fieldStrength
+  ],
+  () => {
+    componentKey.value++;
+  }
+);
+
+const propData = [
+  {
+    name: 'count',
+    type: 'number',
+    default: '300',
+    description: 'Number of particles'
+  },
+  {
+    name: 'magnetRadius',
+    type: 'number',
+    default: '10',
+    description: 'Radius of the magnetic field'
+  },
+  {
+    name: 'ringRadius',
+    type: 'number',
+    default: '10',
+    description: 'Radius of the formed ring'
+  },
+  {
+    name: 'waveSpeed',
+    type: 'number',
+    default: '0.4',
+    description: 'Speed of the wave animation'
+  },
+  {
+    name: 'waveAmplitude',
+    type: 'number',
+    default: '1',
+    description: 'Intensity of the wave (0 for perfect circle)'
+  },
+  {
+    name: 'particleSize',
+    type: 'number',
+    default: '2',
+    description: 'Scale multiplier for particles'
+  },
+  {
+    name: 'lerpSpeed',
+    type: 'number',
+    default: '0.1',
+    description: 'How fast particles move to the ring'
+  },
+  {
+    name: 'color',
+    type: 'string',
+    default: '#27FF64',
+    description: 'Color of the particles'
+  },
+  {
+    name: 'autoAnimate',
+    type: 'boolean',
+    default: 'false',
+    description: 'Automatically animate when idle'
+  },
+  {
+    name: 'particleVariance',
+    type: 'number',
+    default: '1',
+    description: 'Variance in particle size (0-1)'
+  },
+  {
+    name: 'rotationSpeed',
+    type: 'number',
+    default: '0',
+    description: 'Rotation speed of the ring'
+  },
+  {
+    name: 'depthFactor',
+    type: 'number',
+    default: '1',
+    description: 'Z-axis depth multiplier'
+  },
+  {
+    name: 'pulseSpeed',
+    type: 'number',
+    default: '3',
+    description: 'Speed of particle size pulsation'
+  },
+  {
+    name: 'particleShape',
+    type: 'string',
+    default: 'capsule',
+    description: 'Shape of the particles (capsule, sphere, box, tetrahedron)'
+  },
+  {
+    name: 'fieldStrength',
+    type: 'number',
+    default: '10',
+    description: 'Tightness of the ring formation'
+  }
+];
+</script>