atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -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

39
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 () => {
await nextTick();
gsap.set(cardRefs.value, { opacity: 0, scale: 0 });
playEntranceAnimation();
});
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>

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

@@ -378,7 +378,7 @@ const ParticleCard = defineComponent({
const GlobalSpotlight = defineComponent({
name: 'GlobalSpotlight',
props: {
gridRef: {type: [Object, null] as PropType<HTMLDivElement | null>, required: true},
gridRef: { type: [Object, null] as PropType<HTMLDivElement | null>, required: true },
disableAnimations: { type: Boolean, default: false },
enabled: { type: Boolean, default: true },
spotlightRadius: { type: Number, default: DEFAULT_SPOTLIGHT_RADIUS },

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;