mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
Create <TrueFocus /> text animation
This commit is contained in:
Utkarsh-Singhal-26
@@ -19,6 +19,7 @@ export const CATEGORIES = [
|
||||
'Falling Text',
|
||||
'Text Cursor',
|
||||
'Decrypted Text',
|
||||
'True Focus'
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -23,6 +23,7 @@ const textAnimations = {
|
||||
'falling-text': () => import("../demo/TextAnimations/FallingTextDemo.vue"),
|
||||
'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
|
||||
'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
|
||||
'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
|
||||
};
|
||||
|
||||
const components = {
|
||||
|
||||
22
src/constants/code/TextAnimations/trueFocusCode.ts
Normal file
22
src/constants/code/TextAnimations/trueFocusCode.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import code from "@/content/TextAnimations/TrueFocus/TrueFocus.vue?raw";
|
||||
import type { CodeObject } from "../../../types/code";
|
||||
|
||||
export const trueFocus: CodeObject = {
|
||||
cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TrueFocus`,
|
||||
installation: `npm install motion-v`,
|
||||
usage: `<template>
|
||||
<TrueFocus
|
||||
sentence="True Focus"
|
||||
manualMode="false"
|
||||
blurAmount="5"
|
||||
borderColor="red"
|
||||
animationDuration="2"
|
||||
pauseBetweenAnimations="1"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TrueFocus from "./TrueFocus.vue";
|
||||
</script>`,
|
||||
code,
|
||||
};
|
||||
218
src/content/TextAnimations/TrueFocus/TrueFocus.vue
Normal file
218
src/content/TextAnimations/TrueFocus/TrueFocus.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onUnmounted, watch, nextTick, computed } from "vue";
|
||||
|
||||
interface TrueFocusProps {
|
||||
sentence?: string;
|
||||
manualMode?: boolean;
|
||||
blurAmount?: number;
|
||||
borderColor?: string;
|
||||
glowColor?: string;
|
||||
animationDuration?: number;
|
||||
pauseBetweenAnimations?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<TrueFocusProps>(), {
|
||||
sentence: "True Focus",
|
||||
manualMode: false,
|
||||
blurAmount: 5,
|
||||
borderColor: "green",
|
||||
glowColor: "rgba(0, 255, 0, 0.6)",
|
||||
animationDuration: 0.5,
|
||||
pauseBetweenAnimations: 1,
|
||||
});
|
||||
|
||||
const words = computed(() => props.sentence.split(" "));
|
||||
const currentIndex = ref(0);
|
||||
const lastActiveIndex = ref<number | null>(null);
|
||||
const containerRef = ref<HTMLDivElement>();
|
||||
const wordRefs = ref<HTMLSpanElement[]>([]);
|
||||
const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });
|
||||
|
||||
let interval: number | null = null;
|
||||
|
||||
watch(
|
||||
[
|
||||
() => props.manualMode,
|
||||
() => props.animationDuration,
|
||||
() => props.pauseBetweenAnimations,
|
||||
words,
|
||||
],
|
||||
() => {
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
}
|
||||
|
||||
if (!props.manualMode) {
|
||||
interval = setInterval(
|
||||
() => {
|
||||
currentIndex.value = (currentIndex.value + 1) % words.value.length;
|
||||
},
|
||||
(props.animationDuration + props.pauseBetweenAnimations) * 1000,
|
||||
);
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
[currentIndex, words],
|
||||
async () => {
|
||||
if (currentIndex.value === null || currentIndex.value === -1) return;
|
||||
if (!wordRefs.value[currentIndex.value] || !containerRef.value) return;
|
||||
|
||||
await nextTick();
|
||||
|
||||
const parentRect = containerRef.value.getBoundingClientRect();
|
||||
const activeRect = wordRefs.value[currentIndex.value].getBoundingClientRect();
|
||||
|
||||
focusRect.value = {
|
||||
x: activeRect.left - parentRect.left,
|
||||
y: activeRect.top - parentRect.top,
|
||||
width: activeRect.width,
|
||||
height: activeRect.height,
|
||||
};
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const handleMouseEnter = (index: number) => {
|
||||
if (props.manualMode) {
|
||||
lastActiveIndex.value = index;
|
||||
currentIndex.value = index;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (props.manualMode) {
|
||||
currentIndex.value = lastActiveIndex.value || 0;
|
||||
}
|
||||
};
|
||||
|
||||
const setWordRef = (el: HTMLSpanElement | null, index: number) => {
|
||||
if (el) {
|
||||
wordRefs.value[index] = el;
|
||||
}
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="focus-container" ref="containerRef">
|
||||
<span
|
||||
v-for="(word, index) in words"
|
||||
:key="index"
|
||||
:ref="(el) => setWordRef(el as HTMLSpanElement, index)"
|
||||
:class="[
|
||||
'focus-word',
|
||||
{ manual: manualMode },
|
||||
{ active: index === currentIndex && !manualMode },
|
||||
]"
|
||||
: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"
|
||||
>
|
||||
{{ word }}
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="focus-frame"
|
||||
:style="{
|
||||
'--border-color': borderColor,
|
||||
'--glow-color': glowColor,
|
||||
transform: `translate(${focusRect.x}px, ${focusRect.y}px)`,
|
||||
width: `${focusRect.width}px`,
|
||||
height: `${focusRect.height}px`,
|
||||
opacity: currentIndex >= 0 ? 1 : 0,
|
||||
transition: `all ${animationDuration}s ease`,
|
||||
}"
|
||||
>
|
||||
<span class="top-left corner"></span>
|
||||
<span class="top-right corner"></span>
|
||||
<span class="bottom-left corner"></span>
|
||||
<span class="bottom-right corner"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.focus-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.focus-word {
|
||||
position: relative;
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
filter 0.3s ease,
|
||||
color 0.3s ease;
|
||||
}
|
||||
|
||||
.focus-word.active {
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
.focus-frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
box-sizing: content-box;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.corner {
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 3px solid var(--border-color, #fff);
|
||||
filter: drop-shadow(0px 0px 4px var(--border-color, #fff));
|
||||
border-radius: 3px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bottom-left {
|
||||
bottom: -10px;
|
||||
left: -10px;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.bottom-right {
|
||||
bottom: -10px;
|
||||
right: -10px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
</style>
|
||||
158
src/demo/TextAnimations/TrueFocusDemo.vue
Normal file
158
src/demo/TextAnimations/TrueFocusDemo.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="truefocus-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative py-6 overflow-hidden demo-container" style="min-height: 200px">
|
||||
<RefreshButton @click="forceRerender" />
|
||||
<div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
|
||||
<TrueFocus v-bind="config" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewColor title="Text Color" v-model="borderColor" @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="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"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['framer-motion']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="trueFocus" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="trueFocus.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import TabbedLayout from "../../components/common/TabbedLayout.vue";
|
||||
import PropTable from "../../components/common/PropTable.vue";
|
||||
import CliInstallation from "../../components/code/CliInstallation.vue";
|
||||
import CodeExample from "../../components/code/CodeExample.vue";
|
||||
import Dependencies from "../../components/code/Dependencies.vue";
|
||||
import Customize from "../../components/common/Customize.vue";
|
||||
import PreviewColor from "../../components/common/PreviewColor.vue";
|
||||
import PreviewSlider from "../../components/common/PreviewSlider.vue";
|
||||
import PreviewSwitch from "../../components/common/PreviewSwitch.vue";
|
||||
import RefreshButton from "../../components/common/RefreshButton.vue";
|
||||
import TrueFocus from "../../content/TextAnimations/TrueFocus/TrueFocus.vue";
|
||||
import { trueFocus } from "../../constants/code/TextAnimations/trueFocusCode";
|
||||
import { useForceRerender } from "@/composables/useForceRerender";
|
||||
|
||||
const { rerenderKey: key, forceRerender } = useForceRerender();
|
||||
|
||||
const manualMode = ref(false);
|
||||
const blurAmount = ref(5);
|
||||
const animationDuration = ref(0.5);
|
||||
const pauseBetweenAnimations = ref(1);
|
||||
const borderColor = ref("#5227FF");
|
||||
|
||||
const config = computed(() => ({
|
||||
sentence: "True Focus",
|
||||
manualMode: manualMode.value,
|
||||
blurAmount: blurAmount.value,
|
||||
borderColor: borderColor.value,
|
||||
animationDuration: animationDuration.value,
|
||||
pauseBetweenAnimations: pauseBetweenAnimations.value,
|
||||
}));
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: "sentence",
|
||||
type: "string",
|
||||
default: "'True Focus'",
|
||||
description: "The text to display with the focus animation.",
|
||||
},
|
||||
{
|
||||
name: "manualMode",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "Disables automatic animation when set to true.",
|
||||
},
|
||||
{
|
||||
name: "blurAmount",
|
||||
type: "number",
|
||||
default: "5",
|
||||
description: "The amount of blur applied to non-active words.",
|
||||
},
|
||||
{
|
||||
name: "borderColor",
|
||||
type: "string",
|
||||
default: "'green'",
|
||||
description: "The color of the focus borders.",
|
||||
},
|
||||
{
|
||||
name: "glowColor",
|
||||
type: "string",
|
||||
default: "'rgba(0, 255, 0, 0.6)'",
|
||||
description: "The color of the glowing effect on the borders.",
|
||||
},
|
||||
{
|
||||
name: "animationDuration",
|
||||
type: "number",
|
||||
default: "0.5",
|
||||
description: "The duration of the animation for each word.",
|
||||
},
|
||||
{
|
||||
name: "pauseBetweenAnimations",
|
||||
type: "number",
|
||||
default: "1",
|
||||
description: "Time to pause between focusing on each word (in auto mode).",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.truefocus-demo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user