# FlickeringGrid

> A canvas of small squares whose opacity flickers at random, with optional text knocked into the grid as brighter squares.

## Facts

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

## Guidelines

**Use it for** quiet texture in marketing surfaces: the site footer ("BUILD YOUR DIGITAL CREW"), the shield in the bento grid. Never behind body text.

**What you provide**: `squareSize` (px, default 3), `gridGap` (px, default 3), `flickerChance` (default 0.2), `color` (any CSS colour including `var(--…)`, default `#B4B4B4`), `maxOpacity` (default 0.15), `text`, `fontSize` (default 140), `fontWeight` (default 600), fixed `width`/`height` (otherwise it fills its parent), `className`. The footer uses `squareSize={2}`, `gridGap={3}` (2 on tablets), `color="#6B7280"`, `maxOpacity={0.3}`, `flickerChance={0.1}` and `fontSize` 90 (70 on tablets), under a `bg-gradient-to-t from-transparent from-40% to-background` fade.

**Anatomy**: every square starts at a random opacity between 0 and `maxOpacity`. Squares under the text are drawn at `min(1, opacity × 3 + 0.4)`. The text is centred and set in Geist with system fallbacks.

**Behaviour**: each second a square has roughly a `flickerChance` probability of taking a new random opacity. The loop runs only while the canvas is on screen (IntersectionObserver) and resizes with its container. It has no reduced-motion branch.

**Don't** use a high `maxOpacity` behind content, or put long text in the mask (it is not wrapped).

## API

```ts
interface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {
    squareSize?: number;
    gridGap?: number;
    flickerChance?: number;
    color?: string;
    width?: number;
    height?: number;
    className?: string;
    maxOpacity?: number;
    text?: string;
    textColor?: string;
    fontSize?: number;
    fontWeight?: number | string;
}
export declare const FlickeringGrid: React.FC<FlickeringGridProps>;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h("div", { className: "relative h-48 overflow-hidden rounded-xl border" },
      h("div", { className: "absolute inset-0 z-10 bg-gradient-to-t from-transparent from-40% to-background" }),
      h("div", { className: "absolute inset-0 mx-6" },
        h(DC.FlickeringGrid, { text: "DigitalCrew", fontSize: 70, className: "h-full w-full", squareSize: 2, gridGap: 2, color: "#6B7280", maxOpacity: 0.3, flickerChance: 0.1 })));
  }
  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.
- [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.
- [GlowingEffect](/design/components/glowing-effect.md): A multicolour glow that runs along a card's border and follows the pointer around it.
- [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.