atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/target-cursor

Browse Source
This commit is contained in:
Utkarsh Singhal
2025-07-18 18:24:03 +05:30
committed by GitHub
parent 3b90ac916e 95e4976b78
commit 16b6a530de
28 changed files with 898 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/common/BackgroundContent.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div class="select-none">
<div
class="right-6 bottom-0 z-10 absolute opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out select-none"
>
<PreviewSwitch title="Demo Content" v-model="showContent" />
</div>
<template v-if="showContent">
<div class="top-[2em] left-0 z-0 absolute w-full h-[60px] pointer-events-none">
<div
class="flex justify-between items-center bg-[rgba(255,255,255,0.05)] backdrop-filter backdrop-blur-[10px] mx-auto my-0 px-6 py-4 border border-[rgba(255,255,255,0.2)] rounded-[50px] w-[90%] md:w-[60%] h-full"
:style="{
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
}"
>
<img :src="logo" alt="Vue Bits Logo" class="rounded-[50px] h-[24px]" />
<div class="md:hidden flex items-center text-white">
<i class="pi pi-bars"></i>
</div>
<div class="hidden md:flex items-center gap-6 font-semibold">
<p class="flex items-center text-[14px] text-white">Home</p>
<p class="flex items-center text-[14px] text-white">Docs</p>
</div>
</div>
</div>
<div
class="top-0 left-0 z-1 absolute flex flex-col justify-center items-center w-full h-full pointer-events-none"
>
<div
class="flex justify-center items-center bg-[rgba(255,244,255,0.05)] backdrop-filter backdrop-blur-[10px] px-4 border border-[rgba(255,255,255,0.2)] rounded-[50px] w-auto h-[34px] font-medium text-[12px] text-white md:text-[14px]"
:style="{
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
}"
>
<span class="flex justify-center items-center" v-html="props.pillIcon"></span>
<p class="ml-1">{{ props.pillText }}</p>
</div>
<p
class="mt-4 max-w-[18ch] font-bold text-[clamp(2rem,4vw,2.6rem)] text-white text-center leading-[1.2] tracking-[-2px]"
:style="{
textShadow: '0 0 16px rgba(0, 0, 0, 0.5)'
}"
>
{{ props.headline }}
</p>
<div class="flex items-center gap-4 mt-8">
<button
class="bg-white hover:bg-gray-100 px-6 md:px-10 py-2 md:py-3 border-none rounded-[50px] font-medium text-[12px] text-black md:text-[14px] transition-all hover:translate-y-[-1px] duration-200 ease-in-out cursor-pointer"
>
{{ props.mainCtaText }}
</button>
<button
class="bg-white/5 hover:bg-white/10 shadow-md backdrop-blur-md px-6 md:px-10 py-2 md:py-3 border border-white/20 rounded-full font-medium text-[12px] text-white/50 md:text-[14px] transition-all hover:-translate-y-0.5 duration-200 cursor-pointer"
:style="{
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
}"
>
{{ props.secondCtaText }}
</button>
</div>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import logo from '../../assets/logos/vue-bits-logo.svg';
import PreviewSwitch from './PreviewSwitch.vue';
interface BackgroundContentProps {
pillText?: string;
pillIcon?: string;
headline?: string;
mainCtaText?: string;
secondCtaText?: string;
}
const props = withDefaults(defineProps<BackgroundContentProps>(), {
pillText: 'New Component',
pillIcon: '<i class="pi pi-sliders-h" style="font-size: 10px;"></i>',
headline: 'Explore the depths of creativity',
mainCtaText: 'Get Started',
secondCtaText: 'Learn More'
});
const showContent = ref(true);
</script>

5
src/constants/Categories.ts
View File

