Backgrounds

Directional Light

SVG-based directional light effect with customizable colors and positioning.

The DirectionalLight component creates an SVG-based directional light effect that can be used to add ambient lighting to your UI. It features customizable colors, positioning, and smooth animations.

Usage

Directional Light

Multiple directional lights with different colors and positions

<template>
  <div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800">
    <MDirectionalLight
      class="left-0 top-0"
      fill="#3B82F6"
    />
    <MDirectionalLight
      class="left-1/3 top-1/4"
      fill="#8B5CF6"
    />
    <MDirectionalLight
      class="left-2/3 top-1/2"
      fill="#EF4444"
    />
    <div class="relative z-10 h-full flex flex-col items-center justify-center text-center p-4">
      <h3 class="text-2xl font-bold text-highlighted mb-2">
        Directional Light
      </h3>
      <p class="text-default">
        Multiple directional lights with different colors and positions
      </p>
    </div>
  </div>
</template>

Examples

Basic Directional Light

Lighting Effects

Directional Light Showcase

Create realistic lighting effects with directional light sources that illuminate your content and add depth to your UI

Dynamic Lighting

Realistic lighting effects that respond to user interactions and create immersive experiences

Lighting Controls

Intensity75%

Angle45°

Color TemperatureWarm

Use Cases

Product Showcases

Highlight products with realistic lighting

Interactive Elements

Create depth and focus for UI components

Visual Storytelling

Enhance narratives with dynamic lighting effects

<template>
  <div class="p-8 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 rounded-2xl">
    <div class="max-w-4xl mx-auto text-center mb-8">
      <div class="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 dark:bg-primary/30 rounded-full mb-4">
        <UIcon
          name="i-lucide-sun"
          class="w-5 h-5 text-primary"
        />
        <span class="text-primary font-medium">Lighting Effects</span>
      </div>
      <h2 class="text-3xl font-bold text-highlighted mb-4">
        Directional Light Showcase
      </h2>
      <p class="text-muted max-w-2xl mx-auto">
        Create realistic lighting effects with directional light sources that illuminate your content and add depth to your UI
      </p>
    </div>

    <div class="bg-default rounded-2xl shadow-xl p-6 max-w-4xl mx-auto border border-default">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="relative h-80 w-full overflow-hidden rounded-xl bg-gradient-to-br from-gray-50 to-gray-100 dark:from-slate-900 dark:to-slate-800 border border-default">
          <MDirectionalLight class="absolute inset-0" />
          <div class="relative z-10 h-full flex flex-col items-center justify-center text-center p-6">
            <div class="mb-6">
              <div class="w-20 h-20 rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 flex items-center justify-center mx-auto shadow-lg">
                <UIcon
                  name="i-lucide-sun"
                  class="w-10 h-10 text-white"
                />
              </div>
            </div>
            <h3 class="text-2xl font-bold text-highlighted mb-4">
              Dynamic Lighting
            </h3>
            <p class="text-default max-w-md mb-6">
              Realistic lighting effects that respond to user interactions and create immersive experiences
            </p>
            <UButton
              color="primary"
              variant="solid"
              size="md"
            >
              <UIcon
                name="i-lucide-sliders"
                class="w-4 h-4 mr-2"
              />
              Adjust Lighting
            </UButton>
          </div>
        </div>

        <div class="space-y-6">
          <UCard>
            <h3 class="text-xl font-bold text-highlighted mb-3">
              Lighting Controls
            </h3>
            <div class="space-y-4">
              <div>
                <div class="flex justify-between mb-2">
                  <span class="text-default">Intensity</span>
                  <span class="text-highlighted font-medium">75%</span>
                </div>
                <input
                  type="range"
                  min="0"
                  max="100"
                  value="75"
                  class="w-full h-2 bg-accented rounded-lg appearance-none cursor-pointer"
                >
              </div>

              <div>
                <div class="flex justify-between mb-2">
                  <span class="text-default">Angle</span>
                  <span class="text-highlighted font-medium">45°</span>
                </div>
                <input
                  type="range"
                  min="0"
                  max="360"
                  value="45"
                  class="w-full h-2 bg-accented rounded-lg appearance-none cursor-pointer"
                >
              </div>

              <div>
                <div class="flex justify-between mb-2">
                  <span class="text-default">Color Temperature</span>
                  <span class="text-highlighted font-medium">Warm</span>
                </div>
                <div class="flex gap-2">
                  <div class="w-8 h-8 rounded-full bg-primary/40 cursor-pointer border-2 border-transparent hover:border-primary" />
                  <div class="w-8 h-8 rounded-full bg-yellow-400 cursor-pointer border-2 border-yellow-600" />
                  <div class="w-8 h-8 rounded-full bg-orange-400 cursor-pointer border-2 border-transparent hover:border-orange-600" />
                  <div class="w-8 h-8 rounded-full bg-red-400 cursor-pointer border-2 border-transparent hover:border-red-600" />
                </div>
              </div>
            </div>
          </UCard>

          <UCard>
            <h3 class="text-xl font-bold text-highlighted mb-3">
              Use Cases
            </h3>
            <div class="space-y-3">
              <div class="flex items-start">
                <div class="w-6 h-6 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mr-3 mt-0.5">
                  <UIcon
                    name="i-lucide-check"
                    class="w-4 h-4 text-green-600 dark:text-green-400"
                  />
                </div>
                <div>
                  <h4 class="font-medium text-highlighted">
                    Product Showcases
                  </h4>
                  <p class="text-muted text-sm">
                    Highlight products with realistic lighting
                  </p>
                </div>
              </div>

              <div class="flex items-start">
                <div class="w-6 h-6 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mr-3 mt-0.5">
                  <UIcon
                    name="i-lucide-check"
                    class="w-4 h-4 text-green-600 dark:text-green-400"
                  />
                </div>
                <div>
                  <h4 class="font-medium text-highlighted">
                    Interactive Elements
                  </h4>
                  <p class="text-muted text-sm">
                    Create depth and focus for UI components
                  </p>
                </div>
              </div>

              <div class="flex items-start">
                <div class="w-6 h-6 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mr-3 mt-0.5">
                  <UIcon
                    name="i-lucide-check"
                    class="w-4 h-4 text-green-600 dark:text-green-400"
                  />
                </div>
                <div>
                  <h4 class="font-medium text-highlighted">
                    Visual Storytelling
                  </h4>
                  <p class="text-muted text-sm">
                    Enhance narratives with dynamic lighting effects
                  </p>
                </div>
              </div>
            </div>
          </UCard>
        </div>
      </div>
    </div>
  </div>
</template>
```vue
<template>
<div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-purple-50 to-pink-100 dark:from-slate-900 dark:to-slate-800">
  <MDirectionalLight fill="#EC4899" class="left-1/2 top-1/2" />
  <div class="relative z-10 h-full flex items-center justify-center">
    <h3 class="text-xl font-bold text-highlighted">Pink Directional Light</h3>
  </div>
</div>
</template>

Customize

Fill

Props

Prop	Type	Default	Description
`class`	`string`	`''`	CSS classes to apply to the light element for positioning and styling.
`fill`	`string`	`'white'`	Fill color for the light effect.

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.directionalLight in app.config.ts.

Prop	Type	Default	Description
`ui`	`object`	-	Per-slot classes merged over the theme defaults.

Slot	Props	Description
`root`	-	`animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-0`

Edit this pageorReport an issue

Boxes Core

Animated grid of boxes with hover effects and customizable colors.

Dotted Glow Background

Animated dotted background with glowing effects and customizable colors.