Design
llms.txt digitalcrew.tech

Effects

FlickeringGrid

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

Crew OSEffectsDigitalCrew.FlickeringGrid
FlickeringGrid · liveOpen

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).

Facts#

GroupEffects
ProductCrew OS
Globalwindow.DigitalCrew.FlickeringGrid
Sourcedigitalcrew-orchestrator: components/ui/flickering-grid.tsx
Import in the appimport { FlickeringGrid } from "@/components/ui/flickering-grid";

API#

TypeScript declarations emitted from components/ui/flickering-grid.tsx.

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#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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>
CosmicSynapseCanvasCpuArchitectureGlitchy404GlobeGlowingEffectPixelCardProgressiveBlurSecondBentoAnimationSplashCursor