# GlowingEffect

> A multicolour glow that runs along a card's border and follows the pointer around it.

## Facts

- **Product**: Crew OS
- **Family**: Effects
- **Global**: `window.DigitalCrew.GlowingEffect`
- **Source**: `digitalcrew-orchestrator: components/ui/glowing-effect.tsx`
- **Import in the app**: `import { GlowingEffect } from "@/components/ui/glowing-effect";`
- **Live preview**: /design/components/glowing-effect/preview.html
- **Page**: /design/components/glowing-effect

## Guidelines

**Use it for** feature cards on marketing pages (the Crew OS features grid). One grid of glowing cards per page at most.

**What you provide**: place it as the first child of a `relative`, rounded card. Props: `disabled` (default **true**, which shows only a plain border, so pass `false`), `glow` (default false), `spread` (arc half-width in degrees, default 20), `proximity` (px outside the card that still counts, default 0), `inactiveZone` (share of the card's centre that switches the glow off, default 0.7), `borderWidth` (default 1), `blur` (default 0), `movementDuration` (s, default 2), `variant` (`default`, `white`), `className`. Crew OS uses `spread={30} glow disabled={false} proximity={50} inactiveZone={0.01} borderWidth={2}` on a `rounded-[1rem] border-[0.75px] p-2` shell (1.25rem from `md`) around a `rounded-lg border-[0.75px] bg-background p-4 shadow-sm` inner card.

**Anatomy**: the gradient repeats a conic sweep five times through `#dd7bbb`, `#d79f1e`, `#5a922c`, `#4c7894` (the `dc-magenta`, `dc-gold`, `dc-forest`, `dc-ocean` accents). A conic mask shows only an arc `2 × spread` degrees wide, centred on the pointer's angle.

**Behaviour**: it listens to `pointermove` on the window. The arc turns to the pointer angle over `movementDuration` with ease `[0.16, 1, 0.3, 1]` and fades in and out over 300ms. It does nothing on devices without hover. (The preview drives a synthetic pointer until you move yours.)

**Don't** forget `disabled={false}`, or nest it in a card without `position: relative`.

## API

```ts
declare const GlowingEffect: any;
export { GlowingEffect };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  var items = [
    { icon: I.Inbox, title: "Inbox triage", text: "Replies sorted by intent before you open your mail." },
    { icon: I.Calendar, title: "Meeting prep", text: "A one-page brief on every prospect, an hour before the call." },
    { icon: I.Send, title: "Follow-ups", text: "No thread goes quiet: nudges go out on day 3 and day 7." }
  ];
  function Card(p) {
    return h("div", { className: "relative h-full rounded-[1rem] border-[0.75px] border-border p-2" },
      h(DC.GlowingEffect, { spread: 30, glow: true, disabled: false, proximity: 50, inactiveZone: 0.01, borderWidth: 2 }),
      h("div", { className: "relative flex h-full flex-col gap-3 overflow-hidden rounded-lg border-[0.75px] bg-background p-4 shadow-sm" },
        h(p.icon, { className: "size-6" }),
        h("h3", { className: "text-sm font-semibold" }, p.title),
        h("p", { className: "text-muted-foreground text-xs leading-relaxed" }, p.text)));
  }
  function App() {
    var ref = React.useRef(null);
    React.useEffect(function () {
      // Demo only: a synthetic pointer circles the middle card until a real pointer moves.
      var t = 0, id = 0, live = true;
      function real(e) { if (e.isTrusted) { live = false; window.removeEventListener("pointermove", real); } }
      window.addEventListener("pointermove", real);
      function step() {
        if (!live || !ref.current) return;
        var r = ref.current.getBoundingClientRect(); t += 0.03;
        var x = r.left + r.width / 2 + Math.cos(t) * (r.width / 2 + 10), y = r.top + r.height / 2 + Math.sin(t) * (r.height / 2 + 10);
        window.dispatchEvent(new PointerEvent("pointermove", { clientX: x, clientY: y, bubbles: true }));
        id = requestAnimationFrame(step);
      }
      id = requestAnimationFrame(step);
      return function () { live = false; cancelAnimationFrame(id); window.removeEventListener("pointermove", real); };
    }, []);
    return h("ul", { className: "grid grid-cols-3 gap-4" },
      items.map(function (it, i) { return h("li", { key: it.title, ref: i === 1 ? ref : null, className: "min-h-[12rem] list-none" }, h(Card, it)); }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Effects

- [CosmicSynapseCanvas](/design/components/cosmic-synapse-canvas.md): A canvas animation of a slowly rotating sphere of neurons that fire and send pulses along their links, like a brain lighting up.
- [CpuArchitecture](/design/components/cpu-architecture.md): An SVG circuit diagram: eight traces run into a central chip labelled "DIGITAL CREW", with coloured light pulses travelling along them.
- [FlickeringGrid](/design/components/flickering-grid.md): A canvas of small squares whose opacity flickers at random, with optional text knocked into the grid as brighter squares.
- [Glitchy404](/design/components/glitchy-404.md): A "404" made of shaking fragments, rasterised to a canvas where every pixel row is jittered sideways each frame, like a bad signal.
- [Globe](/design/components/globe.md): An auto-rotating 3D dot-matrix globe (cobe, WebGL) with orange city markers, which the visitor can drag to spin.
- [PixelCard](/design/components/pixel-card.md): A card whose surface fills with shimmering pixels, spreading out from the centre, while it is hovered or focused.
- [ProgressiveBlur](/design/components/progressive-blur.md): A stack of backdrop-blur layers, each masked to a band, so content behind it blurs progressively toward one edge.
- [SecondBentoAnimation](/design/components/second-bento-animation.md): A security emblem for the bento grid: a solid shield sits on a flickering dot grid, and the whole tile is clipped to a shield silhouette until hovered.
- [SplashCursor](/design/components/splash-cursor.md): A WebGL fluid simulation that trails the pointer in coloured dye behind the page content.