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

[ FIX ] : Build Errors

Browse Source
This commit is contained in:
Utkarsh-Singhal-26
2026-01-05 17:56:47 +05:30
parent 2480b155b5
commit 3af2a1f23c
30 changed files with 168 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
jsrepo.config.ts
View File

@@ -72,4 +72,4 @@ function defineComponent({
]
}
];
}
}

7
src/components/code/CliInstallation.vue
View File

@@ -14,8 +14,11 @@
/>
<p class="jsrepo-info">
Vue Bits uses <strong>jsrepo</strong> to help you install components via CLI commands. Learn more about it
<a href="https://jsrepo.dev/" target="_blank" rel="noreferrer">here</a>.
Vue Bits uses
<strong>jsrepo</strong>
to help you install components via CLI commands. Learn more about it
<a href="https://jsrepo.dev/" target="_blank" rel="noreferrer">here</a>
.
</p>
</div>
</template>

4
src/components/common/TabbedLayout.vue
View File

@@ -113,8 +113,8 @@ const subcategory = computed(() => route.params.subcategory);
const toast = useToast();
const isTooltipVisible = ref(false);
const showTimeout = ref<number | null>(null);
const hideTimeout = ref<number | null>(null);
const showTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
const hideTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
const toPascal = (str: string) =>
str

2
src/components/landing/FeatureCards/FeatureCards.vue
View File

