Merge pull request #26 from selemondev/feat/add-blur-in-component

feat: add blur in component

docs/index.md

@@ -68,3 +68,5 @@ import Demos from './src/components/Demos.vue'
 <demo src="./src/example/bento/Demo.vue" />
 
 <demo src="./src/example/blurFade/Demo.vue" />
+
+<demo src="./src/example/blurIn/Demo.vue" />

docs/src/components/spark-ui/blurIn/BlurIn.vue

@@ -0,0 +1,40 @@
+<script setup lang='ts'>
+import { cn } from '../../../lib/utils'
+
+interface BlurIntProps {
+  word: string
+  class?: string
+  variant?: {
+    hidden: { filter: string, opacity: number }
+    visible: { filter: string, opacity: number }
+  }
+  duration?: number
+};
+
+const props = withDefaults(defineProps<BlurIntProps>(), {
+  duration: 500,
+})
+
+const defaultVariants = {
+  hidden: { filter: 'blur(10px)', opacity: 0 },
+  visible: {
+    filter: 'blur(0px)',
+    opacity: 1,
+    transition: {
+      duration: props.duration,
+    },
+  },
+}
+
+const combinedVariants = props.variant || defaultVariants
+const className = cn(
+  'font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]',
+  props.class,
+)
+</script>
+
+<template>
+  <h1 v-motion :initial="combinedVariants.hidden" :visible="combinedVariants.visible" :class="className">
+    {{ props.word }}
+  </h1>
+</template>

docs/src/example/blurFade/Demo.vue

@@ -4,13 +4,13 @@ import BlurFade from './BlurFade.vue'
 
 <template>
   <div class="flex flex-col space-y-2">
-    <BlurFade :delay="250">
-      <span class="text-[35px] font-bold tracking-tighter dark:text-white leading-1">
+    <BlurFade in-view :delay="250">
+      <span class="text-[45px] font-bold tracking-tighter dark:text-white leading-1">
         Hello World 👋
       </span>
     </BlurFade>
-    <BlurFade :delay="350 * 2">
-      <span class="font-[500] text-[18px] dark:text-white tracking-tighter">
+    <BlurFade in-view :delay="350 * 2">
+      <span class="font-[500] text-[20px] dark:text-white tracking-tighter">
         Nice to meet you ✨
       </span>
     </BlurFade>

docs/src/example/blurIn/BlurIn.vue

@@ -0,0 +1,40 @@
+<script setup lang='ts'>
+import { cn } from '../../lib/utils'
+
+interface BlurIntProps {
+  word: string
+  class?: string
+  variant?: {
+    hidden: { filter: string, opacity: number }
+    visible: { filter: string, opacity: number }
+  }
+  duration?: number
+};
+
+const props = withDefaults(defineProps<BlurIntProps>(), {
+  duration: 500,
+})
+
+const defaultVariants = {
+  hidden: { filter: 'blur(10px)', opacity: 0 },
+  visible: {
+    filter: 'blur(0px)',
+    opacity: 1,
+    transition: {
+      duration: props.duration,
+    },
+  },
+}
+
+const combinedVariants = props.variant || defaultVariants
+const className = cn(
+  'font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]',
+  props.class,
+)
+</script>
+
+<template>
+  <h1 v-motion :initial="combinedVariants.hidden" :visible="combinedVariants.visible" :class="className">
+    {{ props.word }}
+  </h1>
+</template>

docs/src/example/blurIn/Demo.vue

@@ -0,0 +1,7 @@
+<script setup lang='ts'>
+import BlurIn from './BlurIn.vue'
+</script>
+
+<template>
+  <BlurIn word="Spark UI ✨" class="font-bold text-black dark:text-white" />
+</template>