@@ -25,7 +25,8 @@ export const CATEGORIES = [
'Scroll Float',
'Scroll Reveal',
'Rotating Text',
'Glitch Text'
'Glitch Text',
'Scroll Velocity'
]
},
{
@@ -47,6 +48,7 @@ export const CATEGORIES = [
'Blob Cursor',
'Meta Balls',
'Image Trail',
'Shape Blur',
'Target Cursor',
]
},
@@ -85,7 +87,6 @@ export const CATEGORIES = [
'Balatro',
'Letter Glitch',
'Particles',
'Shape Blur',
'Waves',
'Squares',
'Iridescence',

3
src/constants/Components.ts
View File

@@ -15,6 +15,7 @@ const animations = {
'blob-cursor': () => import('../demo/Animations/BlobCursorDemo.vue'),
'meta-balls': () => import('../demo/Animations/MetaBallsDemo.vue'),
'image-trail': () => import('../demo/Animations/ImageTrailDemo.vue'),
'shape-blur': () => import('../demo/Animations/ShapeBlurDemo.vue'),
'target-cursor': () => import('../demo/Animations/TargetCursorDemo.vue'),
};
@@ -38,6 +39,7 @@ const textAnimations = {
'scroll-reveal': () => import("../demo/TextAnimations/ScrollRevealDemo.vue"),
'rotating-text': () => import("../demo/TextAnimations/RotatingTextDemo.vue"),
'glitch-text': () => import("../demo/TextAnimations/GlitchTextDemo.vue"),
'scroll-velocity': () => import("../demo/TextAnimations/ScrollVelocityDemo.vue"),
};
const components = {
@@ -75,7 +77,6 @@ const backgrounds = {
'beams': () => import('../demo/Backgrounds/BeamsDemo.vue'),
'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo.vue'),
'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue'),
'shape-blur': () => import('../demo/Backgrounds/ShapeBlurDemo.vue'),
'balatro': () => import('../demo/Backgrounds/BalatroDemo.vue'),
'orb': () => import('../demo/Backgrounds/OrbDemo.vue'),
'ballpit': () => import('../demo/Backgrounds/BallpitDemo.vue'),

4
src/constants/code/Backgrounds/shapeBlurCode.ts → src/constants/code/Animations/shapeBlurCode.ts
View File

@@ -1,8 +1,8 @@
import code from '@content/Backgrounds/ShapeBlur/ShapeBlur.vue?raw';
import code from '@/content/Animations/ShapeBlur/ShapeBlur.vue?raw';
import type { CodeObject } from '../../../types/code';
export const shapeBlur: CodeObject = {
cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/ShapeBlur`,
cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/ShapeBlur`,
installation: `npm install three @types/three`,
usage: `<template>
<ShapeBlur

24
src/constants/code/TextAnimations/scrollVelocityCode.ts Normal file
View File

@@ -0,0 +1,24 @@
import code from '@content/TextAnimations/ScrollVelocity/ScrollVelocity.vue?raw';
import type { CodeObject } from '../../../types/code';
export const scrollVelocity: CodeObject = {
cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollVelocity`,
installation: `npm install gsap`,
usage: `<template>
<ScrollVelocity
:texts="['Vue Bits', 'Scroll Down']"
:velocity="100"
:damping="50"
:stiffness="400"
:velocity-mapping="{ input: [0, 1000], output: [0, 5] }"
class-name="custom-scroll-text"
parallax-class-name="custom-parallax"
scroller-class-name="custom-scroller"
/>
</template>
<script setup lang="ts">
import ScrollVelocity from "./ScrollVelocity.vue";
</script>`,
code
};

0
src/content/Backgrounds/ShapeBlur/ShapeBlur.vue → src/content/Animations/ShapeBlur/ShapeBlur.vue
View File

236
src/content/TextAnimations/ScrollVelocity/ScrollVelocity.vue Normal file
View File

@@ -0,0 +1,236 @@
<template>
<section>
<div
v-for="(text, index) in texts"
:key="index"
ref="containerRef"
:class="`${parallaxClassName} relative overflow-hidden`"
:style="parallaxStyle"
>
<div
ref="scrollerRef"
:class="`${scrollerClassName} flex whitespace-nowrap text-center font-sans text-4xl font-bold tracking-[-0.02em] drop-shadow md:text-[5rem] md:leading-[5rem]`"
:style="{ transform: `translateX(${scrollTransforms[index] || '0px'})`, ...scrollerStyle }"
>
<span
v-for="spanIndex in calculatedCopies[index] || 15"
:key="spanIndex"
:class="`flex-shrink-0 ${className}`"
:ref="spanIndex === 1 ? el => setCopyRef(el, index) : undefined"
>
{{ text }}&nbsp;
</span>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick, type ComponentPublicInstance } from 'vue';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
interface VelocityMapping {
input: [number, number];
output: [number, number];
}
interface ScrollVelocityProps {
scrollContainerRef?: HTMLElement | null;
texts?: string[];
velocity?: number;
className?: string;
damping?: number;
stiffness?: number;
velocityMapping?: VelocityMapping;
parallaxClassName?: string;
scrollerClassName?: string;
parallaxStyle?: Record<string, string | number>;
scrollerStyle?: Record<string, string | number>;
}
const props = withDefaults(defineProps<ScrollVelocityProps>(), {
texts: () => [],
velocity: 100,
className: '',
damping: 50,
stiffness: 400,
velocityMapping: () => ({ input: [0, 1000], output: [0, 5] }),
parallaxClassName: '',
scrollerClassName: '',
parallaxStyle: () => ({}),
scrollerStyle: () => ({})
});
const containerRef = ref<HTMLDivElement[]>([]);
const scrollerRef = ref<HTMLDivElement[]>([]);
const copyRefs = ref<HTMLSpanElement[]>([]);
const baseX = ref<number[]>([]);
const scrollVelocity = ref(0);
const smoothVelocity = ref(0);
const velocityFactor = ref(0);
const copyWidths = ref<number[]>([]);
const directionFactors = ref<number[]>([]);
const calculatedCopies = ref<number[]>([]);
let rafId: number | null = null;
let scrollTriggerInstance: ScrollTrigger | null = null;
let lastScrollY = 0;
let lastTime = 0;
let resizeTimeout: number | null = null;
const setCopyRef = (el: Element | ComponentPublicInstance | null, index: number) => {
if (el && el instanceof HTMLSpanElement) {
copyRefs.value[index] = el;
}
};
const updateWidths = () => {
props.texts.forEach((_, index) => {
if (copyRefs.value[index] && containerRef.value[index]) {
const singleCopyWidth = copyRefs.value[index].offsetWidth;
const containerWidth = containerRef.value[index].offsetWidth;
const viewportWidth = window.innerWidth;
const effectiveWidth = Math.max(containerWidth, viewportWidth);
const minCopies = Math.ceil((effectiveWidth * 2.5) / singleCopyWidth);
const optimalCopies = Math.max(minCopies, 8);
copyWidths.value[index] = singleCopyWidth;
calculatedCopies.value[index] = optimalCopies;
}
});
};
const debouncedUpdateWidths = () => {
if (resizeTimeout) {
clearTimeout(resizeTimeout);
}
resizeTimeout = window.setTimeout(() => {
updateWidths();
resizeTimeout = null;
}, 150);
};
const wrap = (min: number, max: number, v: number): number => {
const range = max - min;
if (range === 0) return min;
const mod = (((v - min) % range) + range) % range;
return mod + min;
};
const scrollTransforms = computed(() => {
return props.texts.map((_, index) => {
const singleWidth = copyWidths.value[index];
if (singleWidth === 0) return '0px';
return `${wrap(-singleWidth, 0, baseX.value[index] || 0)}px`;
});
});
const updateSmoothVelocity = () => {
const dampingFactor = props.damping / 1000;
const stiffnessFactor = props.stiffness / 1000;
const velocityDiff = scrollVelocity.value - smoothVelocity.value;
smoothVelocity.value += velocityDiff * stiffnessFactor;
smoothVelocity.value *= 1 - dampingFactor;
};
const updateVelocityFactor = () => {
const { input, output } = props.velocityMapping;
const inputRange = input[1] - input[0];
const outputRange = output[1] - output[0];
let normalizedVelocity = (Math.abs(smoothVelocity.value) - input[0]) / inputRange;
normalizedVelocity = Math.max(0, Math.min(1, normalizedVelocity));
velocityFactor.value = output[0] + normalizedVelocity * outputRange;
if (smoothVelocity.value < 0) velocityFactor.value *= -1;
};
const animate = (currentTime: number) => {
if (lastTime === 0) lastTime = currentTime;
const delta = currentTime - lastTime;
lastTime = currentTime;
updateSmoothVelocity();
updateVelocityFactor();
props.texts.forEach((_, index) => {
const baseVelocity = index % 2 !== 0 ? -props.velocity : props.velocity;
let moveBy = directionFactors.value[index] * baseVelocity * (delta / 1000);
if (velocityFactor.value < 0) {
directionFactors.value[index] = -1;
} else if (velocityFactor.value > 0) {
directionFactors.value[index] = 1;
}
moveBy += directionFactors.value[index] * moveBy * velocityFactor.value;
baseX.value[index] = (baseX.value[index] || 0) + moveBy;
});
rafId = requestAnimationFrame(animate);
};
const updateScrollVelocity = () => {
const container = props.scrollContainerRef || window;
const currentScrollY = container === window ? window.scrollY : (container as HTMLElement).scrollTop;
const currentTime = performance.now();
const timeDelta = currentTime - lastTime;
if (timeDelta > 0) {
const scrollDelta = currentScrollY - lastScrollY;
scrollVelocity.value = (scrollDelta / timeDelta) * 1000;
}
lastScrollY = currentScrollY;
};
onMounted(async () => {
await nextTick();
baseX.value = new Array(props.texts.length).fill(0);
copyWidths.value = new Array(props.texts.length).fill(0);
calculatedCopies.value = new Array(props.texts.length).fill(15);
directionFactors.value = new Array(props.texts.length).fill(1);
setTimeout(() => {
updateWidths();
}, 100);
updateWidths();
if (containerRef.value && containerRef.value.length > 0) {
scrollTriggerInstance = ScrollTrigger.create({
trigger: containerRef.value[0],
start: 'top bottom',
end: 'bottom top',
onUpdate: updateScrollVelocity,
...(props.scrollContainerRef && { scroller: props.scrollContainerRef })
});
}
rafId = requestAnimationFrame(animate);
window.addEventListener('resize', debouncedUpdateWidths, { passive: true });
});
onUnmounted(() => {
if (rafId) {
cancelAnimationFrame(rafId);
}
if (scrollTriggerInstance) {
scrollTriggerInstance.kill();
}
if (resizeTimeout) {
clearTimeout(resizeTimeout);
}
window.removeEventListener('resize', debouncedUpdateWidths);
});
</script>

