Merge pull request #32 from unovue/component/lamp-effect

Added Lamp Effect Component

components/content/inspira/examples/LampEffectDemo.vue

@@ -0,0 +1,5 @@
+<template>
+  <LampEffect>
+    <span class="font-heading text-6xl"> Lamp Effect </span>
+  </LampEffect>
+</template>

components/content/inspira/ui/lamp-effect/LampEffect.vue

@@ -0,0 +1,140 @@
+<template>
+  <div
+    :class="
+      cn(
+        'relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-slate-950 w-full rounded-md z-0',
+        $props.class,
+      )
+    "
+  >
+    <div class="relative flex w-full flex-1 scale-y-125 items-center justify-center isolate z-0">
+      <!-- Conic Gradient -->
+      <div
+        :style="{
+          backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
+        }"
+        class="animate-conic-gradient absolute inset-auto right-1/2 h-56 overflow-visible w-[15rem] bg-gradient-conic from-cyan-500 via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top]"
+      >
+        <div
+          class="absolute w-[100%] left-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]"
+        />
+        <div
+          class="absolute w-40 h-[100%] left-0 bg-slate-950 bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)]"
+        />
+      </div>
+
+      <div
+        :style="{
+          backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
+        }"
+        class="animate-conic-gradient absolute inset-auto left-1/2 h-56 w-[15rem] bg-gradient-conic from-transparent via-transparent to-cyan-500 text-white [--conic-position:from_290deg_at_center_top]"
+      >
+        <div
+          class="absolute w-40 h-[100%] right-0 bg-slate-950 bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)]"
+        />
+        <div
+          class="absolute w-[100%] right-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]"
+        />
+      </div>
+
+      <div
+        class="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-slate-950 blur-2xl"
+      ></div>
+
+      <div
+        class="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md"
+      ></div>
+
+      <div
+        class="absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-cyan-500 opacity-50 blur-3xl"
+      ></div>
+
+      <!-- Spotlight -->
+      <div
+        class="animate-spotlight absolute inset-auto z-30 h-36 w-32 -translate-y-[6rem] rounded-full bg-cyan-400 blur-2xl"
+      ></div>
+
+      <!-- Glowing Line -->
+      <div
+        class="animate-glowing-line absolute inset-auto z-50 h-0.5 w-[15rem] -translate-y-[7rem] bg-cyan-400"
+      ></div>
+
+      <div class="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-slate-950"></div>
+    </div>
+
+    <div class="relative z-50 flex -translate-y-80 flex-col items-center px-5">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+interface LampEffectProps {
+  delay?: number;
+  duration?: number;
+  class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<LampEffectProps>(), {
+  delay: 0.5,
+  duration: 0.8,
+});
+
+const durationInSeconds = computed(() => `${props.duration}s`);
+const delayInSeconds = computed(() => `${props.delay}s`);
+</script>
+
+<style scoped>
+/* Spotlight Animation */
+.animate-spotlight {
+  animation: spotlight-anim ease-in-out v-bind(durationInSeconds) forwards;
+  animation-delay: v-bind(delayInSeconds);
+}
+
+/* Glowing Line Animation */
+.animate-glowing-line {
+  animation: glowing-line-anim ease-in-out v-bind(durationInSeconds) forwards;
+  animation-delay: v-bind(delayInSeconds);
+}
+
+/* Conic Gradient Animation */
+.animate-conic-gradient {
+  animation: conic-gradient-anim ease-in-out v-bind(durationInSeconds) forwards;
+  animation-delay: v-bind(delayInSeconds);
+}
+
+/* Keyframes for Spotlight */
+@keyframes spotlight-anim {
+  from {
+    width: 8rem;
+  }
+  to {
+    width: 16rem;
+  }
+}
+
+/* Keyframes for Glowing Line */
+@keyframes glowing-line-anim {
+  from {
+    width: 15rem;
+  }
+  to {
+    width: 30rem;
+  }
+}
+
+/* Keyframes for Conic Gradient */
+@keyframes conic-gradient-anim {
+  from {
+    opacity: 0.5;
+    width: 15rem;
+  }
+  to {
+    opacity: 1;
+    width: 30rem;
+  }
+}
+</style>

content/2.components/lamp-effect.md

@@ -0,0 +1,37 @@
+---
+title: Lamp Effect
+description: A captivating lamp lighting effect with conic gradients, spotlights, and glowing lines for an immersive visual experience.
+navBadges:
+  - value: New
+    type: lime
+---
+
+::ComponentLoader{label="Preview" componentName="LampEffectDemo" type="examples"}
+::
+
+## API
+
+| Prop Name  | Type     | Default  | Description                                          |
+| ---------- | -------- | -------- | ---------------------------------------------------- |
+| `delay`    | `number` | `0.5`    | Delay before the animation starts, in seconds.       |
+| `duration` | `number` | `0.8`    | Duration of the animation, in seconds.               |
+| `class`    | `string` | `""`     | Additional CSS classes for custom styling.           |
+
+## Component Code
+
+You can copy and paste the following code to create this component:
+
+::CodeViewer{filename="LampEffect.vue" language="vue" componentName="LampEffect" type="ui" id="lamp-effect"}
+::
+
+## Features
+
+- **Conic Gradient Animation**: Creates a smooth expanding conic gradient effect, giving a dynamic light-source appearance.
+- **Spotlight Animation**: The spotlight smoothly expands, providing a focused lighting effect.
+- **Glowing Line Effect**: A glowing line animates across the center, simulating a light beam or laser.
+- **Customizable Timing**: The `delay` and `duration` props allow for precise control of animation timings.
+- **Slot-Based Content**: Supports default slot content, making it easy to overlay text or other components.
+
+## Credits
+
+- Ported from [Aceternity UI](https://ui.aceternity.com/components/lamp-effect)

package.json

@@ -16,17 +16,17 @@
     "@vueuse/core": "^11.1.0",
     "@vueuse/motion": "^2.2.6",
     "canvas-confetti": "^1.9.3",
+    "class-variance-authority": "^0.7.0",
     "cobe": "^0.6.3",
     "highlight.js": "^11.10.0",
     "nuxt": "^3.13.2",
     "nuxt-gtag": "^3.0.1",
     "postprocessing": "^6.36.3",
-    "shadcn-docs-nuxt": "^0.6.5",
+    "shadcn-docs-nuxt": "^0.7.0",
     "three": "^0.169.0",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5",
-    "vue-use-spring": "^0.3.3",
-    "class-variance-authority": "^0.7.0"
+    "vue-use-spring": "^0.3.3"
   },
   "devDependencies": {
     "@iconify-json/vscode-icons": "^1.2.2",