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

fix: clean up code formatting and improve hover effect styling

Browse Source
This commit is contained in:
David Haz
2025-07-25 17:29:20 +03:00
parent 6b73cc4df9
commit ef84a39c64
6 changed files with 59 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/content/Components/BounceCards/BounceCards.vue
View File

@@ -10,17 +10,15 @@
v-for="(src, idx) in images"
:key="idx"
ref="cardRefs"
class="absolute w-[200px] aspect-square border-[5px] border-white rounded-[25px] overflow-hidden shadow-[0_4px_10px_rgba(0,0,0,0.2)] bg-[#f8f9fa] opacity-0"
class="absolute w-[200px] aspect-square border-[5px] border-white rounded-[25px] overflow-hidden shadow-[0_4px_10px_rgba(0,0,0,0.2)] bg-[#0b0b0b] opacity-0"
:style="{ transform: transformStyles[idx] ?? 'none' }"
@mouseenter="() => pushSiblings(idx)"
@mouseleave="resetSiblings"
>
<div v-if="!imageLoaded[idx]" class="absolute inset-0 z-[1] flex items-center justify-center bg-black/80">
<div class="w-[75px] h-[75px] border-[3px] border-gray-400 border-t-[#27FF64] rounded-full animate-spin"></div>
</div>
<div v-if="!imageLoaded[idx]" class="absolute inset-0 z-[1] bg-[#0b0b0b] overflow-hidden shimmer-container"></div>
<img
class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ease-in-out z-[2]"
class="absolute inset-0 w-full h-full object-cover z-[2] transition-opacity duration-700 ease-out"
:src="src"
:alt="`card-${idx}`"
:style="{ opacity: imageLoaded[idx] ? 1 : 0 }"
@@ -165,13 +163,34 @@ const playEntranceAnimation = () => {
};
onMounted(playEntranceAnimation);
watch(() => props.images, async () => {
watch(
() => props.images,
async () => {
await nextTick();
gsap.set(cardRefs.value, { opacity: 0, scale: 0 });
playEntranceAnimation();
});
}
);
onUnmounted(() => {
gsap.killTweensOf(cardRefs.value);
});
</script>
<style scoped>
.shimmer-container {
background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
background-size: 600% 600%;
background-position: -600% 0;
animation: shimmer-sweep 6s infinite;
}
@keyframes shimmer-sweep {
0% {
background-position: -600% 0;
}
100% {
background-position: 200% 0;
}
}
</style>

32
src/content/TextAnimations/VariableProximity/VariableProximity.vue
View File

