Glowing Effect
A dynamic, proximity-based glowing border effect that tracks the mouse pointer. Perfect for highlighting interactive cards and bento grids.
Installation
npx raya-ui@latest add glowing-effectFile Structure
your-project
components
ui
glowing-effect
GlowingEffect.vue
API Reference
Props
blurnumber0The blur radius of the glow effect in pixels.
spreadnumber20The spread angle of the conical gradient.
proximitynumber0The distance from the element at which the glow becomes visible.
inactiveZonenumber0.7Radius ratio from the center where the glow is inactive.
borderWidthnumber1The width of the glowing border in pixels.
movementDurationnumber2Duration of the glow movement animation in seconds.
variantenum"default"The color variant of the glow. Accepts 'default' or 'white'.
Source content adapted from Aceternity UI.
Raya UI Core
The foundation of modern Vue interfaces, architected by Iman Mohammadi.
Battle Tested
Powering complex production environments like Woodcoder.com.
Enterprise Reliability
Trusted by industry leaders including Hotelyar.com for mission-critical UIs.
Modern Aesthetics
Crafted with the latest design trends and OKLCH color spaces.
Nuxt 4 Ready
Built for the future of the Vue ecosystem with best-in-class performance.
Settings
40
64
3px
0px
0.01
2s
source-code.vue
<script setup lang="ts">
import { GlowingEffect } from '@/components/ui/glowing-effect'
</script>
<template>
<div class="relative h-full rounded-2xl border border-border p-2">
<GlowingEffect
:glow="true"
:disabled="false"
:spread="40"
:proximity="64"
:inactive-zone="0.01"
:border-width="3"
/>
<div class="relative flex h-full flex-col gap-6 overflow-hidden rounded-xl bg-background border border-border p-6">
<h3 class="text-xl font-semibold text-foreground">Hover Me</h3>
<p class="text-sm text-muted-foreground">The glowing effect tracks your mouse.</p>
</div>
</div>
</template>