# Corner Glow

> Light pooling in one corner, leaning in on hover.

Gives flat cards depth and a direction without touching their content.

- Family: Chrome
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/corner-glow/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add corner-glow
```

It installs to `components/galactrex/corner-glow.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { CornerGlow } from "@/components/galactrex/corner-glow";

<div className="relative overflow-hidden rounded-xl p-6"><CornerGlow />…</div>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `corner` | `"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"` | `"top-right"` | Where the light is. |
| `size` | `number` | `0.7` | Radius as a share of the parent. |
| `intensity` | `number` | `0.16` | Strength, 0 to 1. |
| `responsive` | `boolean` | `true` | Lean in on hover or focus. |
| `color` | `string` | — | Any CSS colour; defaults to a theme token. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Card.** One per card, same corner across a grid.

## Accessibility

- Decorative.

## Motion

- Spring scale on hover or focus.
- Reduced motion: brightens without growing.