@@ -26,12 +26,11 @@
>
{{ letter }}
</span>
<span
v-if="wordIndex < words.length - 1"
class="inline-block"
>&nbsp;</span>
<span v-if="wordIndex < words.length - 1" class="inline-block">&nbsp;</span>
</span>
<span class="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap clip-rect-0 border-0">
{{ props.label }}
</span>
<span class="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap clip-rect-0 border-0">{{ props.label }}</span>
</span>
</template>
@@ -57,7 +56,7 @@ const props = withDefaults(defineProps<VariableProximityProps>(), {
falloff: 'linear',
className: '',
style: () => ({}),
onClick: undefined,
onClick: undefined
});
const rootRef = ref<HTMLElement | null>(null);
@@ -90,7 +89,7 @@ const parsedSettings = computed(() => {
return Array.from(fromSettings.entries()).map(([axis, fromValue]) => ({
axis,
fromValue,
toValue: toSettings.get(axis) ?? fromValue,
toValue: toSettings.get(axis) ?? fromValue
}));
});
@@ -100,15 +99,17 @@ const calculateDistance = (x1: number, y1: number, x2: number, y2: number) =>
const calculateFalloff = (distance: number) => {
const norm = Math.min(Math.max(1 - distance / props.radius, 0), 1);
switch (props.falloff) {
case 'exponential': return norm ** 2;
case 'gaussian': return Math.exp(-((distance / (props.radius / 2)) ** 2) / 2);
case 'exponential':
return norm ** 2;
case 'gaussian':
return Math.exp(-((distance / (props.radius / 2)) ** 2) / 2);
case 'linear':
default: return norm;
default:
return norm;
}
};
const getLetterKey = (wordIndex: number, letterIndex: number) =>
`${wordIndex}-${letterIndex}`;
const getLetterKey = (wordIndex: number, letterIndex: number) => `${wordIndex}-${letterIndex}`;
const getGlobalLetterIndex = (wordIndex: number, letterIndex: number) => {
let globalIndex = 0;
@@ -175,12 +176,7 @@ const animationLoop = () => {
const letterCenterX = rect.left + rect.width / 2 - containerRect.left;
const letterCenterY = rect.top + rect.height / 2 - containerRect.top;
const distance = calculateDistance(
mousePosition.value.x,
mousePosition.value.y,
letterCenterX,
letterCenterY
);
const distance = calculateDistance(mousePosition.value.x, mousePosition.value.y, letterCenterX, letterCenterY);
if (distance >= props.radius) {
return;

36
src/demo/Components/BounceCardsDemo.vue
View File

@@ -1,4 +1,3 @@
<template>
<TabbedLayout>
<template #preview>
@@ -18,26 +17,11 @@
</div>
<Customize>
<PreviewSwitch
title="Enable Hover Effect"
v-model="enableHover"
/>
<PreviewSwitch title="Enable Hover Effect" v-model="enableHover" />
<PreviewSlider
title="Animation Delay"
v-model="animationDelay"
:min="0.1"
:max="2"
:step="0.1"
/>
<PreviewSlider title="Animation Delay" v-model="animationDelay" :min="0.1" :max="2" :step="0.1" />
<PreviewSlider
title="Animation Stagger"
v-model="animationStagger"
:min="0"
:max="0.3"
:step="0.01"
/>
<PreviewSlider title="Animation Stagger" v-model="animationStagger" :min="0" :max="0.3" :step="0.01" />
</Customize>
<PropTable :data="propData" />
@@ -76,11 +60,11 @@ const animationStagger = ref(0.08);
const { rerenderKey, forceRerender } = useForceRerender();
const images = ref([
'https://picsum.photos/400/400?grayscale',
'https://picsum.photos/500/500?grayscale',
'https://picsum.photos/600/600?grayscale',
'https://picsum.photos/700/700?grayscale',
'https://picsum.photos/300/300?grayscale'
'https://picsum.photos/id/287/300/300?grayscale',
'https://picsum.photos/id/1001/300/300?grayscale',
'https://picsum.photos/id/1027/300/300?grayscale',
'https://picsum.photos/id/1025/300/300?grayscale',
'https://picsum.photos/id/1026/300/300?grayscale'
]);
const transformStyles = ref([
@@ -126,7 +110,7 @@ const propData = [
name: 'animationStagger',
type: 'number',
default: '-',
description: 'Time (in seconds) between each card\'s animation.'
description: "Time (in seconds) between each card's animation."
},
{
name: 'easeType',
@@ -144,7 +128,7 @@ const propData = [
name: 'enableHover',
type: 'boolean',
default: 'false',
description: 'If true, hovering pushes siblings aside and flattens the hovered card\'s rotation.'
description: "If true, hovering pushes siblings aside and flattens the hovered card's rotation."
}
];
</script>

14
src/demo/TextAnimations/VariableProximityDemo.vue
View File

@@ -17,13 +17,7 @@
</div>
<Customize>
<PreviewSlider
title="Radius"
v-model="radius"
:min="50"
:max="300"
:step="10"
/>
<PreviewSlider title="Radius" v-model="radius" :min="50" :max="300" :step="10" />
<div class="flex gap-2 flex-wrap">
<button
@@ -80,13 +74,13 @@ const propData = [
{
name: 'fromFontVariationSettings',
type: 'string',
default: '"\'wght\' 400, \'opsz\' 9"',
default: "\"'wght' 400, 'opsz' 9\"",
description: 'The starting variation settings.'
},
{
name: 'toFontVariationSettings',
type: 'string',
default: '"\'wght\' 800, \'opsz\' 40"',
default: "\"'wght' 800, 'opsz' 40\"",
description: 'The variation settings to reach at cursor proximity.'
},
{
@@ -128,5 +122,5 @@ const propData = [
];
</script>
<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
</style>