holo-card/src/styles/Card_shiny_raycast.css

A React component for holographic card effects

.card[data-set="Shiny_raycast"] .card_shine,
.card[data-set="Shiny_raycast"] .card_shine::after {
  --space: 5%;
  --angle: 113deg;
  --img-size: cover;

  background-image: var(--foil),
    repeating-linear-gradient(
      0deg,
      var(--sunpillar-clr-1) calc(var(--space) * 1),
      var(--sunpillar-clr-2) calc(var(--space) * 2),
      var(--sunpillar-clr-3) calc(var(--space) * 3),
      var(--sunpillar-clr-4) calc(var(--space) * 4),
      var(--sunpillar-clr-5) calc(var(--space) * 5),
      var(--sunpillar-clr-6) calc(var(--space) * 6),
      var(--sunpillar-clr-1) calc(var(--space) * 7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%,
      hsla(0, 0%, 0%, 0.15) 20%,
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-position: center center, 0% var(--background-y),
    calc(var(--background-x) + (var(--background-y) * 0.2)) var(--background-y),
    var(--background-x) var(--background-y);

  background-blend-mode: soft-light, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;

  filter: brightness(calc((var(--pointer-from-center) * 0.4) + 0.4))
    contrast(1.4) saturate(2.25);
}

.card[data-set="Shiny_raycast"] .card_shine::after {
  content: "";

  background-position: center, center, 0% var(--background-y),
    calc(var(--background-x) + ((var(--background-y) * 0.2)) * -1)
      calc(var(--background-y) * -1);

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200%, 100%;

  filter: brightness(calc((var(--pointer-from-center) * 0.4) + 0.8))
    contrast(1.5) saturate(1.25);
  mix-blend-mode: exclusion;
}

.card[data-set="Shiny_raycast"] .card_glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 75%) 5%,
    hsl(200, 5%, 35%) 60%,
    hsl(320, 40%, 10%) 150%
  );

  background-size: 120%, 150;
  background-position: center center;

  mix-blend-mode: hard-light;
  filter: brightness(1) contrast(1.2) saturate(1);

  opacity: calc(var(--card-opacity) * 0.75);
}