nuxt-ui-elements 0.1.3 → 0.1.6

package/README.md

@@ -21,6 +21,7 @@ A collection of beautiful, animated UI components for Nuxt applications. Built w
 ## Features
 
 - ✨ **FlickeringGrid** - Animated canvas-based grid background with gradient effects
+- 🌟 **ShimmerButton** - Animated button with elegant shimmer effect
 - 🎨 **Dark Mode Support** - Automatic theme switching with customizable colors
 - 🚀 **Performance Optimized** - Uses IntersectionObserver and only animates when visible
 - 📦 **Auto-import** - Components are automatically available in your app
@@ -100,6 +101,92 @@ A beautiful animated grid background component perfect for hero sections and lan
 - `top-left-bottom-right`
 - `bottom-right-top-left`
 
+### ShimmerButton
+
+An animated button component with an elegant shimmer effect, perfect for call-to-action buttons and hero sections.
+
+```vue
+<template>
+  <UEButtonShimmer
+    label="Get Started"
+    size="lg"
+    shimmer-color="#60a5fa"
+    background="rgba(59, 130, 246, 1)"
+    :speed="2.5"
+    @click="handleClick"
+  />
+</template>
+```
+
+#### Props
+
+| Prop            | Type     | Default              | Description                                      |
+| --------------- | -------- | -------------------- | ------------------------------------------------ |
+| `label`         | `string` | -                    | Button label text                                |
+| `shimmerColor`  | `string` | `'#ffffff'`          | Color of the shimmer effect                      |
+| `shimmerSize`   | `string` | `'0.05em'`           | Size of the shimmer effect                       |
+| `speed`         | `number` | `3`                  | Animation speed in seconds (lower = faster)      |
+| `background`    | `string` | `'rgba(0, 0, 0, 1)'` | Background color of the button                   |
+| `radius`        | `string` | `'100px'`            | Border radius of the button                      |
+| `size`          | `string` | `'md'`               | Button size: `xs`, `sm`, `md`, `lg`, `xl`        |
+| `class`         | `string` | -                    | Additional CSS classes                           |
+| `ui`            | `object` | -                    | UI slot customization for advanced styling       |
+
+#### Slots
+
+- `leading` - Content before the label (e.g., icons)
+- `default` - Main button content (overrides `label` prop)
+- `trailing` - Content after the label (e.g., icons)
+
+#### Events
+
+- `click` - Emitted when the button is clicked
+
+#### Examples
+
+**Basic Usage:**
+```vue
+<UEButtonShimmer label="Click Me" />
+```
+
+**With Custom Colors:**
+```vue
+<UEButtonShimmer
+  label="Primary Action"
+  shimmer-color="#a78bfa"
+  background="rgba(139, 92, 246, 1)"
+/>
+```
+
+**Different Sizes:**
+```vue
+<UEButtonShimmer label="Small" size="sm" />
+<UEButtonShimmer label="Medium" size="md" />
+<UEButtonShimmer label="Large" size="lg" />
+<UEButtonShimmer label="Extra Large" size="xl" />
+```
+
+**With Slots:**
+```vue
+<UEButtonShimmer>
+  <template #leading>
+    <Icon name="i-heroicons-arrow-right" />
+  </template>
+  Get Started
+  <template #trailing>
+    <Icon name="i-heroicons-arrow-right" />
+  </template>
+</UEButtonShimmer>
+```
+
+**Fast Animation:**
+```vue
+<UEButtonShimmer
+  label="Fast Shimmer"
+  :speed="1.5"
+/>
+```
+
 ## Configuration
 
 You can customize the component prefix in your `nuxt.config.ts`:

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -19,10 +19,9 @@ const module$1 = defineNuxtModule({
       logger.error("[nuxt-ui-elements] @nuxt/ui is required. Please install it");
     }
     addComponentsDir({
-      path: resolver.resolve("./runtime/components/background"),
+      path: resolver.resolve("./runtime/components"),
       pathPrefix: false,
-      prefix: `${options.prefix}Background`,
-      global: true
+      prefix: options.prefix
     });
   }
 });

package/dist/runtime/components/backgrounds/BackgroundAurora.d.vue.ts