@@ -71,7 +71,7 @@ const ParticleCard = defineComponent({
setup(props, { slots }) {
const cardRef = ref<HTMLDivElement | null>(null);
const particlesRef = ref<HTMLDivElement[]>([]);
const timeoutsRef = ref<number[]>([]);
const timeoutsRef = ref<ReturnType<typeof setTimeout>[]>([]);
const isHoveredRef = ref(false);
const memoizedParticles = ref<HTMLDivElement[]>([]);
const particlesInit = ref(false);

4
src/components/navs/Header.vue
View File

@@ -141,8 +141,8 @@ const route = useRoute();
const router = useRouter();
const isTooltipVisible = ref(false);
const showTimeout = ref<number | null>(null);
const hideTimeout = ref<number | null>(null);
const showTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
const hideTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
const slug = (str: string) => str.replace(/\s+/g, '-').toLowerCase();

4
src/components/navs/Sidebar.vue
View File

@@ -130,8 +130,8 @@ const isTransitioning = ref(false);
const sidebarRef = useTemplateRef<HTMLDivElement>('sidebarRef');
const sidebarContainerRef = useTemplateRef<HTMLDivElement>('sidebarContainerRef');
let hoverTimeoutRef: number | null = null;
let hoverDelayTimeoutRef: number | null = null;
let hoverTimeoutRef: ReturnType<typeof setTimeout> | null = null;
let hoverDelayTimeoutRef: ReturnType<typeof setTimeout> | null = null;
const savedSet = ref(new Set(getSavedComponents()));
const route = useRoute();

4
src/content/Animations/Antigravity/Antigravity.vue
View File

@@ -203,9 +203,7 @@ function animate() {
const elapsedTime = clock.getElapsedTime();
// Mouse movement detection
const mouseDist = Math.sqrt(
Math.pow(pointer.x - lastMousePos.x, 2) + Math.pow(pointer.y - lastMousePos.y, 2)
);
const mouseDist = Math.sqrt(Math.pow(pointer.x - lastMousePos.x, 2) + Math.pow(pointer.y - lastMousePos.y, 2));
if (mouseDist > 0.001) {
lastMouseMoveTime = Date.now();

2
src/content/Animations/ClickSpark/ClickSpark.vue
View File

@@ -130,7 +130,7 @@ const resizeCanvas = () => {
}
};
let resizeTimeout: number;
let resizeTimeout: ReturnType<typeof setTimeout>;
const handleResize = () => {
clearTimeout(resizeTimeout);

20
src/content/Animations/Cubes/Cubes.vue
View File

@@ -5,14 +5,14 @@
<div
v-for="(__, c) in cells"
:key="`${r}-${c}`"
class="cube relative w-full h-full aspect-square [transform-style:preserve-3d]"
class="relative w-full h-full aspect-square transform-3d cube"
:data-row="r"
:data-col="c"
>
<span class="absolute pointer-events-none -inset-9" />
<span class="absolute -inset-9 pointer-events-none" />
<div
class="cube-face absolute inset-0 flex items-center justify-center"
class="absolute inset-0 flex justify-center items-center cube-face"
:style="{
background: 'var(--cube-face-bg)',
border: 'var(--cube-face-border)',
@@ -22,7 +22,7 @@
/>
<div
class="cube-face absolute inset-0 flex items-center justify-center"
class="absolute inset-0 flex justify-center items-center cube-face"
:style="{
background: 'var(--cube-face-bg)',
border: 'var(--cube-face-border)',
@@ -32,7 +32,7 @@
/>
<div
class="cube-face absolute inset-0 flex items-center justify-center"
class="absolute inset-0 flex justify-center items-center cube-face"
:style="{
background: 'var(--cube-face-bg)',
border: 'var(--cube-face-border)',
@@ -42,7 +42,7 @@
/>
<div
class="cube-face absolute inset-0 flex items-center justify-center"
class="absolute inset-0 flex justify-center items-center cube-face"
:style="{
background: 'var(--cube-face-bg)',
border: 'var(--cube-face-border)',
@@ -52,7 +52,7 @@
/>
<div
class="cube-face absolute inset-0 flex items-center justify-center"
class="absolute inset-0 flex justify-center items-center cube-face"
:style="{
background: 'var(--cube-face-bg)',
border: 'var(--cube-face-border)',
@@ -62,7 +62,7 @@
/>
<div
class="cube-face absolute inset-0 flex items-center justify-center"
class="absolute inset-0 flex justify-center items-center cube-face"
:style="{
background: 'var(--cube-face-bg)',
border: 'var(--cube-face-border)',
@@ -77,7 +77,7 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, withDefaults, useTemplateRef } from 'vue';
import { ref, computed, onMounted, onUnmounted, useTemplateRef } from 'vue';
import gsap from 'gsap';
interface Gap {
@@ -124,7 +124,7 @@ const props = withDefaults(defineProps<Props>(), {
const sceneRef = useTemplateRef<HTMLDivElement>('sceneRef');
const rafRef = ref<number | null>(null);
const idleTimerRef = ref<number | null>(null);
const idleTimerRef = ref<ReturnType<typeof setTimeout> | null>(null);
const userActiveRef = ref(false);
const simPosRef = ref<{ x: number; y: number }>({ x: 0, y: 0 });
const simTargetRef = ref<{ x: number; y: number }>({ x: 0, y: 0 });

7
src/content/Animations/PixelTrail/PixelTrail.vue
View File

@@ -399,12 +399,7 @@ watch(
<defs>
<filter :id="props.gooeyFilter.id">
<feGaussianBlur in="SourceGraphic" :stdDeviation="props.gooeyFilter.strength" result="blur" />
<feColorMatrix
in="blur"
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9"
result="goo"
/>
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</defs>

2
src/content/Animations/StickerPeel/StickerPeel.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { gsap } from 'gsap';
import { Draggable } from 'gsap/Draggable';
import { Draggable } from 'gsap/all';
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
gsap.registerPlugin(Draggable);

4
src/content/Backgrounds/Ballpit/Ballpit.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { gsap } from 'gsap';
import { Observer } from 'gsap/Observer';
import { Observer } from 'gsap/all';
import {
ACESFilmicToneMapping,
AmbientLight,
@@ -26,7 +26,7 @@ import {
type WebGLRendererParameters
} from 'three';
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
import { defineProps, onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
gsap.registerPlugin(Observer);

21
src/content/Backgrounds/GridScan/GridScan.vue
View File

@@ -1,20 +1,10 @@
<template>
<div
ref="containerRef"
:class="['relative w-full h-full overflow-hidden', className]"
:style="style"
>
<div ref="containerRef" :class="['relative w-full h-full overflow-hidden', className]" :style="style">
<div
v-if="showPreview"
class="absolute right-3 bottom-3 w-[220px] h-[132px] rounded-lg overflow-hidden border border-white/25 shadow-[0_4px_16px_rgba(0,0,0,0.4)] bg-black text-white text-[12px] leading-[1.2] font-sans pointer-events-none"
>
<video
ref="videoRef"
muted
playsinline
autoplay
class="w-full h-full object-cover -scale-x-100"
/>
<video ref="videoRef" muted playsinline autoplay class="w-full h-full object-cover -scale-x-100" />
<div class="absolute left-2 top-2 px-[6px] py-[2px] bg-black/50 rounded-[6px] backdrop-blur-[4px]">
{{
enableWebcam
@@ -764,7 +754,7 @@ const setupAnimation = () => {
// Watch for webcam changes
const unwatchWebcam = watch(
() => props.enableWebcam,
(newVal) => {
newVal => {
if (newVal && modelsReady.value) {
stopFaceDetection = false;
startFaceDetection();
@@ -774,7 +764,7 @@ const setupAnimation = () => {
}
);
const unwatchModels = watch(modelsReady, (ready) => {
const unwatchModels = watch(modelsReady, ready => {
if (ready && props.enableWebcam) {
stopFaceDetection = false;
startFaceDetection();
@@ -814,7 +804,8 @@ const setupAnimation = () => {
uniforms.uNoise.value = Math.max(0, props.noiseIntensity);
uniforms.uScanGlow.value = props.scanGlow;
uniforms.uScanOpacity.value = Math.max(0, Math.min(1, props.scanOpacity));
uniforms.uScanDirection.value = props.scanDirection === 'backward' ? 1 : props.scanDirection === 'pingpong' ? 2 : 0;
uniforms.uScanDirection.value =
props.scanDirection === 'backward' ? 1 : props.scanDirection === 'pingpong' ? 2 : 0;
uniforms.uScanSoftness.value = props.scanSoftness;
uniforms.uPhaseTaper.value = props.scanPhaseTaper;
uniforms.uScanDuration.value = Math.max(0.05, props.scanDuration);

8
src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="relative overflow-hidden">
<canvas ref="canvasRef" class="absolute top-0 left-0 w-full h-full" />
<canvas ref="canvasRef" class="top-0 left-0 absolute w-full h-full" />
<div
v-if="outerVignette"
class="absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0)_60%,_rgba(0,0,0,1)_100%)]"
class="top-0 left-0 absolute bg-[radial-gradient(circle,rgba(0,0,0,0)_60%,rgba(0,0,0,1)_100%)] w-full h-full pointer-events-none"
/>
<div
v-if="centerVignette"
class="absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0.8)_0%,_rgba(0,0,0,0)_60%)]"
class="top-0 left-0 absolute bg-[radial-gradient(circle,rgba(0,0,0,0.8)_0%,rgba(0,0,0,0)_60%)] w-full h-full pointer-events-none"
/>
</div>
</template>
@@ -268,7 +268,7 @@ const animate = () => {
animationRef.value = requestAnimationFrame(animate);
};
let resizeTimeout: number;
let resizeTimeout: ReturnType<typeof setTimeout>;
const handleResize = () => {
clearTimeout(resizeTimeout);

3
src/content/Backgrounds/PixelBlast/PixelBlast.vue
View File

@@ -439,12 +439,13 @@ const setup = () => {
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2', { antialias: props.antialias, alpha: true });
if (!gl) return;
const renderer = new THREE.WebGLRenderer({
canvas,
context: gl as WebGL2RenderingContext,
antialias: props.antialias,
alpha: true
});
renderer.domElement.style.width = '100%';
renderer.domElement.style.height = '100%';
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));

6
src/content/Components/Dock/Dock.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, defineComponent, h } from 'vue';
import { useMotionValue, useSpring, useTransform, type SpringOptions } from 'motion-v';
import { useMotionValue, useSpring, useTransform } from 'motion-v';
export type SpringOptions = NonNullable<Parameters<typeof useSpring>[1]>;
export type DockItemData = {
icon: unknown;
@@ -65,7 +67,7 @@ const handleMouseLeave = () => {
</script>
<template>
<div :style="{ height: currentHeight + 'px', scrollbarWidth: 'none' }" class="mx-2 flex max-w-full items-center">
<div :style="{ height: currentHeight + 'px', scrollbarWidth: 'none' }" class="flex items-center mx-2 max-w-full">
<div
@mousemove="handleMouseMove"
@mouseleave="handleMouseLeave"

8
src/content/Components/InfiniteMenu/InfiniteMenu.vue
View File

@@ -476,8 +476,10 @@ function makeBuffer(
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
if (typeof sizeOrData === 'number') {
gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);
} else if (sizeOrData instanceof ArrayBuffer) {
gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);
} else {
gl.bufferData(gl.ARRAY_BUFFER, sizeOrData as AllowSharedBufferSource, usage);
gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);
}
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return buf;
@@ -1157,7 +1159,7 @@ watch(
<template>
<div class="relative w-full h-full">
<canvas ref="canvasRef" class="w-full h-full cursor-grab active:cursor-grabbing outline-none overflow-hidden" />
<canvas ref="canvasRef" class="outline-none w-full h-full overflow-hidden cursor-grab active:cursor-grabbing" />
<template v-if="activeItem">
<h2
@@ -1202,7 +1204,7 @@ watch(
transform: isMoving ? 'translateX(-50%) scale(0)' : 'translateX(-50%) scale(1)'
}"
>
<p class="select-none relative text-white text-2xl" :style="{ top: '2px' }">&#x2197;</p>
<p class="relative text-white text-2xl select-none" :style="{ top: '2px' }">&#x2197;</p>
</div>
</template>
</div>

10
src/content/Components/InfiniteScroll/InfiniteScroll.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="w-full">
<div
class="infinite-scroll-wrapper relative flex items-center justify-center w-full overflow-hidden"
class="relative flex justify-center items-center w-full overflow-hidden infinite-scroll-wrapper"
ref="wrapperRef"
:style="{
maxHeight: maxHeight,
@@ -9,7 +9,7 @@
}"
>
<div
class="infinite-scroll-container flex flex-col px-4 cursor-grab"
class="flex flex-col px-4 infinite-scroll-container cursor-grab"
ref="containerRef"
:style="{
transform: getTiltTransform(),
@@ -22,7 +22,7 @@
<div
v-for="(item, index) in items"
:key="index"
class="infinite-scroll-item rounded-2xl flex items-center justify-center p-4 text-xl font-semibold text-center border-2 border-white select-none box-border relative"
class="box-border relative flex justify-center items-center p-4 border-2 border-white rounded-2xl font-semibold text-xl text-center infinite-scroll-item select-none"
:style="{
height: itemMinHeight + 'px',
marginTop: negativeMargin
@@ -38,9 +38,9 @@
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import { Observer } from 'gsap/Observer';
import { Observer } from 'gsap/all';
import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
gsap.registerPlugin(Observer);

2
src/content/Components/MagicBento/MagicBento.vue
View File

@@ -116,7 +116,7 @@ const ParticleCard = defineComponent({
setup(props) {
const cardRef = ref<HTMLDivElement | null>(null);
const particlesRef = ref<HTMLDivElement[]>([]);
const timeoutsRef = ref<number[]>([]);
const timeoutsRef = ref<ReturnType<typeof setTimeout>[]>([]);
const isHoveredRef = ref(false);
const memoizedParticles = ref<HTMLDivElement[]>([]);
const particlesInitialized = ref(false);

24
src/content/Components/RollingGallery/RollingGallery.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="relative h-[500px] w-full overflow-hidden">
<div class="absolute top-0 left-0 h-full w-12 z-10 bg-gradient-to-l from-transparent to-[#0b0b0b]" />
<div class="absolute top-0 right-0 h-full w-12 z-10 bg-gradient-to-r from-transparent to-[#0b0b0b]" />
<div class="relative w-full h-[500px] overflow-hidden">
<div class="top-0 left-0 z-10 absolute bg-gradient-to-l from-transparent to-[#0b0b0b] w-12 h-full" />
<div class="top-0 right-0 z-10 absolute bg-gradient-to-r from-transparent to-[#0b0b0b] w-12 h-full" />
<div class="flex h-full items-center justify-center [perspective:1000px] [transform-style:preserve-3d]">
<div class="flex justify-center items-center h-full transform-3d perspective-[1000px]">
<Motion
tag="div"
class="flex min-h-[200px] items-center justify-center w-full cursor-grab select-none will-change-transform [transform-style:preserve-3d] active:cursor-grabbing"
class="flex justify-center items-center w-full min-h-[200px] transform-3d cursor-grab active:cursor-grabbing select-none will-change-transform"
:style="trackStyle"
:animate="animateProps"
:transition="springTransition"
@@ -18,14 +18,14 @@
v-for="(url, i) in displayImages"
:key="`gallery-${i}`"
:style="getItemStyle(i)"
class="absolute flex items-center justify-center px-[8%] [backface-visibility:hidden] will-change-transform pointer-events-none"
class="absolute flex justify-center items-center px-[8%] backface-hidden pointer-events-none will-change-transform"
>
<img
:src="url"
alt="gallery"
loading="lazy"
decoding="async"
class="pointer-events-auto h-[120px] w-[300px] rounded-[15px] border-[3px] border-white object-cover transition-transform duration-300 ease-in-out will-change-transform hover:scale-105"
class="border-[3px] border-white rounded-[15px] w-[300px] h-[120px] object-cover hover:scale-105 transition-transform duration-300 ease-in-out pointer-events-auto will-change-transform"
/>
</div>
</Motion>
@@ -34,8 +34,8 @@
</template>
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
import { Motion } from 'motion-v';
import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
interface RollingGalleryProps {
autoplay?: boolean;
@@ -64,8 +64,8 @@ const DEFAULT_IMAGES = shallowRef([
const isScreenSizeSm = ref(false);
const rotateYValue = ref(0);
const autoplayInterval = ref<number | null>(null);
const autoplayTimeout = ref<number | null>(null);
const autoplayInterval = ref<ReturnType<typeof setInterval> | null>(null);
const autoplayTimeout = ref<ReturnType<typeof setInterval> | null>(null);
const isDragging = ref(false);
const isHovered = ref(false);
const dragStartX = ref(0);
@@ -146,8 +146,8 @@ const getItemStyle = (index: number) => {
return style;
};
let resizeTimeout: number | null = null;
let hoverTimeout: number | null = null;
let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
let hoverTimeout: ReturnType<typeof setTimeout> | null = null;
function checkScreenSize() {
isScreenSizeSm.value = window.innerWidth <= 640;

2
src/content/TextAnimations/DecryptedText/DecryptedText.vue
View File

@@ -40,7 +40,7 @@ const isScrambling = ref(false);
const revealedIndices = ref(new Set<number>());
const hasAnimated = ref(false);
let interval: number | null = null;
let interval: ReturnType<typeof setInterval> | null = null;
let intersectionObserver: IntersectionObserver | null = null;
watch(

24
src/content/TextAnimations/RotatingText/RotatingText.vue
View File

@@ -1,10 +1,16 @@
<script setup lang="ts">
import { AnimatePresence, Motion, type Target, type Transition, type VariantLabels } from 'motion-v';
import { AnimatePresence, Motion } from 'motion-v';
import type { MotionProps } from 'motion-v';
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
type StaggerFrom = 'first' | 'last' | 'center' | 'random' | number;
type SplitBy = 'characters' | 'words' | 'lines';
type TransitionType = NonNullable<MotionProps['transition']>;
type InitialType = NonNullable<MotionProps['initial']>;
type AnimateType = NonNullable<MotionProps['animate']>;
type ExitType = NonNullable<MotionProps['exit']>;
interface WordElement {
characters: string[];
needsSpace: boolean;
@@ -12,10 +18,10 @@ interface WordElement {
interface RotatingTextProps {
texts: string[];
transition?: Transition;
initial?: boolean | Target | VariantLabels;
animate?: Target | VariantLabels;
exit?: Target | VariantLabels;
transition?: TransitionType;
initial?: InitialType;
animate?: AnimateType;
exit?: ExitType;
animatePresenceMode?: 'sync' | 'wait';
animatePresenceInitial?: boolean;
rotationInterval?: number;
@@ -40,10 +46,10 @@ const props = withDefaults(defineProps<RotatingTextProps>(), {
type: 'spring',
damping: 25,
stiffness: 300
}) as Transition,
initial: () => ({ y: '100%', opacity: 0 }) as Target,
animate: () => ({ y: 0, opacity: 1 }) as Target,
exit: () => ({ y: '-120%', opacity: 0 }) as Target,
}) as TransitionType,
initial: () => ({ y: '100%', opacity: 0 }) as InitialType,
animate: () => ({ y: 0, opacity: 1 }) as AnimateType,
exit: () => ({ y: '-120%', opacity: 0 }) as ExitType,
animatePresenceMode: 'wait',
animatePresenceInitial: false,
rotationInterval: 2000,

34
src/content/TextAnimations/Shuffle/Shuffle.vue
View File

@@ -1,10 +1,5 @@
<template>
<component
:is="tag"
ref="textRef"
:class="computedClasses"
:style="computedStyle"
>
<component :is="tag" ref="textRef" :class="computedClasses" :style="computedStyle">
{{ text }}
</component>
</template>
@@ -94,9 +89,7 @@ const baseTw = 'inline-block whitespace-normal break-words will-change-transform
const userHasFont = computed(() => props.className && /font[-[]/i.test(props.className));
const fallbackFont = computed(() =>
userHasFont.value ? {} : { fontFamily: `'Press Start 2P', sans-serif` }
);
const fallbackFont = computed(() => (userHasFont.value ? {} : { fontFamily: `'Press Start 2P', sans-serif` }));
const computedStyle = computed(() => ({
textAlign: props.textAlign,
@@ -104,9 +97,7 @@ const computedStyle = computed(() => ({
...props.style
}));
const computedClasses = computed(() =>
`${baseTw} ${ready.value ? 'visible' : 'invisible'} ${props.className}`.trim()
);
const computedClasses = computed(() => `${baseTw} ${ready.value ? 'visible' : 'invisible'} ${props.className}`.trim());
const removeHover = () => {
if (hoverHandler && textRef.value) {
@@ -274,7 +265,7 @@ const play = () => {
cleanupToStill();
if (props.colorTo) gsap.set(strips, { color: props.colorTo });
emit('shuffle-complete');
props.onShuffleComplete?.();
props.onShuffleComplete?.();
armHover();
}
}
@@ -292,7 +283,8 @@ const play = () => {
},
at
);
if (props.colorFrom && props.colorTo) tl.to(targets, { color: props.colorTo, duration: props.duration, ease: props.ease }, at);
if (props.colorFrom && props.colorTo)
tl.to(targets, { color: props.colorTo, duration: props.duration, ease: props.ease }, at);
};
if (props.animationMode === 'evenodd') {
@@ -315,7 +307,13 @@ const play = () => {
},
d
);
if (props.colorFrom && props.colorTo) tl.fromTo(strip, { color: props.colorFrom }, { color: props.colorTo, duration: props.duration, ease: props.ease }, d);
if (props.colorFrom && props.colorTo)
tl.fromTo(
strip,
{ color: props.colorFrom },
{ color: props.colorTo, duration: props.duration, ease: props.ease },
d
);
});
}
@@ -333,7 +331,11 @@ const create = () => {
const initializeAnimation = async () => {
if (typeof window === 'undefined' || !textRef.value || !props.text || !fontsLoaded.value) return;
if (props.respectReducedMotion && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
if (
props.respectReducedMotion &&
window.matchMedia &&
window.matchMedia('(prefers-reduced-motion: reduce)').matches
) {
ready.value = true;
emit('shuffle-complete');
props.onShuffleComplete?.();

6
src/content/TextAnimations/TextCursor/TextCursor.vue
View File

@@ -39,7 +39,7 @@ const trail = ref<TrailItem[]>([]);
const lastMoveTime = ref(Date.now());
const idCounter = ref(0);
let removalIntervalId: number | null = null;
let removalIntervalId: ReturnType<typeof setInterval> | null = null;
const handleMouseMove = (e: MouseEvent) => {
if (!containerRef.value) return;
@@ -134,7 +134,7 @@ onUnmounted(() => {
</script>
<template>
<div ref="containerRef" class="w-full h-full relative">
<div ref="containerRef" class="relative w-full h-full">
<div class="absolute inset-0 pointer-events-none">
<Motion
v-for="item in trail"
@@ -152,7 +152,7 @@ onUnmounted(() => {
repeat: props.randomFloat ? Infinity : 0,
repeatType: props.randomFloat ? 'mirror' : 'loop'
}"
class="absolute select-none whitespace-nowrap text-3xl"
class="absolute text-3xl whitespace-nowrap select-none"
:style="{ left: `${item.x}px`, top: `${item.y}px` }"
>
{{ props.text }}

4
src/content/TextAnimations/TextTrail/TextTrail.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import {
CanvasTexture,
Clock,
@@ -16,6 +15,7 @@ import {
WebGLRenderer,
WebGLRenderTarget
} from 'three';
import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
interface TextTrailProps {
text?: string;
@@ -151,7 +151,7 @@ let quad: Mesh | null = null;
let labelMat: ShaderMaterial | null = null;
let label: Mesh | null = null;
let resizeObserver: ResizeObserver | null = null;
let colorTimer: number | null = null;
let colorTimer: ReturnType<typeof setInterval> | null = null;
const persistColor = ref<[number, number, number]>(
hexToRgb(props.textColor || props.startColor).map(c => c / 255) as [number, number, number]

16
src/content/TextAnimations/TrueFocus/TrueFocus.vue
View File

@@ -29,7 +29,7 @@ const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const wordRefs = ref<HTMLSpanElement[]>([]);
const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });
let interval: number | null = null;
let interval: ReturnType<typeof setInterval> | null = null;
watch(
[currentIndex, () => words.value.length],
@@ -150,20 +150,20 @@ onUnmounted(() => {
'--glow-color': glowColor
}"
>
<spanx
class="top-[-10px] left-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"
></spanx>
<span
class="top-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"
class="top-[-10px] right-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"
></span>
<span
class="top-[-10px] right-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"
class="bottom-[-10px] left-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"
></span>
<span
class="bottom-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"
></span>
<span
class="right-[-10px] bottom-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"
class="right-[-10px] bottom-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"
></span>
</motion.div>
</div>

6
src/demo/Animations/AntigravityDemo.vue
View File

@@ -25,11 +25,7 @@
<Customize>
<PreviewColor title="Color" v-model="color" />
<PreviewSelect
title="Particle Shape"
:options="shapeOptions"
v-model="particleShape"
/>
<PreviewSelect title="Particle Shape" :options="shapeOptions" v-model="particleShape" />
<PreviewSlider title="Magnet Radius" :min="5" :max="50" :step="1" v-model="magnetRadius" />

43
src/demo/Animations/PixelTrailDemo.vue
View File

@@ -19,13 +19,41 @@
</div>
<Customize>
<PreviewSlider title="Grid Size" v-model="gridSize" :min="10" :max="100" :step="1" @update:model-value="forceRerender" />
<PreviewSlider
title="Grid Size"
v-model="gridSize"
:min="10"
:max="100"
:step="1"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Trail Size" v-model="trailSize" :min="0.05" :max="0.5" :step="0.01" @update:model-value="forceRerender" />
<PreviewSlider
title="Trail Size"
v-model="trailSize"
:min="0.05"
:max="0.5"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Max Age" v-model="maxAge" :min="100" :max="1000" :step="50" @update:model-value="forceRerender" />
<PreviewSlider
title="Max Age"
v-model="maxAge"
:min="100"
:max="1000"
:step="50"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Interpolate" v-model="interpolate" :min="0" :max="10" :step="0.1" @update:model-value="forceRerender" />
<PreviewSlider
title="Interpolate"
v-model="interpolate"
:min="0"
:max="10"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewColor title="Color" v-model="color" @update:model-value="forceRerender" />
@@ -88,6 +116,11 @@ const propData = [
{ name: 'maxAge', type: 'number', default: '250', description: 'Duration of the trail effect.' },
{ name: 'interpolate', type: 'number', default: '5', description: 'Interpolation factor for pointer movement.' },
{ name: 'color', type: 'string', default: '#ffffff', description: 'Pixel color.' },
{ name: 'gooeyFilter', type: 'object', default: "{ id: 'custom-goo-filter', strength: 5 }", description: 'Configuration for gooey filter.' }
{
name: 'gooeyFilter',
type: 'object',
default: "{ id: 'custom-goo-filter', strength: 5 }",
description: 'Configuration for gooey filter.'
}
];
</script>

56
src/demo/Backgrounds/GridScanDemo.vue
View File

@@ -24,63 +24,21 @@
<PreviewColor title="Lines Color" v-model="linesColor" class="mb-4" />
<PreviewColor title="Scan Color" v-model="scanColor" />
<PreviewSlider
title="Line Thickness"
v-model="lineThickness"
:min="1"
:max="4"
:step="0.1"
/>
<PreviewSlider title="Line Thickness" v-model="lineThickness" :min="1" :max="4" :step="0.1" />
<PreviewSlider
title="Grid Scale"
v-model="gridScale"
:min="0.02"
:max="0.5"
:step="0.01"
/>
<PreviewSlider title="Grid Scale" v-model="gridScale" :min="0.02" :max="0.5" :step="0.01" />
<PreviewSlider
title="Line Jitter"
v-model="lineJitter"
:min="0"
:max="1"
:step="0.01"
/>
<PreviewSlider title="Line Jitter" v-model="lineJitter" :min="0" :max="1" :step="0.01" />
<PreviewSlider
title="Scan Glow"
v-model="scanGlow"
:min="0.1"
:max="3"
:step="0.1"
/>
<PreviewSlider title="Scan Glow" v-model="scanGlow" :min="0.1" :max="3" :step="0.1" />
<PreviewSlider
title="Scan Softness"
v-model="scanSoftness"
:min="0.1"
:max="4"
:step="0.1"
/>
<PreviewSlider title="Scan Softness" v-model="scanSoftness" :min="0.1" :max="4" :step="0.1" />
<PreviewSwitch title="Enable Post" v-model="enablePost" />
<PreviewSlider
title="Chromatic Aberration"
v-model="chromaticAberration"
:min="0"
:max="0.01"
:step="0.0005"
/>
<PreviewSlider title="Chromatic Aberration" v-model="chromaticAberration" :min="0" :max="0.01" :step="0.0005" />
<PreviewSlider
title="Noise Intensity"
v-model="noiseIntensity"
:min="0"
:max="0.1"
:step="0.005"
/>
<PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="0.1" :step="0.005" />
<PreviewSwitch title="Enable Webcam" v-model="enableWebcam" />
<PreviewSwitch title="Show Preview HUD" v-model="showPreview" />

48
src/demo/TextAnimations/ShuffleDemo.vue
View File

@@ -20,53 +20,19 @@
</div>
<Customize>
<PreviewSelect
title="Direction"
v-model="shuffleDirection"
:options="directionOptions"
/>
<PreviewSelect title="Direction" v-model="shuffleDirection" :options="directionOptions" />
<PreviewSelect
title="Ease"
v-model="ease"
:options="easeOptions"
/>
<PreviewSelect title="Ease" v-model="ease" :options="easeOptions" />
<PreviewSlider
title="Duration"
v-model="duration"
:min="0.1"
:max="1.5"
:step="0.05"
value-unit="s"
/>
<PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="1.5" :step="0.05" value-unit="s" />
<PreviewSlider
title="Shuffle Times"
v-model="shuffleTimes"
:min="1"
:max="8"
:step="1"
/>
<PreviewSlider title="Shuffle Times" v-model="shuffleTimes" :min="1" :max="8" :step="1" />
<PreviewSlider
title="Stagger"
v-model="stagger"
:min="0"
:max="0.2"
:step="0.01"
value-unit="s"
/>
<PreviewSlider title="Stagger" v-model="stagger" :min="0" :max="0.2" :step="0.01" value-unit="s" />
<PreviewSwitch
title="Hover Replay"
v-model="triggerOnHover"
/>
<PreviewSwitch title="Hover Replay" v-model="triggerOnHover" />
<PreviewSwitch
title="Loop"
v-model="loop"
/>
<PreviewSwitch title="Loop" v-model="loop" />
<PreviewSlider
title="Loop Delay"