# SecondBentoAnimation

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

## Facts

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

## Guidelines

**Use it for** the "Advanced security" tile of [`BentoSection`](/design/components/bento-section.md). It takes no props.

**What you provide**: a parent with a size; the component is `relative flex size-full items-center justify-center overflow-hidden`.

**Anatomy**: the tile is masked with a 265 × 268 shield SVG (`mask-size: contain`, centred). Inside, a second shield fills 88% of the height in `var(--bento-accent)` (`oklch(0.85 0 0)` on light themes, `oklch(0.4 0 0)` on dark ones). Behind it a [`FlickeringGrid`](/design/components/flickering-grid.md) (3px squares, 4px gaps, `rgb(161,161,170)`, `maxOpacity` 0.7, `flickerChance` 0.25) fades out toward the bottom (`mask-image: linear-gradient(to bottom, white, transparent)`).

**Behaviour**: hovering removes the shield mask so the grid spills to the tile edges, over the `transition-all duration-300` of the wrapper. The grid flickers only while on screen. No reduced-motion branch.

**Don't** put text over the shield, or use it outside a square-ish tile (the mask is sized to contain).

## API

```ts
export declare function SecondBentoAnimation(): 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() {
    return h("div", { className: "relative flex h-[340px] items-center justify-center overflow-hidden rounded-xl border" }, h(DC.SecondBentoAnimation));
  }
  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.
- [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.
- [SplashCursor](/design/components/splash-cursor.md): A WebGL fluid simulation that trails the pointer in coloured dye behind the page content.