react-tiled-background/dist/index.css

Reusable React component that adds an animated, Excel-style tile grid overlay to any element.

/* src/components/TiledBackground.css */
:root {
  --tile-width: 100.46px;
  --tile-height: 27.53px;
  --tile-border-color: rgba(255, 255, 255, 0.02);
  --tile-bg-color: rgba(255, 255, 255, 0.2);
  --spotlight-color: rgba(255, 255, 255, 0.15);
}
.tiled-background-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.tiled-background-wrapper > * {
  position: relative;
  z-index: 2;
}
.tiles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-width), 1fr));
  grid-template-rows: repeat(auto-fill, minmax(var(--tile-height), 1fr));
  z-index: 1;
}
.tile {
  width: var(--tile-width);
  height: var(--tile-height);
  position: relative;
  border-right: 1px solid var(--tile-border-color);
  border-bottom: 1px solid var(--tile-border-color);
  background-color: transparent;
  box-sizing: border-box;
}
.tile--border-pulse::after,
.tile--pulsing::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--tile-border-color);
  box-sizing: border-box;
  pointer-events: none;
}
.tile--border-pulse::after {
  animation: borderPulse 10s infinite;
}
.tile--pulsing {
  animation: bgPulse 10s infinite;
}
.tile--pulsing::after {
  animation: borderPulse 10s infinite;
}
@keyframes bgPulse {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: var(--tile-bg-color);
  }
}
@keyframes borderPulse {
  0%, 100% {
    border-color: var(--tile-border-color);
  }
  50% {
    border-color: var(--tile-bg-color);
  }
}