4
src/demo/Backgrounds/ShapeBlurDemo.vue → src/demo/Animations/ShapeBlurDemo.vue
View File

@@ -53,8 +53,8 @@ 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 ShapeBlur from '../../content/Backgrounds/ShapeBlur/ShapeBlur.vue';
import { shapeBlur } from '@/constants/code/Backgrounds/shapeBlurCode';
import ShapeBlur from '../../content/Animations/ShapeBlur/ShapeBlur.vue';
import { shapeBlur } from '@/constants/code/Animations/shapeBlurCode';
const pixelRatioProp = ref(window.devicePixelRatio || 1);
const shapeSize = ref(1.0);

91
src/demo/Backgrounds/AuroraDemo.vue
View File

@@ -1,65 +1,65 @@
<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"
<TabbedLayout>
<template #preview>
<div class="h-[600px] overflow-hidden demo-container">
<Aurora
:color-stops="colorStops"
:amplitude="amplitude"
:blend="blend"
:speed="speed"
:intensity="intensity"
class="w-full"
/>
<BackgroundContent pillText="New Background" headline="Bring the Arctic to you, with one line of code" />
</div>
<Customize>
<div class="flex gap-2">
<PreviewColor
v-for="(_, index) in colorStops"
:key="index"
:title="`Color ${index + 1}`"
v-model="colorStops[index]"
/>
</div>
<Customize>
<div class="flex gap-2">
<PreviewColor
v-for="(_, index) in colorStops"
:key="index"
:title="`Color ${index + 1}`"
v-model="colorStops[index]"
/>
</div>
<PreviewSlider title="Amplitude" v-model="amplitude" :min="0" :max="2" :step="0.1" />
<PreviewSlider title="Amplitude" v-model="amplitude" :min="0" :max="2" :step="0.1" />
<PreviewSlider title="Blend" v-model="blend" :min="0" :max="1" :step="0.1" />
<PreviewSlider title="Blend" v-model="blend" :min="0" :max="1" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="3" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="3" :step="0.1" />
<PreviewSlider title="Intensity" v-model="intensity" :min="0" :max="2" :step="0.1" />
</Customize>
<PreviewSlider title="Intensity" v-model="intensity" :min="0" :max="2" :step="0.1" />
</Customize>
<PropTable :data="propData" />
<PropTable :data="propData" />
<Dependencies :dependency-list="['ogl']" />
</template>
<Dependencies :dependency-list="['ogl']" />
</template>
<template #code>
<CodeExample :code-object="aurora" />
</template>
<template #code>
<CodeExample :code-object="aurora" />
</template>
<template #cli>
<CliInstallation :command="aurora.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="aurora.cli" />
</template>
</TabbedLayout>
</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';
import Aurora from '@/content/Backgrounds/Aurora/Aurora.vue';
import { ref } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
const colorStops = ref(['#171D22', '#7cff67', '#171D22']);
const amplitude = ref(1.0);
@@ -101,7 +101,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
}
</style>

7
src/demo/Backgrounds/BalatroDemo.vue
View File

@@ -1,7 +1,7 @@
<template>
<TabbedLayout>
<template #preview>
<div class="demo-container">
<div class="h-[600px] overflow-hidden demo-container">
<Balatro
:is-rotate="rotate"
:mouse-interaction="mouseInteractionEnabled"
@@ -9,7 +9,7 @@
:color1="colorStops[0]"
:color2="colorStops[1]"
:color3="colorStops[2]"
class="h-full w-full"
class="w-full h-full"
/>
</div>
@@ -147,9 +147,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
z-index: 1;
height: 500px;
}
</style>

7
src/demo/Backgrounds/BallpitDemo.vue
View File

