# FeaturesGridWithGlowingEffect

> The five value cards of the Crew OS landing page (cut waste, run lean, always on, reliable by default, shared knowledge), each wrapped in a pointer-following `GlowingEffect`.

## Facts

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

## Guidelines

**Use it for** the features block, on its own or overlapped by the CPU circuit in [`CpuSuperposition`](/design/components/cpu-superposition.md). It takes no props: titles and descriptions come from the `features.items` messages (`efficiency`, `costs`, `scale`, `delivery`, `intelligence`).

**Anatomy**: a `ul` grid, one column, two from `sm`, four from `md`, ten from `lg` with equal row heights; each item spans two columns (five across on desktop). Items are at least 192px tall (224px from `md`). The shell is `rounded-[1rem]` (1.25rem from `md`), 0.75px `border-border`, 8px padding; the inner card is `rounded-lg`, 0.75px border, `bg-background`, 16px padding (20px from `md`), `shadow-sm` (a soft 20px glow in dark mode), centred. Icons are 32px Lucide strokes at 1.5 (`TrendingDown`, `Activity`, `Zap`, `ShieldCheck`, plus a drawn three-node triangle) in `text-foreground`; titles `text-sm md:text-base font-semibold uppercase tracking-wider`; descriptions `text-xs md:text-sm leading-relaxed text-muted-foreground`.

**Behaviour**: each glow uses `spread` 30, `proximity` 50, `inactiveZone` 0.01, `borderWidth` 2: it follows the pointer within 50px of a card and does nothing on touch devices. (The preview circles a synthetic pointer until yours moves.)

**Don't** add a sixth card (the ten-column grid is built for five), or put links inside cards.

## API

```ts
export declare function FeaturesGridWithGlowingEffect(): JSX.Element;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  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() {
        var li = ref.current && ref.current.querySelectorAll("li")[2];
        if (!live || !li) return;
        var r = li.getBoundingClientRect(); t += 0.03;
        window.dispatchEvent(new PointerEvent("pointermove", { clientX: r.left + r.width / 2 + Math.cos(t) * (r.width / 2 + 10), clientY: r.top + r.height / 2 + Math.sin(t) * (r.height / 2 + 10), bubbles: true }));
        id = requestAnimationFrame(step);
      }
      id = requestAnimationFrame(step);
      return function () { live = false; cancelAnimationFrame(id); window.removeEventListener("pointermove", real); };
    }, []);
    return h("div", { ref: ref }, h(DC.FeaturesGridWithGlowingEffect));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Marketing

- [BentoSection](/design/components/bento-section.md): The landing-page bento: a `SectionHeader` over a two-by-two grid of animated tiles (collaboration, security, insights, automation), each with a title and description.
- [BrandBadge](/design/components/brand-badge.md): A rounded pill in any brand colour, in three weights: solid, outline and subtle.
- [BrandIconSet](/design/components/brand-icon-set.md): The Crew OS brand icon set, `Icons` in the app and `DC.BrandIcons` here: the Digital Crew mark, compliance seals, and partner and integration marks as inline SVG components.
- [BrandStatCard](/design/components/brand-stat-card.md): A frosted summary card for a headline number, tinted with one brand colour: icon tile, badge, uppercase label, big value and a subtitle.
- [ConnectSection](/design/components/connect-section.md): The "Connect your context" section: one rounded panel with a heading, a tools row (integration logos orbiting the Digital Crew mark) and a knowledge row (the `CosmicSynapseCanvas` neuron sphere).
- [CpuSuperposition](/design/components/cpu-superposition.md): The features block of the Crew OS landing page: the `CpuArchitecture` circuit on top, overlapping the five glowing value cards of `FeaturesGridWithGlowingEffect` below it.
- [CrewNetwork](/design/components/crew-network.md): The "How work moves through the network" section: a live mission card and a four-step timeline (ask, match, work, paid) that plays through six real-looking missions, showing a Digital Worker handing a brief to a human operator.
- [CTASection](/design/components/cta-section.md): The closing call to action: a dark gradient panel with Camille's looping portrait video, a heading, a short line and one glass button to contact the team.
- [FAQSection](/design/components/faq-section.md): The landing-page FAQ: a `SectionHeader` and seventeen questions in a single-open, collapsible accordion.
- [FeatureSection](/design/components/feature-section.md): The Crew Network hero: a giant three-line headline ("Discover / the internet / of actions") over a slowly turning WebGL globe laced with glowing connection arcs, then a description and three stats.
- [SectionHeader](/design/components/section-header.md): The centred intro block that opens every Crew OS marketing section: generous padding, a bottom rule, and whatever eyebrow, heading and lede you pass in.
- [SectionSolutions](/design/components/section-solutions.md): The "Hire your Crew" section: a numbered roster of six Digital Workers beside a dossier card for the selected one, advancing on its own until the visitor picks someone.
- [SocialProofTestimonials](/design/components/social-proof-testimonials.md): A wall of customer quotes: `TestimonialCard`s stacked in columns that scroll vertically at different speeds, fading out at the top and bottom.