Visual Effects

Glowing Effect

Interactive glowing effect with customizable colors, blur, and proximity detection.

The MGlowingEffect component creates an interactive glow that tracks your pointer. As the cursor moves across the element, a conic/radial gradient sweeps to face it. proximity defines how far outside the element the effect stays active, inactiveZone suppresses the glow when the pointer is very near the centre, and movementDuration controls how smoothly the angle eases. Use colors to recolour the trail, variant="white" for a monochrome halo, or blur to soften it.

Usage

Interactive Glow

Moves smoothly toward your pointer and fades out when near the centre or outside the proximity ring.

Live

<template>
  <div class="relative w-full max-w-xl rounded-2xl border border-default bg-gradient-to-br from-muted/40 to-accented/30 p-6 shadow-sm">
    <MGlowingEffect
      :glow="true"
      :disabled="false"
      :proximity="48"
      :inactive-zone="0.15"
      :spread="60"
      :blur="0"
      class="rounded-2xl"
    />
    <div class="relative z-10 flex flex-col gap-3">
      <div class="flex items-start justify-between gap-3">
        <div>
          <h3 class="text-lg font-semibold text-highlighted">
            Interactive Glow
          </h3>
          <p class="text-sm text-muted">
            Moves smoothly toward your pointer and fades out when near the centre or outside the proximity ring.
          </p>
        </div>
        <UBadge
          color="primary"
          variant="soft"
        >
          Live
        </UBadge>
      </div>
      <div class="flex flex-wrap gap-2">
        <UButton
          color="primary"
          variant="soft"
          size="sm"
        >
          Call to Action
        </UButton>
        <UButton
          color="neutral"
          variant="ghost"
          size="sm"
        >
          Secondary
        </UButton>
      </div>
    </div>
  </div>
</template>

Examples

Variants

Default

Multi-colour trail

Conic + radial stops follow the cursor with a tight, lively sweep.

White

Clean halo

Monochrome glow that reads crisply on dark surfaces.

Soft blur

Large aura

Wider spread, more blur and faster snap towards the pointer.

Custom palette

Brand-matched glow

Pass any four CSS colours (or theme tokens) to recolour the conic trail.

<template>
  <div class="grid w-full max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <div class="relative rounded-2xl border border-default bg-accented/40 p-5">
      <MGlowingEffect
        :glow="true"
        :disabled="false"
        :border-width="2"
        :spread="80"
        :proximity="56"
        :inactive-zone="0.05"
        class="rounded-2xl"
      />
      <div class="relative z-10 flex flex-col gap-2">
        <span class="text-sm font-medium text-muted">Default</span>
        <h4 class="text-base font-semibold text-highlighted">
          Multi-colour trail
        </h4>
        <p class="text-sm text-muted">
          Conic + radial stops follow the cursor with a tight, lively sweep.
        </p>
      </div>
    </div>
    <div class="relative rounded-2xl border border-default bg-accented/40 p-5">
      <MGlowingEffect
        :glow="true"
        :disabled="false"
        variant="white"
        :border-width="2"
        :spread="90"
        :proximity="64"
        :inactive-zone="0.08"
        class="rounded-2xl"
      />
      <div class="relative z-10 flex flex-col gap-2">
        <span class="text-sm font-medium text-muted">White</span>
        <h4 class="text-base font-semibold text-highlighted">
          Clean halo
        </h4>
        <p class="text-sm text-muted">
          Monochrome glow that reads crisply on dark surfaces.
        </p>
      </div>
    </div>
    <div class="relative rounded-2xl border border-default bg-accented/40 p-5">
      <MGlowingEffect
        :glow="true"
        :disabled="false"
        :blur="6"
        :border-width="2"
        :spread="120"
        :proximity="72"
        :inactive-zone="0.1"
        :movement-duration="1.2"
        class="rounded-2xl"
      />
      <div class="relative z-10 flex flex-col gap-2">
        <span class="text-sm font-medium text-muted">Soft blur</span>
        <h4 class="text-base font-semibold text-highlighted">
          Large aura
        </h4>
        <p class="text-sm text-muted">
          Wider spread, more blur and faster snap towards the pointer.
        </p>
      </div>
    </div>
    <div class="relative rounded-2xl border border-default bg-accented/40 p-5 sm:col-span-2 lg:col-span-3">
      <MGlowingEffect
        :glow="true"
        :disabled="false"
        :colors="['#60a5fa', '#a78bfa', '#34d399', '#fbbf24']"
        :border-width="2"
        :spread="70"
        :proximity="64"
        :inactive-zone="0.12"
        :movement-duration="1.6"
        class="rounded-2xl"
      />
      <div class="relative z-10 flex flex-col gap-2">
        <span class="text-sm font-medium text-muted">Custom palette</span>
        <h4 class="text-base font-semibold text-highlighted">
          Brand-matched glow
        </h4>
        <p class="text-sm text-muted">
          Pass any four CSS colours (or theme tokens) to recolour the conic trail.
        </p>
      </div>
    </div>
  </div>
</template>

Customize

Blur0

Inactive Zone0.12

Proximity56

Spread70

VariantDefault

Glow

Disabled

Movement Duration1.6

Border Width2

Colors

Props

Prop	Type	Default	Description
`blur`	`number`	`0`	Amount of blur to apply to the glow effect in pixels.
`inactiveZone`	`number`	`0.7`	Size of the inactive zone in the centre where the effect is disabled (0�1). Smaller values keep the glow active closer to the middle.
`proximity`	`number`	`0`	Distance in pixels from the element edges where the effect activates.
`spread`	`number`	`20`	Spread angle of the glow effect in degrees.
`variant`	`string`	`'default'`	Color variant: `'default'` or `'white'`.
`glow`	`boolean`	`false`	Whether the glow effect is rendered/visible.
`class`	`string`	`''`	CSS classes applied to the root/container as needed.
`disabled`	`boolean`	`true`	When `true`, the effect is disabled and pointer tracking is off.
`movementDuration`	`number`	`2`	Duration of the angle easing animation in seconds.
`borderWidth`	`number`	`1`	Width of the glow border in pixels.
`colors`	`string[]`	`['#dd7bbb', '#d79f1e', '#5a922c', '#4c7894']`	Array of four gradient stop colours used for the default variant.

UI

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

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

Slot	Props	Description
`root`	-
`border`	-	`pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity`
`container`	-	`pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity`
`glow`	-	glow rounded-[inherit] after:content-[''] after:rounded-[inherit] after:absolute after:inset-[calc(-1var(--glowingeffect-border-width))] after:[border:var(--glowingeffect-border-width)_solid_transparent] after:[background:var(--gradient)] after:[background-attachment:fixed] after:opacity-[var(--active)] after:transition-opacity after:duration-300 after:[mask-clip:padding-box,border-box] after:[mask-composite:intersect] after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]

Edit this pageorReport an issue

Glow Effect

Component that adds a dynamic glow effect with customizable colors and animations.

Gooey Filter

An SVG goo filter that makes overlapping shapes melt into one another as they move.