@@ -1,9 +1,8 @@
<template>
<TabbedLayout>
<template #preview>
<div class="relative p-0 h-[500px] overflow-hidden demo-container">
<div class="relative p-0 h-[600px] overflow-hidden demo-container">
<RefreshButton @click="forceRerender" />
<p class="z-0 absolute font-black text-[#222] text-[140px]">Balls.</p>
<Ballpit
className="relative"
:key="key"
@@ -14,6 +13,7 @@
:followCursor="followCursor"
:colors="colors"
/>
<BackgroundContent pillText="New Background" headline="Balls! What's not to like about them?" />
</div>
<Customize>
@@ -48,6 +48,7 @@ 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 BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
@@ -60,7 +61,7 @@ import Ballpit from '../../content/Backgrounds/Ballpit/Ballpit.vue';
const { rerenderKey: key, forceRerender } = useForceRerender();
const count = ref(100);
const gravity = ref(0.5);
const gravity = ref(0.01);
const friction = ref(0.9975);
const wallBounce = ref(0.95);
const followCursor = ref(false);

84
src/demo/Backgrounds/BeamsDemo.vue
View File

@@ -1,66 +1,66 @@
<template>
<div class="beams-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container">
<Beams
:beam-width="beamWidth"
:beam-height="beamHeight"
:beam-number="beamNumber"
:light-color="lightColor"
:speed="speed"
:noise-intensity="noiseIntensity"
:scale="scale"
:rotation="rotation"
/>
</div>
<TabbedLayout>
<template #preview>
<div class="h-[600px] overflow-hidden demo-container">
<Beams
:beam-width="beamWidth"
:beam-height="beamHeight"
:beam-number="beamNumber"
:light-color="lightColor"
:speed="speed"
:noise-intensity="noiseIntensity"
:scale="scale"
:rotation="rotation"
/>
<BackgroundContent pillText="New Background" headline="Radiant beams for creative user interfaces" />
</div>
<Customize>
<PreviewColor title="Color" v-model="lightColor" />
<Customize>
<PreviewColor title="Color" v-model="lightColor" />
<PreviewSlider title="Beam Width" v-model="beamWidth" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider title="Beam Width" v-model="beamWidth" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider title="Beam Height" v-model="beamHeight" :min="1" :max="25" :step="1" />
<PreviewSlider title="Beam Height" v-model="beamHeight" :min="1" :max="25" :step="1" />
<PreviewSlider title="Beam Count" v-model="beamNumber" :min="1" :max="50" :step="1" />
<PreviewSlider title="Beam Count" v-model="beamNumber" :min="1" :max="50" :step="1" />
<PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="5" :step="0.05" />
<PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="5" :step="0.05" />
<PreviewSlider title="Noise Scale" v-model="scale" :min="0.01" :max="1" :step="0.01" />
<PreviewSlider title="Noise Scale" v-model="scale" :min="0.01" :max="1" :step="0.01" />
<PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" />
</Customize>
<PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" />
</Customize>
<PropTable :data="propData" />
<PropTable :data="propData" />
<Dependencies :dependency-list="['three']" />
</template>
<Dependencies :dependency-list="['three']" />
</template>
<template #code>
<CodeExample :code-object="beams" />
</template>
<template #code>
<CodeExample :code-object="beams" />
</template>
<template #cli>
<CliInstallation :command="beams.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="beams.cli" />
</template>
</TabbedLayout>
</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 Dependencies from '@/components/code/Dependencies.vue';
import Customize from '@/components/common/Customize.vue';
import Beams from '@/content/Backgrounds/Beams/Beams.vue';
import PreviewColor from '@/components/common/PreviewColor.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import PropTable from '@/components/common/PropTable.vue';
import TabbedLayout from '@/components/common/TabbedLayout.vue';
import { beams } from '@/constants/code/Backgrounds/beamsCode';
import Beams from '@/content/Backgrounds/Beams/Beams.vue';
import { ref } from 'vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
const beamWidth = ref(3);
const beamHeight = ref(30);
@@ -125,8 +125,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
height: 500px;
}
</style>

112
src/demo/Backgrounds/DotGridDemo.vue
View File