@@ -0,0 +1,137 @@
+import type { ColorInput } from "../../composables/useColorResolver.js";
+/**
+ * Aurora - An animated aurora background component with gradient effects
+ *
+ * A beautiful CSS-based gradient animation that creates flowing aurora-like effects.
+ * Perfect for hero sections, landing pages, or anywhere you want eye-catching backgrounds.
+ */
+export type AuroraVariant = "calm" | "energetic" | "cosmic";
+export interface AuroraProps {
+    /**
+     * Pin the aurora to a specific corner or edge of the container.
+     *
+     * When set, creates a radial mask that constrains the aurora effect to originate from
+     * the specified position, creating a spotlight or glow effect from that corner/edge.
+     *
+     * When undefined, aurora flows freely across the entire container without masking.
+     *
+     * Use cases:
+     * - 'top-right': Glow from top-right corner (perfect for hero sections)
+     * - 'bottom-left': Accent from bottom corner
+     * - 'top': Top edge glow (header backgrounds)
+     * - undefined: Full-screen flowing effect (landing pages)
+     *
+     * @default 'top-right'
+     */
+    pin?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Color for the aurora gradient. Supports:
+     * - Nuxt UI semantic: 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'
+     * - Tailwind colors: 'blue-500', 'red-600', 'purple-400', etc.
+     * - Direct values: '#3b82f6', 'oklch(0.6 0.15 250)', 'rgb(59, 130, 246)'
+     *
+     * The component automatically generates multiple gradient shades from this base color
+     * with different lightness values for a rich, multi-tone aurora effect.
+     *
+     * @example 'primary' - Uses Nuxt UI theme primary color
+     * @example 'purple-500' - Tailwind purple
+     * @example '#8b5cf6' - Direct hex value
+     *
+     * @default 'primary'
+     */
+    color?: ColorInput;
+    /**
+     * Speed of the aurora animation (0-100, where 100 is fastest).
+     *
+     * Controls how quickly the aurora gradient flows across the screen.
+     * - 0: Paused (no animation)
+     * - 1-30: Slow, calm movement
+     * - 40-60: Medium, steady flow
+     * - 70-100: Fast, energetic motion
+     *
+     * Range: 0-100
+     * @default 50
+     */
+    speed?: number;
+    /**
+     * Opacity/visibility of the aurora effect (0-100).
+     *
+     * Controls the overall transparency of the aurora gradient overlay.
+     * Does NOT affect blur amount - use `variant` for preset blur configurations.
+     *
+     * - 0: Completely invisible
+     * - 30: Subtle, gentle glow
+     * - 50: Balanced visibility
+     * - 80-100: Bold, prominent effect
+     *
+     * Range: 0-100
+     * @default 50
+     */
+    opacity?: number;
+    /**
+     * Lightness adjustment for the base color in OKLCH color space (0-100).
+     *
+     * Controls the brightness/saturation of the generated gradient colors.
+     * - Lower values (30-50): Darker, more saturated colors (better for dark mode)
+     * - Higher values (60-80): Lighter, pastel colors (better for light mode)
+     *
+     * The component automatically adjusts this for dark mode, but you can override
+     * using the `dark` prop for custom dark mode appearance.
+     *
+     * Range: 0-100
+     * @default 70 (light mode), 40 (dark mode)
+     */
+    lightness?: number;
+    /**
+     * Dark mode overrides for color, lightness, and opacity.
+     *
+     * Allows you to customize the aurora appearance specifically for dark mode.
+     * Any property not specified will use the default light mode value.
+     *
+     * @example { color: 'blue-400', lightness: 30, opacity: 60 }
+     */
+    dark?: {
+        color?: ColorInput;
+        lightness?: number;
+        opacity?: number;
+    };
+    /**
+     * Animation style variant with preset configurations.
+     *
+     * When set, overrides `speed`, `opacity`, and blur settings with carefully tuned presets.
+     * - 'calm': Slow, gentle, heavily blurred (meditative feel)
+     * - 'energetic': Fast, vibrant, lightly blurred (dynamic feel)
+     * - 'cosmic': Medium speed, high opacity, moderate blur (space-like effect)
+     *
+     * Leave undefined to manually control speed and opacity.
+     */
+    variant?: AuroraVariant;
+    /**
+     * Reverse the animation direction.
+     *
+     * When true, the aurora flows in the opposite direction.
+     *
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Additional CSS classes for the container element.
+     */
+    class?: any;
+}
+export interface AuroraSlots {
+    /**
+     * Default slot content rendered on top of the aurora background.
+     *
+     * Content is positioned with z-index above the aurora effect.
+     */
+    default(): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AuroraProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/backgrounds/BackgroundAurora.vue

@@ -0,0 +1,147 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed, ref, onMounted, watch } from "vue";
+import { useColorMode } from "#imports";
+import { resolveColor } from "../../composables/useColorResolver";
+import {
+  adjustLightness,
+  oklchToRgb
+} from "../../composables/useThemeColors";
+import { createRepeatingGradient } from "../../composables/useGradient";
+const {
+  pin = "top-right",
+  color = "primary",
+  speed = 50,
+  opacity = 50,
+  lightness = 70,
+  reverse = false,
+  ...props
+} = defineProps({
+  pin: { type: String, required: false },
+  color: { type: null, required: false },
+  speed: { type: Number, required: false },
+  opacity: { type: Number, required: false },
+  lightness: { type: Number, required: false },
+  dark: { type: Object, required: false },
+  variant: { type: String, required: false },
+  reverse: { type: Boolean, required: false },
+  class: { type: null, required: false }
+});
+defineSlots();
+const isDark = ref(false);
+onMounted(() => {
+  const colorMode = useColorMode();
+  isDark.value = colorMode.value === "dark";
+  watch(
+    () => colorMode.value,
+    (newValue) => {
+      isDark.value = newValue === "dark";
+    }
+  );
+});
+const variants = {
+  calm: { speed: 20, opacity: 30, blur: 15 },
+  energetic: { speed: 80, opacity: 70, blur: 8 },
+  cosmic: { speed: 50, opacity: 90, blur: 12 }
+};
+const effectiveSpeed = computed(
+  () => props.variant ? variants[props.variant].speed : speed
+);
+const effectiveOpacity = computed(
+  () => props.variant ? variants[props.variant].opacity : opacity
+);
+const effectiveBlur = computed(
+  () => props.variant ? variants[props.variant].blur : 10
+);
+const effectiveColor = computed(
+  () => isDark.value && props.dark?.color ? props.dark.color : color
+);
+const effectiveLightness = computed(
+  () => isDark.value && props.dark?.lightness !== void 0 ? props.dark.lightness : isDark.value ? 40 : lightness
+);
+const effectiveOpacityValue = computed(
+  () => isDark.value && props.dark?.opacity !== void 0 ? props.dark.opacity : effectiveOpacity.value
+);
+const baseColor = computed(() => resolveColor(effectiveColor.value));
+const auroraColors = computed(() => {
+  const base = baseColor.value;
+  const baseLightness = effectiveLightness.value;
+  return [
+    oklchToRgb(adjustLightness(base, baseLightness - 10)),
+    oklchToRgb(adjustLightness(base, baseLightness + 5)),
+    oklchToRgb(adjustLightness(base, baseLightness)),
+    oklchToRgb(adjustLightness(base, baseLightness + 10)),
+    oklchToRgb(adjustLightness(base, baseLightness - 5))
+  ];
+});
+const auroraGradient = computed(
+  () => createRepeatingGradient(auroraColors.value, 100)
+);
+const animationDuration = computed(() => {
+  const clampedSpeed = Math.max(1, Math.min(100, effectiveSpeed.value));
+  const duration = 120 - clampedSpeed * 0.9;
+  return `${duration}s`;
+});
+const animationState = computed(
+  () => effectiveSpeed.value === 0 ? "paused" : "running"
+);
+const animationDirection = computed(() => reverse ? "reverse" : "normal");
+const auroraOpacityValue = computed(() => {
+  const clampedOpacity = Math.max(
+    0,
+    Math.min(100, effectiveOpacityValue.value)
+  );
+  return clampedOpacity / 100;
+});
+const auroraBlur = computed(() => `${effectiveBlur.value}px`);
+const lineColor = computed(() => isDark.value ? "#000" : "#fff");
+const lineColorAfter = computed(
+  () => isDark.value ? "rgba(0, 0, 0, 0.3)" : "#fff"
+);
+const filterInvert = computed(() => isDark.value ? "invert(0)" : "invert(1)");
+const afterOpacity = computed(() => isDark.value ? 0.3 : 1);
+const maskGradient = computed(() => {
+  if (!pin) return void 0;
+  const positions = {
+    "top-left": "ellipse at 0% 0%",
+    "top-right": "ellipse at 100% 0%",
+    "bottom-left": "ellipse at 0% 100%",
+    "bottom-right": "ellipse at 100% 100%",
+    top: "ellipse at 50% 0%",
+    bottom: "ellipse at 50% 100%",
+    left: "ellipse at 0% 50%",
+    right: "ellipse at 100% 50%"
+  };
+  return `radial-gradient(${positions[pin]}, black 10%, transparent 70%)`;
+});
+</script>
+
+<template>
+  <div
+    class="relative flex h-full w-full items-center justify-center bg-zinc-50 text-slate-950 transition-bg dark:bg-zinc-900"
+    :class="props.class"
+  >
+    <div
+      class="absolute inset-0 overflow-hidden"
+      :style="maskGradient ? { maskImage: maskGradient } : {}"
+    >
+      <ClientOnly>
+        <div
+          class="aurora-effect pointer-events-none absolute -inset-2.5 h-full w-full will-change-transform animate-in fade-in duration-1000"
+          :style="{ opacity: auroraOpacityValue }"
+        />
+      </ClientOnly>
+    </div>
+
+    <div class="relative z-10">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.aurora-effect{background-image:repeating-linear-gradient(100deg,v-bind(lineColor),v-bind(lineColor) 7%,transparent 10%,transparent 12%,v-bind(lineColor) 16%),v-bind(auroraGradient);background-size:200%,100%;filter:blur(v-bind(auroraBlur)) v-bind(filterInvert)}.aurora-effect,.aurora-effect:after{animation:aurora v-bind(animationDuration) linear infinite;animation-direction:v-bind(animationDirection);animation-play-state:v-bind(animationState);background-position:50% 50%,50% 50%}.aurora-effect:after{background-attachment:fixed;background-image:repeating-linear-gradient(100deg,v-bind(lineColorAfter),v-bind(lineColorAfter) 7%,transparent 10%,transparent 12%,v-bind(lineColorAfter) 16%),v-bind(auroraGradient);background-size:180%,100%;content:"";inset:0;mix-blend-mode:difference;opacity:v-bind(afterOpacity);position:absolute}@keyframes aurora{0%{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}
+</style>

package/dist/runtime/components/backgrounds/BackgroundAurora.vue.d.ts

@@ -0,0 +1,137 @@
+import type { ColorInput } from "../../composables/useColorResolver.js";
+/**
+ * Aurora - An animated aurora background component with gradient effects
+ *
+ * A beautiful CSS-based gradient animation that creates flowing aurora-like effects.
+ * Perfect for hero sections, landing pages, or anywhere you want eye-catching backgrounds.
+ */
+export type AuroraVariant = "calm" | "energetic" | "cosmic";
+export interface AuroraProps {
+    /**
+     * Pin the aurora to a specific corner or edge of the container.
+     *
+     * When set, creates a radial mask that constrains the aurora effect to originate from
+     * the specified position, creating a spotlight or glow effect from that corner/edge.
+     *
+     * When undefined, aurora flows freely across the entire container without masking.
+     *
+     * Use cases:
+     * - 'top-right': Glow from top-right corner (perfect for hero sections)
+     * - 'bottom-left': Accent from bottom corner
+     * - 'top': Top edge glow (header backgrounds)
+     * - undefined: Full-screen flowing effect (landing pages)
+     *
+     * @default 'top-right'
+     */
+    pin?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Color for the aurora gradient. Supports:
+     * - Nuxt UI semantic: 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'
+     * - Tailwind colors: 'blue-500', 'red-600', 'purple-400', etc.
+     * - Direct values: '#3b82f6', 'oklch(0.6 0.15 250)', 'rgb(59, 130, 246)'
+     *
+     * The component automatically generates multiple gradient shades from this base color
+     * with different lightness values for a rich, multi-tone aurora effect.
+     *
+     * @example 'primary' - Uses Nuxt UI theme primary color
+     * @example 'purple-500' - Tailwind purple
+     * @example '#8b5cf6' - Direct hex value
+     *
+     * @default 'primary'
+     */
+    color?: ColorInput;
+    /**
+     * Speed of the aurora animation (0-100, where 100 is fastest).
+     *
+     * Controls how quickly the aurora gradient flows across the screen.
+     * - 0: Paused (no animation)
+     * - 1-30: Slow, calm movement
+     * - 40-60: Medium, steady flow
+     * - 70-100: Fast, energetic motion
+     *
+     * Range: 0-100
+     * @default 50
+     */
+    speed?: number;
+    /**
+     * Opacity/visibility of the aurora effect (0-100).
+     *
+     * Controls the overall transparency of the aurora gradient overlay.
+     * Does NOT affect blur amount - use `variant` for preset blur configurations.
+     *
+     * - 0: Completely invisible
+     * - 30: Subtle, gentle glow
+     * - 50: Balanced visibility
+     * - 80-100: Bold, prominent effect
+     *
+     * Range: 0-100
+     * @default 50
+     */
+    opacity?: number;
+    /**
+     * Lightness adjustment for the base color in OKLCH color space (0-100).
+     *
+     * Controls the brightness/saturation of the generated gradient colors.
+     * - Lower values (30-50): Darker, more saturated colors (better for dark mode)
+     * - Higher values (60-80): Lighter, pastel colors (better for light mode)
+     *
+     * The component automatically adjusts this for dark mode, but you can override
+     * using the `dark` prop for custom dark mode appearance.
+     *
+     * Range: 0-100
+     * @default 70 (light mode), 40 (dark mode)
+     */
+    lightness?: number;
+    /**
+     * Dark mode overrides for color, lightness, and opacity.
+     *
+     * Allows you to customize the aurora appearance specifically for dark mode.
+     * Any property not specified will use the default light mode value.
+     *
+     * @example { color: 'blue-400', lightness: 30, opacity: 60 }
+     */
+    dark?: {
+        color?: ColorInput;
+        lightness?: number;
+        opacity?: number;
+    };
+    /**
+     * Animation style variant with preset configurations.
+     *
+     * When set, overrides `speed`, `opacity`, and blur settings with carefully tuned presets.
+     * - 'calm': Slow, gentle, heavily blurred (meditative feel)
+     * - 'energetic': Fast, vibrant, lightly blurred (dynamic feel)
+     * - 'cosmic': Medium speed, high opacity, moderate blur (space-like effect)
+     *
+     * Leave undefined to manually control speed and opacity.
+     */
+    variant?: AuroraVariant;
+    /**
+     * Reverse the animation direction.
+     *
+     * When true, the aurora flows in the opposite direction.
+     *
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Additional CSS classes for the container element.
+     */
+    class?: any;
+}
+export interface AuroraSlots {
+    /**
+     * Default slot content rendered on top of the aurora background.
+     *
+     * Content is positioned with z-index above the aurora effect.
+     */
+    default(): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AuroraProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/{background/FlickeringGrid.vue.d.ts → backgrounds/BackgroundFlickeringGrid.d.vue.ts}

@@ -35,41 +35,68 @@ export interface FlickeringGridProps {
      * - Tailwind colors: 'blue-500', 'red-600', 'slate-200', etc.
      * - Direct values: '#3b82f6', 'oklch(0.6 0.15 250)', 'rgb(59, 130, 246)'
      *
-     * Choose lighter shades (e.g., 'blue-200') for subtle backgrounds or darker shades (e.g., 'blue-600') for bolder effects.
+     * This controls the base hue/color of the grid. Use `lightness` to adjust how bright/washed out it appears.
      *
      * @example 'primary' - Nuxt UI semantic color
-     * @example 'blue-200' - Light Tailwind color for subtle effect
-     * @example 'blue-600' - Dark Tailwind color for bold effect
-     * @example '#e0f2fe' - Direct hex color value (light blue)
+     * @example 'blue-500' - Tailwind color
+     * @example '#3b82f6' - Direct hex color value
      *
      * @default 'neutral'
      */
     color?: ColorInput;
     /**
-     * Opacity/visibility of the grid squares.
-     * Controls how transparent the grid appears.
+     * Lightness adjustment in OKLCH color space (0-100).
      *
-     * - 0: Completely invisible
-     * - 0.3: Subtle, background texture
-     * - 0.5: Medium visibility
-     * - 0.8: Bold, prominent
-     * - 1: Fully opaque
+     * Controls how bright or washed-out the color appears WITHOUT changing transparency.
+     * This modifies the color itself, making it closer to white (higher values) or more saturated (lower values).
      *
-     * Range: 0-1
+     * Think of it as a "color brightness" slider:
+     * - Lower values (70-80): Darker, more saturated, vibrant colors
+     * - Medium values (85-92): Balanced, natural colors
+     * - Higher values (93-100): Very light, pastel, washed-out colors (approaching white)
      *
-     * @default 0.5
+     * Use cases:
+     * - Subtle background: `color="blue-500" lightness={95}` → Very light blue tint
+     * - Bold accent: `color="blue-500" lightness={75}` → Vibrant, saturated blue
+     * - Combined with opacity: `lightness={90} opacity={0.3}` → Medium-tone color, very transparent
+     *
+     * Range: 0-100
+     * @default 95
+     */
+    lightness?: number;
+    /**
+     * Opacity/transparency of the grid squares (0-100).
+     *
+     * Controls how see-through the grid is WITHOUT changing the color itself.
+     * This is pure transparency - the color stays the same, just more/less visible.
+     *
+     * Think of it as a "visibility" slider:
+     * - 0: Completely invisible (transparent)
+     * - 30: Very subtle, barely visible
+     * - 50: Medium visibility
+     * - 80: Bold, prominent
+     * - 100: Fully opaque, no transparency
+     *
+     * Use cases:
+     * - Gentle texture: `opacity={20}` → Barely visible background pattern
+     * - Strong effect: `opacity={80}` → Prominent, eye-catching grid
+     * - Combined with lightness: `lightness={95} opacity={50}` → Light color, medium transparency
+     *
+     * Range: 0-100
+     * @default 50
      */
     opacity?: number;
     /**
-     * Dark mode overrides for color and opacity.
+     * Dark mode overrides for color, lightness, and opacity.
      *
      * Allows you to customize the grid appearance specifically for dark mode.
      * Any property not specified will use the default light mode value.
      *
-     * @example { color: 'blue-300', opacity: 0.3 }
+     * @example { color: 'blue-300', lightness: 90, opacity: 0.3 }
      */
     dark?: {
         color?: ColorInput;
+        lightness?: number;
         opacity?: number;
     };
     /**

package/dist/runtime/components/{background/FlickeringGrid.vue → backgrounds/BackgroundFlickeringGrid.vue}

@@ -7,7 +7,7 @@ import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
 import { useColorMode } from "#imports";
 import { tv } from "../../utils/tv";
 import theme from "../../themes/background-flickering-grid";
-import { darkenColor, oklchToRgb } from "../../composables/useThemeColors";
+import { adjustLightness, darkenColor, oklchToRgb } from "../../composables/useThemeColors";
 import {
   resolveColor
 } from "../../composables/useColorResolver";
@@ -16,7 +16,8 @@ const {
   gap = 9,
   speed = 5,
   color = "neutral",
-  opacity = 0.5,
+  lightness = 95,
+  opacity = 50,
   ...props
 } = defineProps({
   size: { type: Number, required: false },
@@ -24,6 +25,7 @@ const {
   speed: { type: Number, required: false },
   fade: { type: String, required: false },
   color: { type: null, required: false },
+  lightness: { type: Number, required: false },
   opacity: { type: Number, required: false },
   dark: { type: Object, required: false },
   ui: { type: null, required: false }
@@ -36,11 +38,15 @@ const effectiveColor = computed(() => {
   }
   return color;
 });
-const effectiveOpacity = computed(() => {
-  if (isDark.value && props.dark?.opacity !== void 0) {
-    return props.dark.opacity;
+const effectiveLightness = computed(() => {
+  if (isDark.value && props.dark?.lightness !== void 0) {
+    return props.dark.lightness;
   }
-  return opacity;
+  return lightness;
+});
+const effectiveOpacity = computed(() => {
+  const opacityValue = isDark.value && props.dark?.opacity !== void 0 ? props.dark.opacity : opacity;
+  return opacityValue / 100;
 });
 const internalSpeed = computed(() => {
   return speed * 0.01;
@@ -88,8 +94,9 @@ function parseColor(color2) {
 }
 const gridColors = computed(() => {
   const baseColor = resolveColor(effectiveColor.value);
-  const baseRgb = oklchToRgb(baseColor);
-  const darkerColor = darkenColor(baseColor, 10);
+  const adjustedColor = adjustLightness(baseColor, effectiveLightness.value);
+  const baseRgb = oklchToRgb(adjustedColor);
+  const darkerColor = darkenColor(adjustedColor, 10);
   const flickerRgb = oklchToRgb(darkerColor);
   return {
     base: parseColor(baseRgb),
@@ -218,8 +225,10 @@ watch(
     () => size,
     () => gap,
     () => color,
+    () => lightness,
     () => opacity,
     () => props.dark?.color,
+    () => props.dark?.lightness,
     () => props.dark?.opacity
   ],
   () => {

package/dist/runtime/components/{background/FlickeringGrid.d.vue.ts → backgrounds/BackgroundFlickeringGrid.vue.d.ts}

@@ -35,41 +35,68 @@ export interface FlickeringGridProps {
      * - Tailwind colors: 'blue-500', 'red-600', 'slate-200', etc.
      * - Direct values: '#3b82f6', 'oklch(0.6 0.15 250)', 'rgb(59, 130, 246)'
      *
-     * Choose lighter shades (e.g., 'blue-200') for subtle backgrounds or darker shades (e.g., 'blue-600') for bolder effects.
+     * This controls the base hue/color of the grid. Use `lightness` to adjust how bright/washed out it appears.
      *
      * @example 'primary' - Nuxt UI semantic color
-     * @example 'blue-200' - Light Tailwind color for subtle effect
-     * @example 'blue-600' - Dark Tailwind color for bold effect
-     * @example '#e0f2fe' - Direct hex color value (light blue)
+     * @example 'blue-500' - Tailwind color
+     * @example '#3b82f6' - Direct hex color value
      *
      * @default 'neutral'
      */
     color?: ColorInput;
     /**
-     * Opacity/visibility of the grid squares.
-     * Controls how transparent the grid appears.
+     * Lightness adjustment in OKLCH color space (0-100).
      *
-     * - 0: Completely invisible
-     * - 0.3: Subtle, background texture
-     * - 0.5: Medium visibility
-     * - 0.8: Bold, prominent
-     * - 1: Fully opaque
+     * Controls how bright or washed-out the color appears WITHOUT changing transparency.
+     * This modifies the color itself, making it closer to white (higher values) or more saturated (lower values).
      *
-     * Range: 0-1
+     * Think of it as a "color brightness" slider:
+     * - Lower values (70-80): Darker, more saturated, vibrant colors
+     * - Medium values (85-92): Balanced, natural colors
+     * - Higher values (93-100): Very light, pastel, washed-out colors (approaching white)
      *
-     * @default 0.5
+     * Use cases:
+     * - Subtle background: `color="blue-500" lightness={95}` → Very light blue tint
+     * - Bold accent: `color="blue-500" lightness={75}` → Vibrant, saturated blue
+     * - Combined with opacity: `lightness={90} opacity={0.3}` → Medium-tone color, very transparent
+     *
+     * Range: 0-100
+     * @default 95
+     */
+    lightness?: number;
+    /**
+     * Opacity/transparency of the grid squares (0-100).
+     *
+     * Controls how see-through the grid is WITHOUT changing the color itself.
+     * This is pure transparency - the color stays the same, just more/less visible.
+     *
+     * Think of it as a "visibility" slider:
+     * - 0: Completely invisible (transparent)
+     * - 30: Very subtle, barely visible
+     * - 50: Medium visibility
+     * - 80: Bold, prominent
+     * - 100: Fully opaque, no transparency
+     *
+     * Use cases:
+     * - Gentle texture: `opacity={20}` → Barely visible background pattern
+     * - Strong effect: `opacity={80}` → Prominent, eye-catching grid
+     * - Combined with lightness: `lightness={95} opacity={50}` → Light color, medium transparency
+     *
+     * Range: 0-100
+     * @default 50
      */
     opacity?: number;
     /**
-     * Dark mode overrides for color and opacity.
+     * Dark mode overrides for color, lightness, and opacity.
      *
      * Allows you to customize the grid appearance specifically for dark mode.
      * Any property not specified will use the default light mode value.
      *
-     * @example { color: 'blue-300', opacity: 0.3 }
+     * @example { color: 'blue-300', lightness: 90, opacity: 0.3 }
      */
     dark?: {
         color?: ColorInput;
+        lightness?: number;
         opacity?: number;
     };
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",
@@ -55,7 +55,7 @@
     "lint:fix": "oxlint --fix --type-aware",
     "format": "oxfmt --write",
     "format:check": "oxfmt --check",
-    "release": "pnpm lint && pnpm test && pnpm prepack && changelogen --release",
+    "release": "pnpm lint && pnpm test && pnpm prepack && changelogen --release && pnpm publish && git push --follow-tags",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"

package/dist/runtime/components/background/Aurora.d.vue.ts

@@ -1,62 +0,0 @@
-/**
- * Aurora - An animated aurora background component with gradient effects
- */
-export type AuroraVariant = "calm" | "energetic" | "cosmic";
-export interface AuroraProps {
-    /**
-     * Pin the aurora to a specific corner or edge
-     * If undefined, aurora flows across the entire screen without mask
-     * @default 'top-right'
-     */
-    pin?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    /**
-     * Color variant
-     * @default 'primary'
-     */
-    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
-    /**
-     * Speed of the animation (0-100, where 100 is fastest)
-     * @default 50
-     */
-    speed?: number;
-    /**
-     * Intensity of the aurora effect (0-100)
-     * Controls opacity and blur
-     * @default 50
-     */
-    intensity?: number;
-    /**
-     * Animation style variant
-     * Overrides speed and intensity when set
-     */
-    variant?: AuroraVariant;
-    /**
-     * Reverse the animation direction
-     * @default false
-     */
-    reverse?: boolean;
-    /**
-     * Additional CSS classes for the container
-     */
-    class?: any;
-}
-export interface AuroraSlots {
-    /**
-     * Default slot content rendered on top of the aurora
-     */
-    default(): any;
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AuroraProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {
-    pin: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
-    speed: number;
-    intensity: number;
-    reverse: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/background/Aurora.vue

@@ -1,120 +0,0 @@
-<script>
-
-</script>
-
-<script setup>
-import { computed } from "vue";
-import {
-  adjustLightness,
-  getThemeColor,
-  oklchToRgb
-} from "../../composables/useThemeColors";
-import { createRepeatingGradient } from "../../composables/useGradient";
-const props = defineProps({
-  pin: { type: String, required: false, default: "top-right" },
-  color: { type: String, required: false, default: "primary" },
-  speed: { type: Number, required: false, default: 50 },
-  intensity: { type: Number, required: false, default: 50 },
-  variant: { type: String, required: false },
-  reverse: { type: Boolean, required: false, default: false },
-  class: { type: null, required: false }
-});
-defineSlots();
-const variants = {
-  calm: { speed: 20, intensity: 30, blur: 15 },
-  energetic: { speed: 80, intensity: 70, blur: 8 },
-  cosmic: { speed: 50, intensity: 90, blur: 12 }
-};
-const effectiveSpeed = computed(
-  () => props.variant ? variants[props.variant].speed : props.speed
-);
-const effectiveIntensity = computed(
-  () => props.variant ? variants[props.variant].intensity : props.intensity
-);
-const effectiveBlur = computed(
-  () => props.variant ? variants[props.variant].blur : 10
-);
-const baseColor = computed(() => getThemeColor(props.color, 500));
-const auroraColors = computed(() => {
-  const base = baseColor.value;
-  return [
-    oklchToRgb(adjustLightness(base, 60)),
-    oklchToRgb(adjustLightness(base, 75)),
-    oklchToRgb(adjustLightness(base, 70)),
-    oklchToRgb(adjustLightness(base, 80)),
-    oklchToRgb(adjustLightness(base, 65))
-  ];
-});
-const auroraColorsDark = computed(() => {
-  const base = baseColor.value;
-  return [
-    oklchToRgb(adjustLightness(base, 30)),
-    oklchToRgb(adjustLightness(base, 45)),
-    oklchToRgb(adjustLightness(base, 40)),
-    oklchToRgb(adjustLightness(base, 50)),
-    oklchToRgb(adjustLightness(base, 35))
-  ];
-});
-const auroraGradient = computed(
-  () => createRepeatingGradient(auroraColors.value, 100)
-);
-const auroraGradientDark = computed(
-  () => createRepeatingGradient(auroraColorsDark.value, 100)
-);
-const animationDuration = computed(() => {
-  const clampedSpeed = Math.max(1, Math.min(100, effectiveSpeed.value));
-  const duration = 120 - clampedSpeed * 0.9;
-  return `${duration}s`;
-});
-const animationState = computed(
-  () => effectiveSpeed.value === 0 ? "paused" : "running"
-);
-const animationDirection = computed(
-  () => props.reverse ? "reverse" : "normal"
-);
-const auroraOpacity = computed(() => {
-  const clampedIntensity = Math.max(0, Math.min(100, effectiveIntensity.value));
-  return clampedIntensity / 100;
-});
-const auroraBlur = computed(() => `${effectiveBlur.value}px`);
-const maskGradient = computed(() => {
-  if (!props.pin) return void 0;
-  const positions = {
-    "top-left": "ellipse at 0% 0%",
-    "top-right": "ellipse at 100% 0%",
-    "bottom-left": "ellipse at 0% 100%",
-    "bottom-right": "ellipse at 100% 100%",
-    top: "ellipse at 50% 0%",
-    bottom: "ellipse at 50% 100%",
-    left: "ellipse at 0% 50%",
-    right: "ellipse at 100% 50%"
-  };
-  return `radial-gradient(${positions[props.pin]}, black 10%, transparent 70%)`;
-});
-</script>
-
-<template>
-  <div
-    class="relative flex h-full w-full items-center justify-center bg-zinc-50 text-slate-950 transition-bg dark:bg-zinc-900"
-  >
-    <div
-      class="absolute inset-0 overflow-hidden"
-      :style="maskGradient ? { maskImage: maskGradient } : {}"
-    >
-      <ClientOnly>
-        <div
-          class="aurora-effect pointer-events-none absolute -inset-2.5 h-full w-full will-change-transform animate-in fade-in duration-1000"
-          :style="{ opacity: auroraOpacity }"
-        />
-      </ClientOnly>
-    </div>
-
-    <div class="relative z-10">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.aurora-effect{background-size:200%,100%;filter:blur(v-bind(auroraBlur)) invert(1)}.aurora-effect,.aurora-effect:after{animation:aurora v-bind(animationDuration) linear infinite;animation-direction:v-bind(animationDirection);animation-play-state:v-bind(animationState);background-image:repeating-linear-gradient(100deg,#fff,#fff 7%,transparent 10%,transparent 12%,#fff 16%),v-bind(auroraGradient);background-position:50% 50%,50% 50%}.aurora-effect:after{background-attachment:fixed;background-size:180%,100%;content:"";inset:0;mix-blend-mode:difference;position:absolute}:global(.dark) .aurora-effect{background-image:repeating-linear-gradient(100deg,#000,#000 7%,transparent 10%,transparent 12%,#000 16%),v-bind(auroraGradientDark);filter:blur(10px) invert(0)}:global(.dark) .aurora-effect:after{background-image:repeating-linear-gradient(100deg,rgba(0,0,0,.3),rgba(0,0,0,.3) 7%,transparent 10%,transparent 12%,rgba(0,0,0,.3) 16%),v-bind(auroraGradientDark);opacity:.3}@keyframes aurora{0%{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}
-</style>

package/dist/runtime/components/background/Aurora.vue.d.ts

@@ -1,62 +0,0 @@
-/**
- * Aurora - An animated aurora background component with gradient effects
- */
-export type AuroraVariant = "calm" | "energetic" | "cosmic";
-export interface AuroraProps {
-    /**
-     * Pin the aurora to a specific corner or edge
-     * If undefined, aurora flows across the entire screen without mask
-     * @default 'top-right'
-     */
-    pin?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    /**
-     * Color variant
-     * @default 'primary'
-     */
-    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
-    /**
-     * Speed of the animation (0-100, where 100 is fastest)
-     * @default 50
-     */
-    speed?: number;
-    /**
-     * Intensity of the aurora effect (0-100)
-     * Controls opacity and blur
-     * @default 50
-     */
-    intensity?: number;
-    /**
-     * Animation style variant
-     * Overrides speed and intensity when set
-     */
-    variant?: AuroraVariant;
-    /**
-     * Reverse the animation direction
-     * @default false
-     */
-    reverse?: boolean;
-    /**
-     * Additional CSS classes for the container
-     */
-    class?: any;
-}
-export interface AuroraSlots {
-    /**
-     * Default slot content rendered on top of the aurora
-     */
-    default(): any;
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AuroraProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {
-    pin: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
-    speed: number;
-    intensity: number;
-    reverse: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};