3. Dynamic Glow

The dynamic glow effect is an effect supported by many of the Gemini UI components. It applies a glowing effect to the component, which moves dynamically based on the position of the mouse cursor. This gives sites a more interactive and engaging feel.

Basic Usage

A

A

A

A

---
import { DynamicGlow } from "@gemini-ui-astro/components";
import { Grid, Card } from "@gemini-ui-astro/components";
---

<DynamicGlow />

<Grid container gap="4">
  <Grid xs={12} sm={6}>
    <Card dynamicGlow>A</Card>
  </Grid>
  <Grid xs={12} sm={6}>
    <Card dynamicGlow>A</Card>
  </Grid>
  <Grid xs={12} sm={6}>
    <Card dynamicGlow>A</Card>
  </Grid>
  <Grid xs={12} sm={6}>
    <Card dynamicGlow>A</Card>
  </Grid>
</Grid>

CSS API

It’s possible to customise the dynamic glow effect, or use it with your own components, by using the CSS API.

The DynamicGlow component injects a script in the page which will search for any element with the gx-dynamic-glow class and apply CSS variables to it which can be used to customise the glow effect.

The following CSS variables will be set by the script:

Name	Type	Description
--gx-element-width	number	The width of the element.
--gx-element-height	number	The height of the element.
--gx-mouse-distance-x	number	The horizontal distance from the mouse cursor to the nearest edge of the elements bounding box. The value is 0 when the cursor is hovering the element.
--gx-mouse-distance-y	number	The vertical distance from the mouse cursor to the nearest edge of the elements bounding box. The value is 0 when the cursor is hovering the element.
--gx-mouse-distance	number	The distance from the mouse cursor to the nearest edge of the elements bounding box. The value is 0 when the cursor is hovering the element.
--gx-mouse-angle	number	The angle from the mouse cursor to the nearest point on the edge of the elements bounding box.
--gx-mouse-progress-x	number	The fraction of the component across which the mouse has travelled in the horizontal direction. The value is between 0 and 1.
--gx-mouse-progress-y	number	The fraction of the component across which the mouse has travelled in the vertical direction. The value is between 0 and 1.

To avoid an infinite loop, ensure that you do not use these variables in a way which will cause the components position or size to change.

Example

Dynamic glow example

---
import { DynamicGlow } from "@gemini-ui-astro/components";
---

<span class="gx-dynamic-glow">Dynamic glow example</span>

<style>
  span {
    transform: rotate(var(--gx-mouse-angle));
  }
</style>

As shown in the example above, the CSS properties can be used to create arbitrary effects.