@@ -1,80 +1,80 @@
<template>
<div class="dot-grid-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container" style="height: 500px; overflow: hidden">
<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"
/>
<TabbedLayout>
<template #preview>
<div class="h-[600px] overflow-hidden demo-container">
<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"
/>
<BackgroundContent pillText="New Background" headline="Organized chaos with every cursor movement!" />
</div>
<Customize>
<div class="flex gap-4 mb-4">
<PreviewColor title="Base Color" v-model="baseColor" />
<PreviewColor title="Active Color" v-model="activeColor" />
</div>
<Customize>
<div class="color-controls">
<PreviewColor title="Base Color" v-model="baseColor" />
<PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1" />
<PreviewColor title="Active Color" v-model="activeColor" />
</div>
<PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" />
<PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1" />
<PreviewSlider title="Proximity" v-model="proximity" :min="50" :max="500" :step="10" />
<PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" />
<PreviewSlider title="Speed Trigger" v-model="speedTrigger" :min="50" :max="500" :step="10" />
<PreviewSlider title="Proximity" v-model="proximity" :min="50" :max="500" :step="10" />
<PreviewSlider title="Shock Radius" v-model="shockRadius" :min="50" :max="500" :step="10" />
<PreviewSlider title="Speed Trigger" v-model="speedTrigger" :min="50" :max="500" :step="10" />
<PreviewSlider title="Shock Strength" v-model="shockStrength" :min="1" :max="20" :step="1" />
<PreviewSlider title="Shock Radius" v-model="shockRadius" :min="50" :max="500" :step="10" />
<PreviewSlider title="Max Speed" v-model="maxSpeed" :min="1000" :max="10000" :step="100" />
<PreviewSlider title="Shock Strength" v-model="shockStrength" :min="1" :max="20" :step="1" />
<PreviewSlider title="Resistance (Inertia)" v-model="resistance" :min="100" :max="2000" :step="50" />
<PreviewSlider title="Max Speed" v-model="maxSpeed" :min="1000" :max="10000" :step="100" />
<PreviewSlider title="Return Duration (Inertia)" v-model="returnDuration" :min="0.1" :max="5" :step="0.1" />
</Customize>
<PreviewSlider title="Resistance (Inertia)" v-model="resistance" :min="100" :max="2000" :step="50" />
<PropTable :data="propData" />
<PreviewSlider title="Return Duration (Inertia)" v-model="returnDuration" :min="0.1" :max="5" :step="0.1" />
</Customize>
<Dependencies :dependency-list="['gsap']" />
</template>
<PropTable :data="propData" />
<template #code>
<CodeExample :code-object="dotGrid" />
</template>
<Dependencies :dependency-list="['gsap']" />
</template>
<template #code>
<CodeExample :code-object="dotGrid" />
</template>
<template #cli>
<CliInstallation :command="dotGrid.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="dotGrid.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts">
import { useForceRerender } from '@/composables/useForceRerender';
import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode';
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 Dependencies from '../../components/code/Dependencies.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewColor from '../../components/common/PreviewColor.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.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);
@@ -131,10 +131,4 @@ const propData = [
width: 100%;
height: 100%;
}
.color-controls {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
</style>

7
src/demo/Backgrounds/GridDistortionDemo.vue
View File

@@ -4,16 +4,14 @@
<div class="relative p-0 h-[600px] overflow-hidden demo-container" ref="containerRef">
<GridDistortion
:key="key"
imageSrc="https://picsum.photos/1920/1080?grayscale"
imageSrc="https://picsum.photos/1920/1080"
:grid="grid"
:mouse="mouse"
:strength="0.15"
:relaxation="0.9"
className="grid-distortion"
/>
<p class="absolute font-black text-8xl text-center pointer-events-none select-none mix-blend-difference">
Distortion.
</p>
<BackgroundContent pillText="New Background" headline="Don't just sit there, move your cursor!" />
</div>
<Customize>
@@ -48,6 +46,7 @@ import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { gridDistortion } from '../../constants/code/Backgrounds/gridDistortionCode';
import GridDistortion from '../../content/Backgrounds/GridDistortion/GridDistortion.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
const { rerenderKey: key, forceRerender } = useForceRerender();

3
src/demo/Backgrounds/GridMotionDemo.vue
View File

@@ -1,7 +1,7 @@
<template>
<TabbedLayout>
<template #preview>
<div class="demo-container h-[600px]">
<div class="h-[600px] overflow-hidden demo-container">
<GridMotion :items="images" />
</div>
@@ -53,6 +53,5 @@ const images = Array.from({ length: numberOfImages }, () => imageUrl);
<style scoped>
.demo-container {
padding: 0;
overflow: hidden;
}
</style>

70
src/demo/Backgrounds/HyperspeedDemo.vue
View File

@@ -1,44 +1,43 @@
<template>
<div class="hyperspeed-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container">
<div class="instruction-text">Click & Hold</div>
<Hyperspeed :effect-options="currentPreset" />
</div>
<TabbedLayout>
<template #preview>
<div class="h-[600px] overflow-hidden cursor-pointer demo-container">
<Hyperspeed :effect-options="currentPreset" />
<BackgroundContent pillText="New Background" headline="Cick & hold to see the real magic of hyperspeed!" />
</div>
<Customize>
<PreviewSelect title="Animation Preset" :options="options" v-model="activePreset" />
</Customize>
<Customize>
<PreviewSelect title="Animation Preset" :options="options" v-model="activePreset" />
</Customize>
<PropTable :data="propData" />
<PropTable :data="propData" />
<Dependencies :dependency-list="['three', 'postprocessing']" />
</template>
<Dependencies :dependency-list="['three', 'postprocessing']" />
</template>
<template #code>
<CodeExample :code-object="hyperspeed" />
</template>
<template #code>
<CodeExample :code-object="hyperspeed" />
</template>
<template #cli>
<CliInstallation :command="hyperspeed.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="hyperspeed.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import { hyperspeed } from '@/constants/code/Backgrounds/hyperspeedCode';
import { computed, ref } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSelect from '../../components/common/PreviewSelect.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import Hyperspeed from '../../content/Backgrounds/Hyperspeed/Hyperspeed.vue';
import { hyperspeedPresets } from '../../content/Backgrounds/Hyperspeed/HyperspeedPresets';
import { hyperspeed } from '@/constants/code/Backgrounds/hyperspeedCode';
const activePreset = ref<string>('one');
@@ -67,26 +66,7 @@ const options = [
</script>
<style scoped>
.hyperspeed-demo {
width: 100%;
}
.demo-container {
height: 600px;
overflow: hidden;
cursor: pointer;
padding: 0;
}
.instruction-text {
position: absolute;
top: 1.5rem;
left: 50%;
transform: translateX(-50%);
font-weight: 900;
font-size: 4rem;
color: #222;
z-index: 10;
pointer-events: none;
}
</style>

19
src/demo/Backgrounds/IridescenceDemo.vue
View File

@@ -1,8 +1,9 @@
<template>
<TabbedLayout>
<template #preview>
<div class="relative demo-container h-[500px] p-0 overflow-hidden">
<div class="relative p-0 h-[600px] overflow-hidden demo-container">
<Iridescence :key="key" :speed="speed" :color="colors" :mouseReact="mouseInteraction" :amplitude="amplitude" />
<BackgroundContent pillText="New Background" headline="Radiant iridescence with customizable colors" />
</div>
<Customize>
@@ -36,19 +37,20 @@
<script setup lang="ts">
import { ref } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import PropTable from '../../components/common/PropTable.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import Iridescence from '../../content/Backgrounds/Iridescence/Iridescence.vue';
import { iridescence } from '../../constants/code/Backgrounds/iridescenceCode';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { useForceRerender } from '../../composables/useForceRerender';
import { iridescence } from '../../constants/code/Backgrounds/iridescenceCode';
import Iridescence from '../../content/Backgrounds/Iridescence/Iridescence.vue';
const colors = ref<[number, number, number]>([1, 1, 1]);
const colors = ref<[number, number, number]>([0.5, 0.6, 0.8]);
const speed = ref(1);
const amplitude = ref(0.1);
const mouseInteraction = ref(true);
@@ -85,7 +87,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
}
</style>

93
src/demo/Backgrounds/LetterGlitchDemo.vue
View File

@@ -1,65 +1,65 @@
<template>
<div class="letter-glitch-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container">
<LetterGlitch
:key="rerenderKey"
:glitch-colors="colors"
:glitch-speed="speed"
:center-vignette="showCenterVignette"
:outer-vignette="showOuterVignette"
:smooth="smooth"
class="w-full h-full"
/>
</div>
<TabbedLayout>
<template #preview>
<div class="h-[600px] overflow-hidden demo-container">
<LetterGlitch
:key="rerenderKey"
:glitch-colors="colors"
:glitch-speed="speed"
:center-vignette="showCenterVignette"
:outer-vignette="showOuterVignette"
:smooth="smooth"
class="w-full h-full"
/>
<BackgroundContent pillText="New Background" headline="Am I finally a real hacker now, mom?" />
</div>
<Customize>
<button
@click="randomizeColors"
class="px-3 py-2 text-xs bg-[#111] hover:bg-[#222] text-white rounded-lg border border-[#333] transition-colors"
>
Randomize Colors
</button>
<Customize>
<button
@click="randomizeColors"
class="bg-[#111] hover:bg-[#222] px-3 py-2 border border-[#333] rounded-lg text-white text-xs transition-colors"
>
Randomize Colors
</button>
<PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" />
<PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" />
<PreviewSwitch title="Smooth Animation" v-model="smooth" />
<PreviewSwitch title="Smooth Animation" v-model="smooth" />
<PreviewSwitch title="Show Center Vignette" v-model="showCenterVignette" />
<PreviewSwitch title="Show Center Vignette" v-model="showCenterVignette" />
<PreviewSwitch title="Show Outer Vignette" v-model="showOuterVignette" />
</Customize>
<PreviewSwitch title="Show Outer Vignette" v-model="showOuterVignette" />
</Customize>
<PropTable :data="propData" />
<PropTable :data="propData" />
<Dependencies :dependency-list="[]" />
</template>
<Dependencies :dependency-list="[]" />
</template>
<template #code>
<CodeExample :code-object="letterGlitch" />
</template>
<template #code>
<CodeExample :code-object="letterGlitch" />
</template>
<template #cli>
<CliInstallation :command="letterGlitch.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="letterGlitch.cli" />
</template>
</TabbedLayout>
</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 LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
import { letterGlitch } from '@/constants/code/Backgrounds/letterGlitchCode';
import { useForceRerender } from '@/composables/useForceRerender';
import { letterGlitch } from '@/constants/code/Backgrounds/letterGlitchCode';
import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue';
import { ref } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
const smooth = ref(true);
const speed = ref(10);
@@ -119,7 +119,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
}
</style>

