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

Demo updates

Browse Source
This commit is contained in:
David Haz
2025-07-12 10:20:34 +03:00
parent bc418ac1b5
commit 0209273305
4 changed files with 74 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
View File

@@ -1,11 +1,8 @@
<template>
<h2 ref="containerRef" :class="`overflow-hidden ${containerClassName}`">
<span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`" style="font-size: clamp(1.6rem, 8vw, 10rem);">
<span
v-for="(char, index) in splitText"
:key="index"
class="inline-block char"
>
<span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`"
style="font-size: clamp(1.6rem, 8vw, 10rem);">
<span v-for="(char, index) in splitText" :key="index" class="inline-block char">
{{ char === " " ? "\u00A0" : char }}
</span>
</span>

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

@@ -98,7 +98,7 @@ const setWordRef = (el: HTMLSpanElement | null, index: number) => {
onMounted(async () => {
await nextTick();
if (wordRefs.value[0] && containerRef.value) {
const parentRect = containerRef.value.getBoundingClientRect();
const activeRect = wordRefs.value[0].getBoundingClientRect();
@@ -121,44 +121,36 @@ onUnmounted(() => {
<template>
<div class="relative flex flex-wrap justify-center items-center gap-[1em]" ref="containerRef">
<span
v-for="(word, index) in words"
:key="index"
:ref="(el) => setWordRef(el as HTMLSpanElement, index)"
class="relative font-black text-5xl transition-[filter,color] duration-300 ease-in-out cursor-pointer"
:style="{
<span v-for="(word, index) in words" :key="index" :ref="(el) => setWordRef(el as HTMLSpanElement, index)"
class="relative font-black text-5xl transition-[filter,color] duration-300 ease-in-out cursor-pointer" :style="{
filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,
'--border-color': borderColor,
'--glow-color': glowColor,
transition: `filter ${animationDuration}s ease`,
}"
@mouseenter="handleMouseEnter(index)"
@mouseleave="handleMouseLeave"
>
}" @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave">
{{ word }}
</span>
<motion.div
class="top-0 left-0 box-content absolute border-none pointer-events-none"
:animate="{
x: focusRect.x,
y: focusRect.y,
width: focusRect.width,
height: focusRect.height,
opacity: currentIndex >= 0 ? 1 : 0,
}"
:transition="{
<motion.div class="top-0 left-0 box-content absolute border-none pointer-events-none" :animate="{
x: focusRect.x,
y: focusRect.y,
width: focusRect.width,
height: focusRect.height,
opacity: currentIndex >= 0 ? 1 : 0,
}" :transition="{
duration: animationDuration,
}"
:style="{
}" :style="{
'--border-color': borderColor,
'--glow-color': glowColor,
}"
>
<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"></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"></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"></span>
}">
<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"></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"></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"></span>
</motion.div>
</div>
</template>

90
src/demo/TextAnimations/ScrollFloatDemo.vue
View File

@@ -1,51 +1,44 @@
<template>
<TabbedLayout>
<template #preview>
<div
ref="containerRef"
class="demo-container"
@wheel="smoothScroll"
>
<div class="scroll-instruction">
Scroll Down
</div>
<div class="scroll-content">
<ScrollFloat
:children="scrollText"
:animation-duration="animationDuration"
:ease="ease"
:scroll-start="scrollStart"
:scroll-end="scrollEnd"
:stagger="stagger"
:container-class-name="containerClassName"
:text-class-name="textClassName"
:scroll-container-ref="{ current: containerRef }"
:key="rerenderKey"
/>
</div>
<TabbedLayout>
<template #preview>
<div ref="containerRef" class="demo-container" @wheel="smoothScroll">
<div class="scroll-instruction">
Scroll Down
</div>
<Customize>
<PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
<PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
<div class="scroll-content">
<ScrollFloat
:children="scrollText"
:animation-duration="animationDuration"
:ease="ease"
:scroll-start="scrollStart"
:scroll-end="scrollEnd"
:stagger="stagger"
:container-class-name="containerClassName"
:text-class-name="textClassName"
:scroll-container-ref="{ current: containerRef }"
:key="rerenderKey"
/>
</div>
</div>
</Customize>
<Customize>
<PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
<PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
</Customize>
<PropTable :data="propData" />
</template>
<PropTable :data="propData" />
</template>
<template #code>
<CodeExample :code-object="scrollFloatCode" />
</template>
<template #code>
<CodeExample :code-object="scrollFloatCode" />
</template>
<template #cli>
<CliInstallation :command="scrollFloatCode.cli" />
</template>
</TabbedLayout>
<template #cli>
<CliInstallation :command="scrollFloatCode.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts">
@@ -80,10 +73,10 @@ const smoothScroll = (e: WheelEvent) => {
const delta = e.deltaY || e.detail
const scrollAmount = delta * 2
gsap.to(container, {
scrollTop: container.scrollTop + scrollAmount,
duration: 2,
duration: 1,
ease: "power3.out",
overwrite: "auto"
})
@@ -163,17 +156,18 @@ const propData = [
</script>
<style scoped>
.demo-container {
height: 60vh ;
height: 60vh;
overflow-y: auto;
}
.scroll-content {
padding-top: 150vh !important;
padding-top: 150vh !important;
padding-bottom: 50vh;
}
.scroll-instruction {
text-align: center;
color: #271E37;
color: #222;
font-size: clamp(4rem, 6vw, 4rem);
font-weight: 900;
position: absolute;
@@ -182,8 +176,8 @@ const propData = [
right: 0;
transform: translateY(-50%);
}
.scroll-content{
.scroll-content {
color: aliceblue;
}
</style>

43
src/demo/TextAnimations/TrueFocusDemo.vue
View File

@@ -9,45 +9,18 @@
</div>
<Customize>
<PreviewColor title="Text Color" v-model="borderColor" @update:model-value="forceRerender" />
<PreviewColor title="Corners Color" v-model="borderColor" @update:model-value="forceRerender" />
<PreviewSwitch
title="Hover Mode"
v-model="manualMode"
@update:model-value="forceRerender"
/>
<PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
<PreviewSlider
title="Blur Amount"
v-model="blurAmount"
:min="0"
:max="15"
:step="0.5"
value-unit="px"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px"
@update:model-value="forceRerender" />
<PreviewSlider
title="Animation Duration"
v-model="animationDuration"
:min="0.1"
:max="3"
:step="0.1"
value-unit="s"
:disabled="!manualMode"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Animation Duration" v-model="animationDuration" :min="0.1" :max="3" :step="0.1"
value-unit="s" :disabled="!manualMode" @update:model-value="forceRerender" />
<PreviewSlider
title="Pause Between Animations"
v-model="pauseBetweenAnimations"
:min="0"
:max="5"
:step="0.5"
value-unit="s"
:disabled="manualMode"
@update:model-value="forceRerender"
/>
<PreviewSlider title="Pause Between Animations" v-model="pauseBetweenAnimations" :min="0" :max="5" :step="0.5"
value-unit="s" :disabled="manualMode" @update:model-value="forceRerender" />
</Customize>
<PropTable :data="propData" />