mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 22:49:31 -07:00
documentation structure
This commit is contained in:
David Haz
117
src/demo/Animations/FadeContentDemo.vue
Normal file
117
src/demo/Animations/FadeContentDemo.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="fade-content-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<FadeContent
|
||||
:key="rerenderKey"
|
||||
:blur="blur"
|
||||
:duration="duration"
|
||||
:delay="delay"
|
||||
:threshold="threshold"
|
||||
:initial-opacity="initialOpacity"
|
||||
:easing="easing"
|
||||
class="fade-content-demo-content"
|
||||
>
|
||||
<div class="demo-content">
|
||||
<h4>Fade Content Example</h4>
|
||||
<p>This content will fade in when it enters the viewport.</p>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Duration (ms)" v-model="duration" :min="100" :max="3000" :step="100"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Delay (ms)" v-model="delay" :min="0" :max="1000" :step="50"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1"
|
||||
@update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="fadeContent" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="fadeContent.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue'
|
||||
import RefreshButton from '../../components/common/RefreshButton.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 PreviewSwitch from '../../components/common/PreviewSwitch.vue'
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue'
|
||||
import FadeContent from '../../content/Animations/FadeContent/FadeContent.vue'
|
||||
import { fadeContent } from '@/constants/code/Animations/fadeContentCode'
|
||||
import { useForceRerender } from '@/composables/useForceRerender'
|
||||
|
||||
const blur = ref(true)
|
||||
const duration = ref(1000)
|
||||
const delay = ref(200)
|
||||
const threshold = ref(0.1)
|
||||
const initialOpacity = ref(0)
|
||||
const easing = ref('ease-out')
|
||||
const { rerenderKey, forceRerender } = useForceRerender()
|
||||
|
||||
const propData = [
|
||||
{ name: 'blur', type: 'boolean', default: 'false', description: 'Enable blur effect during fade animation.' },
|
||||
{ name: 'duration', type: 'number', default: '1000', description: 'Animation duration in milliseconds.' },
|
||||
{ name: 'easing', type: 'string', default: '"ease-out"', description: 'CSS easing function for the animation.' },
|
||||
{ name: 'delay', type: 'number', default: '0', description: 'Delay before animation starts in milliseconds.' },
|
||||
{ name: 'threshold', type: 'number', default: '0.1', description: 'Intersection threshold to trigger animation (0-1).' },
|
||||
{ name: 'initialOpacity', type: 'number', default: '0', description: 'Initial opacity before animation (0-1).' },
|
||||
{ name: 'className', type: 'string', default: '""', description: 'Additional CSS classes for styling.' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-content-demo-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
border: 1px solid #ffffff1c;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.demo-content h4 {
|
||||
color: #fff;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.demo-content p {
|
||||
color: #a1a1aa;
|
||||
text-align: center;
|
||||
max-width: 25ch;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
153
src/demo/Backgrounds/DotGridDemo.vue
Normal file
153
src/demo/Backgrounds/DotGridDemo.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="dot-grid-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 500px; overflow: hidden;">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<DotGrid :key="rerenderKey" :dot-size="dotSize" :gap="gap" :base-color="baseColor" :active-color="activeColor"
|
||||
:proximity="proximity" :speed-trigger="speedTrigger" :shock-radius="shockRadius"
|
||||
:shock-strength="shockStrength" :max-speed="maxSpeed" :resistance="resistance"
|
||||
:return-duration="returnDuration" class-name="dot-grid-demo-canvas" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<div class="color-controls">
|
||||
<div class="color-input">
|
||||
<label>Base Color</label>
|
||||
<input type="color" v-model="baseColor" @change="forceRerender" />
|
||||
</div>
|
||||
<div class="color-input">
|
||||
<label>Active Color</label>
|
||||
<input type="color" v-model="activeColor" @change="forceRerender" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" @update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Proximity" v-model="proximity" :min="50" :max="500" :step="10"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Speed Trigger" v-model="speedTrigger" :min="50" :max="500" :step="10"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Shock Radius" v-model="shockRadius" :min="50" :max="500" :step="10"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Shock Strength" v-model="shockStrength" :min="1" :max="20" :step="1"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Max Speed" v-model="maxSpeed" :min="1000" :max="10000" :step="100"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Resistance (Inertia)" v-model="resistance" :min="100" :max="2000" :step="50"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Return Duration (Inertia)" v-model="returnDuration" :min="0.1" :max="5" :step="0.1"
|
||||
@update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="dotGrid" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="dotGrid.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue'
|
||||
import RefreshButton from '../../components/common/RefreshButton.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 PreviewSlider from '../../components/common/PreviewSlider.vue'
|
||||
import DotGrid from '../../content/Backgrounds/DotGrid/DotGrid.vue'
|
||||
import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode'
|
||||
import { useForceRerender } from '@/composables/useForceRerender'
|
||||
|
||||
const dotSize = ref(5)
|
||||
const gap = ref(15)
|
||||
const baseColor = ref('#333333')
|
||||
const activeColor = ref('#27FF64')
|
||||
const proximity = ref(120)
|
||||
const speedTrigger = ref(100)
|
||||
const shockRadius = ref(250)
|
||||
const shockStrength = ref(5)
|
||||
const maxSpeed = ref(5000)
|
||||
const resistance = ref(750)
|
||||
const returnDuration = ref(1.5)
|
||||
const { rerenderKey, forceRerender } = useForceRerender()
|
||||
|
||||
const propData = [
|
||||
{ name: 'dotSize', type: 'number', default: '16', description: 'Size of each dot in pixels.' },
|
||||
{ name: 'gap', type: 'number', default: '32', description: 'Gap between each dot in pixels.' },
|
||||
{ name: 'baseColor', type: 'string', default: "'#27FF64'", description: 'Base color of the dots.' },
|
||||
{ name: 'activeColor', type: 'string', default: "'#27FF64'", description: 'Color of dots when hovered or activated.' },
|
||||
{ name: 'proximity', type: 'number', default: '150', description: 'Radius around the mouse pointer within which dots react.' },
|
||||
{ name: 'speedTrigger', type: 'number', default: '100', description: 'Mouse speed threshold to trigger inertia effect.' },
|
||||
{ name: 'shockRadius', type: 'number', default: '250', description: 'Radius of the shockwave effect on click.' },
|
||||
{ name: 'shockStrength', type: 'number', default: '5', description: 'Strength of the shockwave effect on click.' },
|
||||
{ name: 'maxSpeed', type: 'number', default: '5000', description: 'Maximum speed for inertia calculation.' },
|
||||
{ name: 'resistance', type: 'number', default: '750', description: 'Resistance for the inertia effect.' },
|
||||
{ name: 'returnDuration', type: 'number', default: '1.5', description: 'Duration for dots to return to their original position after inertia.' },
|
||||
{ name: 'className', type: 'string', default: "''", description: 'Additional CSS classes for the component.' },
|
||||
{ name: 'style', type: 'object', default: '{}', description: 'Inline styles for the component.' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dot-grid-demo-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.color-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.color-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.color-input label {
|
||||
font-size: 0.875rem;
|
||||
color: #a1a1aa;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.color-input input[type="color"] {
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-input input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.color-input input[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
88
src/demo/TextAnimations/SplitTextDemo.vue
Normal file
88
src/demo/TextAnimations/SplitTextDemo.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="split-text-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<SplitText :key="rerenderKey" text="Hello, Vue!" :delay="delay" :duration="duration" :ease="ease"
|
||||
:split-type="splitType" :threshold="threshold" class="split-text-demo-text"
|
||||
@animation-complete="() => { showCallback && showToast() }" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="2" :step="0.1"
|
||||
@update:model-value="forceRerender" />
|
||||
|
||||
<PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1"
|
||||
@update:model-value="forceRerender" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="splitText" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="splitText.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue'
|
||||
import RefreshButton from '../../components/common/RefreshButton.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 PreviewSwitch from '../../components/common/PreviewSwitch.vue'
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue'
|
||||
import SplitText from '../../content/TextAnimations/SplitText/SplitText.vue'
|
||||
import { splitText } from '@/constants/code/TextAnimations/splitTextCode'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import { useForceRerender } from '@/composables/useForceRerender'
|
||||
|
||||
const delay = ref(10)
|
||||
const duration = ref(2)
|
||||
const ease = ref('elastic.out(1, 0.3)')
|
||||
const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars')
|
||||
const threshold = ref(0.1)
|
||||
const showCallback = ref(true)
|
||||
const toast = useToast()
|
||||
const { rerenderKey, forceRerender } = useForceRerender()
|
||||
|
||||
const showToast = () => {
|
||||
toast.add({
|
||||
severity: 'secondary',
|
||||
summary: 'Animation Finished!',
|
||||
life: 3000
|
||||
})
|
||||
}
|
||||
|
||||
const propData = [
|
||||
{ name: 'text', type: 'string', default: '""', description: 'The text content to animate.' },
|
||||
{ name: 'className', type: 'string', default: '""', description: 'Additional class names to style the component.' },
|
||||
{ name: 'delay', type: 'number', default: '100', description: 'Delay between animations for each letter (in ms).' },
|
||||
{ name: 'duration', type: 'number', default: '0.6', description: 'Duration of each letter animation (in seconds).' },
|
||||
{ name: 'ease', type: 'string', default: '"power3.out"', description: 'GSAP easing function for the animation.' },
|
||||
{ name: 'splitType', type: 'string', default: '"chars"', description: 'Split type: "chars", "words", "lines", or "words, chars".' },
|
||||
{ name: 'from', type: 'object', default: '{ opacity: 0, y: 40 }', description: 'Initial GSAP properties for each letter/word.' },
|
||||
{ name: 'to', type: 'object', default: '{ opacity: 1, y: 0 }', description: 'Target GSAP properties for each letter/word.' },
|
||||
{ name: 'threshold', type: 'number', default: '0.1', description: 'Intersection threshold to trigger the animation (0-1).' },
|
||||
{ name: 'rootMargin', type: 'string', default: '"-100px"', description: 'Root margin for the ScrollTrigger.' },
|
||||
{ name: 'textAlign', type: 'string', default: '"center"', description: 'Text alignment: "left", "center", "right", etc.' },
|
||||
{ name: 'onLetterAnimationComplete', type: 'function', default: 'undefined', description: 'Callback function when all animations complete.' }
|
||||
]
|
||||
</script>
|
||||
Reference in New Issue
Block a user