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

Docs Cleanup

Browse Source
This commit is contained in:
David Haz
2025-07-12 15:28:52 +03:00
parent 62cdbc2dba
commit 056d2c0330
21 changed files with 365 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,52 +3,39 @@
<div class="features-container">
<div class="features-header">
<h3 class="features-title">Zero cost, all the cool.</h3>
<p class="features-subtitle">Everything you need to add flair to your websites</p>
</div>
<GlobalSpotlight v-if="gridRef" :grid-ref="gridRef" :disable-animations="isMobile" />
<div class="bento-grid" ref="gridRef">
<ParticleCard class="feature-card card1" :disable-animations="isMobile">
<div className="messages-gif-wrapper">
<img src="/assets/messages.gif" alt="Messages animation" className="messages-gif" />
<div class="messages-gif-wrapper">
<img src="/assets/messages.gif" alt="Messages animation" class="messages-gif" />
</div>
<h2>
<template v-if="isMobile">100</template>
<CountUp v-else :to="100" />
%
</h2>
<h3>Free &amp; Open Source</h3>
<p>Loved by developers around the world</p>
</ParticleCard>
<ParticleCard class="feature-card card2" :disable-animations="isMobile">
<div className="components-gif-wrapper">
<img src="/assets/components.gif" alt="Components animation" className="components-gif" />
<div class="components-gif-wrapper">
<img src="/assets/components.gif" alt="Components animation" class="components-gif" />
</div>
<h2>
<template v-if="isMobile">40</template>
<CountUp v-else :to="40" />
+
</h2>
<h3>Curated Components</h3>
<p>Growing weekly &amp; only getting better</p>
</ParticleCard>
<ParticleCard class="feature-card card4" :disable-animations="isMobile">
<h2>Modern</h2>
<h3>Technologies</h3>
<p>TypeScript + Tailwind, ready to ship</p>
</ParticleCard>
</div>
@@ -200,102 +187,4 @@ const ParticleCard = defineComponent({
);
}
});
const GlobalSpotlight = defineComponent({
name: 'GlobalSpotlight',
props: {
gridRef: {
type: Object,
required: true
},
disableAnimations: {
type: Boolean,
default: false
}
},
setup(props) {
const spotlightRef = ref<HTMLDivElement | null>(null);
const isInsideSectionRef = ref(false);
const handleMouseMove = (e: MouseEvent) => {
if (!spotlightRef.value || !props.gridRef.value) return;
const section = props.gridRef.value.closest('.features-section');
const rect = section?.getBoundingClientRect();
const inside =
rect && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
isInsideSectionRef.value = inside;
const cards = props.gridRef.value.querySelectorAll('.feature-card');
if (!inside) {
gsap.to(spotlightRef.value, { opacity: 0, duration: 0.3, ease: 'power2.out' });
cards.forEach((card: HTMLElement) => card.style.setProperty('--glow-intensity', '0'));
return;
}
let minDist = Infinity;
const prox = 100,
fade = 150;
cards.forEach((card: HTMLElement) => {
const r = card.getBoundingClientRect();
const cx = r.left + r.width / 2;
const cy = r.top + r.height / 2;
const d = Math.hypot(e.clientX - cx, e.clientY - cy) - Math.max(r.width, r.height) / 2;
const ed = Math.max(0, d);
minDist = Math.min(minDist, ed);
const rx = ((e.clientX - r.left) / r.width) * 100;
const ry = ((e.clientY - r.top) / r.height) * 100;
let glow = 0;
if (ed <= prox) glow = 1;
else if (ed <= fade) glow = (fade - ed) / (fade - prox);
card.style.setProperty('--glow-x', `${rx}%`);
card.style.setProperty('--glow-y', `${ry}%`);
card.style.setProperty('--glow-intensity', String(glow));
});
gsap.to(spotlightRef.value, { left: e.clientX, top: e.clientY, duration: 0.1, ease: 'power2.out' });
const target = minDist <= prox ? 0.8 : minDist <= fade ? ((fade - minDist) / (fade - prox)) * 0.8 : 0;
gsap.to(spotlightRef.value, { opacity: target, duration: target > 0 ? 0.2 : 0.5, ease: 'power2.out' });
};
const handleMouseLeave = () => {
isInsideSectionRef.value = false;
props.gridRef.value
?.querySelectorAll('.feature-card')
.forEach((card: HTMLElement) => card.style.setProperty('--glow-intensity', '0'));
if (spotlightRef.value) {
gsap.to(spotlightRef.value, { opacity: 0, duration: 0.3, ease: 'power2.out' });
}
};
onMounted(() => {
if (props.disableAnimations || !props.gridRef?.value) return;
const spotlight = document.createElement('div');
spotlight.className = 'global-spotlight';
spotlight.style.cssText = `
position:fixed;width:800px;height:800px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(132,0,255,.15) 0%,rgba(132,0,255,.08) 15%,
rgba(132,0,255,.04) 25%,rgba(132,0,255,.02) 40%,rgba(132,0,255,.01) 65%,transparent 70%);
z-index:200;opacity:0;transform:translate(-50%,-50%);mix-blend-mode:screen;
`;
document.body.appendChild(spotlight);
spotlightRef.value = spotlight;
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseleave', handleMouseLeave);
});
onUnmounted(() => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseleave', handleMouseLeave);
if (spotlightRef.value?.parentNode) {
spotlightRef.value.parentNode.removeChild(spotlightRef.value);
}
});
return () => null;
}
});
</script>