79
src/demo/Backgrounds/LightningDemo.vue
View File

@@ -1,57 +1,57 @@
<template>
<div class="lightning-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container">
<Lightning
:hue="hue"
:x-offset="xOffset"
:speed="speed"
:intensity="intensity"
:size="size"
class="w-full h-full"
/>
</div>
<TabbedLayout>
<template #preview>
<div class="h-[600px] overflow-hidden demo-container">
<Lightning
:hue="hue"
:x-offset="xOffset"
:speed="speed"
:intensity="intensity"
:size="size"
class="w-full h-full"
/>
<BackgroundContent pillText="New Background" headline="The power of nature's fury, with React Bits!" />
</div>
<Customize>
<PreviewSlider title="Hue" v-model="hue" :min="0" :max="360" :step="1" />
<Customize>
<PreviewSlider title="Hue" v-model="hue" :min="0" :max="360" :step="1" />
<PreviewSlider title="X Offset" v-model="xOffset" :min="-2" :max="2" :step="0.1" />
<PreviewSlider title="X Offset" v-model="xOffset" :min="-2" :max="2" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="2" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="2" :step="0.1" />
<PreviewSlider title="Intensity" v-model="intensity" :min="0.1" :max="2" :step="0.1" />
<PreviewSlider title="Intensity" v-model="intensity" :min="0.1" :max="2" :step="0.1" />
<PreviewSlider title="Size" v-model="size" :min="0.1" :max="3" :step="0.1" />
</Customize>
<PreviewSlider title="Size" v-model="size" :min="0.1" :max="3" :step="0.1" />
</Customize>
<PropTable :data="propData" />
<PropTable :data="propData" />
<Dependencies :dependency-list="[]" />
</template>
<Dependencies :dependency-list="[]" />
</template>
<template #code>
<CodeExample :code-object="lightning" />
</template>
<template #code>
<CodeExample :code-object="lightning" />
</template>
<template #cli>
<CliInstallation :command="lightning.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="lightning.cli" />
</template>
</TabbedLayout>
</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 Lightning from '@/content/Backgrounds/Lightning/Lightning.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import { lightning } from '@/constants/code/Backgrounds/lightningCode';
import Lightning from '@/content/Backgrounds/Lightning/Lightning.vue';
import { ref } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
const hue = ref(160);
const xOffset = ref(0);
@@ -75,7 +75,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
}
</style>

4
src/demo/Backgrounds/LiquidChromeDemo.vue
View File

@@ -1,8 +1,9 @@
<template>
<TabbedLayout>
<template #preview>
<div class="relative p-0 h-[500px] overflow-hidden demo-container">
<div class="relative p-0 h-[600px] overflow-hidden demo-container">
<LiquidChrome :baseColor="baseColor" :speed="speed" :amplitude="amplitude" :interactive="interactive" />
<BackgroundContent pill-text="New Background" headline="Swirl around in the deep sea of liquid chrome!" />
</div>
<Customize>
@@ -39,6 +40,7 @@ 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 BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';

7
src/demo/Backgrounds/OrbDemo.vue
View File

@@ -1,14 +1,14 @@
<template>
<TabbedLayout>
<template #preview>
<div class="relative p-0 h-[500px] overflow-hidden demo-container">
<div class="relative p-0 h-[600px] overflow-hidden demo-container">
<Orb
:hue="debouncedHue"
:hoverIntensity="debouncedHoverIntensity"
:rotateOnHover="rotateOnHover"
:forceHoverState="forceHoverState"
/>
<p class="z-0 absolute mb-0 font-black text-[clamp(2rem,2vw,6rem)] mix-blend-difference">Hover.</p>
<BackgroundContent pill-text="New Background" headline="This orb is hiding something, try hovering!" />
</div>
<Customize>
@@ -40,6 +40,7 @@ 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 BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
@@ -49,7 +50,7 @@ import { orb } from '../../constants/code/Backgrounds/orbCode';
import Orb from '../../content/Backgrounds/Orb/Orb.vue';
const hue = ref(100);
const hoverIntensity = ref(0.5);
const hoverIntensity = ref(2);
const rotateOnHover = ref(true);
const forceHoverState = ref(false);

