vault66-crt-effect/dist/vault66-crt-effect.css

A customizable CRT visual effect component for React

.crt-effect-wrapper.sweep-on:before{content:"";position:fixed;top:-30%;left:0;width:100%;height:var(--sweep-thickness, 10px);pointer-events:none;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,.6) 50%,rgba(8,8,8,.5) 50%,transparent 100%);animation:sweep-line var(--sweep-duration, 7s) linear infinite;z-index:9999;filter:blur(1.5px)}@keyframes sweep-line{0%{top:-30%}to{top:130%}}.crt-effect-wrapper.scanlines-on:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:repeating-linear-gradient(var(--scanline-gradient-direction, to bottom),rgba(var(--scanline-color-rgb, 91, 179, 135),calc(var(--scanline-opacity, .035))) 0px,rgba(var(--scanline-color-rgb, 18, 58, 39),calc(var(--scanline-opacity, .2))) 2px,transparent 3px,transparent 5px);z-index:9998;mix-blend-mode:screen}.crt-effect-wrapper.edge-glow-on{box-shadow:inset 0 0 var(--edge-glow-size, 30px) var(--edge-glow-color, rgba(0, 255, 128, .2))}.crt-inner{width:100%;height:100%}.crt-effect-wrapper.sweep-soft:before{content:"";position:fixed;top:-30%;left:0;width:100%;height:var(--sweep-thickness, 10px);pointer-events:none;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.08) 55%,transparent 100%);animation:sweep-line var(--sweep-duration, 7s) linear infinite;z-index:9999;filter:blur(5px)}.crt-effect-wrapper.flicker-on{animation:crt-flicker .8s infinite}@keyframes crt-flicker{0%{opacity:1}10%{opacity:.96}20%{opacity:.99}30%{opacity:.97}40%{opacity:.98}50%{opacity:.97}60%{opacity:1}70%{opacity:.95}80%{opacity:.98}90%{opacity:1}to{opacity:.99}}