81
src/demo/Backgrounds/ParticlesDemo.vue
View File

@@ -1,56 +1,55 @@
<template>
<div class="particles-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container">
<Particles
:key="rerenderKey"
:particle-colors="[color]"
:particle-count="particleCount"
:particle-spread="particleSpread"
:speed="speed"
:particle-base-size="baseSize"
:move-particles-on-hover="moveParticlesOnHover"
:alpha-particles="alphaParticles"
:disable-rotation="disableRotation"
class="w-full h-full"
/>
<TabbedLayout>
<template #preview>
<div class="h-[600px] overflow-hidden demo-container">
<Particles
:key="rerenderKey"
:particle-colors="[color]"
:particle-count="particleCount"
:particle-spread="particleSpread"
:speed="speed"
:particle-base-size="baseSize"
:move-particles-on-hover="moveParticlesOnHover"
:alpha-particles="alphaParticles"
:disable-rotation="disableRotation"
class="w-full h-full"
/>
<BackgroundContent pillText="New Background" headline="Particles that mimick the dance of the cosmos" />
</div>
<Customize>
<div class="flex items-center gap-4">
<PreviewColor title="Color" v-model="color" />
</div>
<Customize>
<div class="flex gap-4 items-center">
<PreviewColor title="Color" v-model="color" />
</div>
<PreviewSlider title="Count" v-model="particleCount" :min="100" :max="1000" :step="100" />
<PreviewSlider title="Count" v-model="particleCount" :min="100" :max="1000" :step="100" />
<PreviewSlider title="Spread" v-model="particleSpread" :min="10" :max="100" :step="10" />
<PreviewSlider title="Spread" v-model="particleSpread" :min="10" :max="100" :step="10" />
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="2" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="2" :step="0.1" />
<PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
<PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
<PreviewSwitch title="Mouse Interaction" v-model="moveParticlesOnHover" />
<PreviewSwitch title="Mouse Interaction" v-model="moveParticlesOnHover" />
<PreviewSwitch title="Particle Transparency" v-model="alphaParticles" />
<PreviewSwitch title="Particle Transparency" v-model="alphaParticles" />
<PreviewSwitch title="Disable Rotation" v-model="disableRotation" />
</Customize>
<PreviewSwitch title="Disable Rotation" v-model="disableRotation" />
</Customize>
<PropTable :data="propData" />
<PropTable :data="propData" />
<Dependencies :dependency-list="['ogl']" />
</template>
<Dependencies :dependency-list="['ogl']" />
</template>
<template #code>
<CodeExample :code-object="particles" />
</template>
<template #code>
<CodeExample :code-object="particles" />
</template>
<template #cli>
<CliInstallation :command="particles.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="particles.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts">
@@ -62,6 +61,7 @@ import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Customize from '../../components/common/Customize.vue';
import Particles from '@/content/Backgrounds/Particles/Particles.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
import PreviewColor from '@/components/common/PreviewColor.vue';
@@ -136,7 +136,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
}
</style>

79
src/demo/Backgrounds/SilkDemo.vue
View File

@@ -1,58 +1,58 @@
<template>
<div class="silk-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container">
<Silk
:speed="speed"
:scale="scale"
:color="color"
:noise-intensity="noiseIntensity"
:rotation="rotation"
class="w-full h-full"
/>
</div>
<TabbedLayout>
<template #preview>
<div class="relative h-[600px] overflow-hidden demo-container">
<Silk
:speed="speed"
:scale="scale"
:color="color"
:noise-intensity="noiseIntensity"
:rotation="rotation"
class="w-full h-full"
/>
<BackgroundContent pillText="New Background" headline="Silk touch is a good enhancement, Steve!" />
</div>
<Customize>
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1" />
<Customize>
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1" />
<PreviewSlider title="Scale" v-model="scale" :min="0.1" :max="3" :step="0.1" />
<PreviewSlider title="Scale" v-model="scale" :min="0.1" :max="3" :step="0.1" />
<PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="3" :step="0.1" />
<PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="3" :step="0.1" />
<PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="6.28" :step="0.1" />
<PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="6.28" :step="0.1" />
<PreviewColor title="Color" v-model="color" />
</Customize>
<PreviewColor title="Color" v-model="color" />
</Customize>
<PropTable :data="propData" />
<PropTable :data="propData" />
<Dependencies :dependency-list="['ogl']" />
</template>
<Dependencies :dependency-list="['ogl']" />
</template>
<template #code>
<CodeExample :code-object="silk" />
</template>
<template #code>
<CodeExample :code-object="silk" />
</template>
<template #cli>
<CliInstallation :command="silk.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="silk.cli" />
</template>
</TabbedLayout>
</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 Silk from '@/content/Backgrounds/Silk/Silk.vue';
import PreviewColor from '@/components/common/PreviewColor.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import { silk } from '@/constants/code/Backgrounds/silkCode';
import Silk from '@/content/Backgrounds/Silk/Silk.vue';
import { ref } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
const speed = ref(5);
const scale = ref(1);
@@ -73,7 +73,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
}
</style>

23
src/demo/Backgrounds/SquaresDemo.vue
View File

@@ -1,8 +1,8 @@
<template>
<TabbedLayout>
<template #preview>
<div class="relative min-h-[200px] demo-container overflow-hidden p-0">
<div class="w-full h-[500px] overflow-hidden">
<div class="relative p-0 min-h-[200px] overflow-hidden demo-container">
<div class="w-full h-[600px] overflow-hidden">
<Squares
:squareSize="size"
:speed="speed"
@@ -10,12 +10,13 @@
:borderColor="borderColor"
:hoverFillColor="hoverColor"
/>
<BackgroundContent pillText="New Background" headline="Customizable squares moving around smoothly" />
</div>
</div>
<Customize>
<div class="flex items-center mb-6">
<span class="text-sm mr-2">Direction</span>
<span class="mr-2 text-sm">Direction</span>
<div class="flex">
<button
@@ -59,15 +60,16 @@
<script setup lang="ts">
import { ref } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewColor from '../../components/common/PreviewColor.vue';
import PropTable from '../../components/common/PropTable.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import Squares from '../../content/Backgrounds/Squares/Squares.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewColor from '../../components/common/PreviewColor.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { squares } from '../../constants/code/Backgrounds/squaresCode';
import Squares from '../../content/Backgrounds/Squares/Squares.vue';
const direction = ref<'diagonal' | 'up' | 'right' | 'down' | 'left'>('diagonal');
const borderColor = ref('#333');
@@ -119,7 +121,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
}
</style>

15
src/demo/Backgrounds/ThreadsDemo.vue
View File

@@ -1,13 +1,14 @@
<template>
<TabbedLayout>
<template #preview>
<div class="relative demo-container h-[500px] overflow-hidden p-0">
<div class="relative p-0 h-[600px] overflow-hidden demo-container">
<Threads
:amplitude="amplitude"
:distance="distance"
:enableMouseInteraction="enableMouseInteraction"
:color="[1, 1, 1]"
/>
<BackgroundContent pillText="New Background" headline="Not to be confused with the Threads app by Meta!" />
</div>
<Customize>
@@ -35,16 +36,17 @@
<script setup lang="ts">
import { ref } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import PropTable from '../../components/common/PropTable.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import Threads from '../../content/Backgrounds/Threads/Threads.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { threads } from '../../constants/code/Backgrounds/threadsCode';
import Threads from '../../content/Backgrounds/Threads/Threads.vue';
const amplitude = ref(1);
const distance = ref(0);
@@ -80,7 +82,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
}
</style>

47
src/demo/Backgrounds/WavesDemo.vue
View File

@@ -1,33 +1,31 @@
<template>
<div class="waves-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container">
<Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-full" />
<TabbedLayout>
<template #preview>
<div class="h-[600px] overflow-hidden demo-container">
<Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-full" />
</div>
<Customize>
<PreviewSlider title="Wave Speed X" v-model="waveSpeedX" :min="0" :max="0.1" :step="0.01" />
<div class="flex items-center gap-4">
<PreviewColor title="Waves Color" v-model="color" />
</div>
</Customize>
<Customize>
<PreviewSlider title="Wave Speed X" v-model="waveSpeedX" :min="0" :max="0.1" :step="0.01" />
<PropTable :data="propData" />
<div class="flex gap-4 items-center">
<PreviewColor title="Waves Color" v-model="color" />
</div>
</Customize>
<Dependencies :dependency-list="[]" />
</template>
<PropTable :data="propData" />
<template #code>
<CodeExample :code-object="waves" />
</template>
<Dependencies :dependency-list="[]" />
</template>
<template #code>
<CodeExample :code-object="waves" />
</template>
<template #cli>
<CliInstallation :command="waves.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="waves.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts">
@@ -105,7 +103,6 @@ const propData = [
<style scoped>
.demo-container {
overflow: hidden;
padding: 0;
}
</style>

3
src/demo/Components/ChromaGridDemo.vue
View File

@@ -1,7 +1,7 @@
<template>
<TabbedLayout>
<template #preview>
<div class="demo-container relative overflow-hidden py-6">
<div class="demo-container relative overflow-hidden">
<ChromaGrid />
</div>
@@ -72,5 +72,6 @@ const propData = [
<style scoped>
.demo-container {
height: auto;
padding: 4em 0;
}
</style>

132
src/demo/TextAnimations/ScrollVelocityDemo.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<TabbedLayout>
<template #preview>
<div class="demo-container overflow-hidden">
<div class="relative flex justify-center items-center">
<ScrollVelocity
:texts="['Vue Bits', 'Scroll Down']"
:velocity="velocity"
:damping="damping"
:stiffness="stiffness"
:velocity-mapping="velocityMapping"
class-name="custom-scroll-text"
/>
</div>
</div>
<Customize>
<PreviewSlider title="Velocity" v-model="velocity" :min="10" :max="500" :step="10" />
<PreviewSlider title="Damping" v-model="damping" :min="10" :max="100" :step="10" />
<PreviewSlider title="Stiffness" v-model="stiffness" :min="100" :max="1000" :step="50" />
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" />
</template>
<template #code>
<CodeExample :code-object="scrollVelocity" />
</template>
<template #cli>
<CliInstallation :command="scrollVelocity.cli" />
</template>
</TabbedLayout>
</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 PreviewSlider from '../../components/common/PreviewSlider.vue';
import ScrollVelocity from '../../content/TextAnimations/ScrollVelocity/ScrollVelocity.vue';
import { scrollVelocity } from '@/constants/code/TextAnimations/scrollVelocityCode';
const velocity = ref(100);
const damping = ref(50);
const stiffness = ref(400);
const velocityMapping = ref<{ input: [number, number]; output: [number, number] }>({
input: [0, 1000],
output: [0, 5]
});
const propData = [
{
name: 'scrollContainerRef',
type: 'HTMLElement | null',
default: 'null',
description: 'Optional ref for a custom scroll container to track scroll position.'
},
{
name: 'texts',
type: 'string[]',
default: '[]',
description: 'Array of strings to display as scrolling text.'
},
{
name: 'velocity',
type: 'number',
default: '100',
description: 'Base velocity for scrolling; sign is flipped for odd indexed texts.'
},
{
name: 'className',
type: 'string',
default: '""',
description: 'CSS class applied to each text copy (span).'
},
{
name: 'damping',
type: 'number',
default: '50',
description: 'Damping value for the spring animation.'
},
{
name: 'stiffness',
type: 'number',
default: '400',
description: 'Stiffness value for the spring animation.'
},
{
name: 'velocityMapping',
type: '{ input: [number, number]; output: [number, number] }',
default: '{ input: [0, 1000], output: [0, 5] }',
description: 'Mapping from scroll velocity to a movement multiplier for dynamic scrolling.'
},
{
name: 'parallaxClassName',
type: 'string',
default: '""',
description: 'CSS class for the parallax container.'
},
{
name: 'scrollerClassName',
type: 'string',
default: '""',
description: 'CSS class for the scroller container.'
},
{
name: 'parallaxStyle',
type: 'Record<string, string | number>',
default: '{}',
description: 'Inline styles for the parallax container.'
},
{
name: 'scrollerStyle',
type: 'Record<string, string | number>',
default: '{}',
description: 'Inline styles for the scroller container.'
}
];
</script>
<style scoped>
.demo-container {
min-height: 400px;
}
</style>