cybercore-css 0.2.0

package/src/scss/effects/_index.scss

@@ -0,0 +1,9 @@
+// ============================================================
+// Effects - Visual FX modules
+// ============================================================
+
+@forward "noise";
+@forward "scanlines";
+@forward "glitch";
+@forward "neon-border";
+@forward "datastream";

package/src/scss/effects/_neon-border.scss

@@ -0,0 +1,107 @@
+// ============================================================
+// Neon Border Effect - Animated rainbow gradient border with blur
+// ============================================================
+
+@layer components {
+  .cyber-neon-border {
+    position: relative;
+    isolation: isolate;
+
+    // Rainbow gradient border with blur glow (default: cyan theme)
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: -1;
+      border-radius: inherit;
+      background: linear-gradient(
+        90deg,
+        var(--cyber-cyan-500, #00f0ff),
+        var(--cyber-magenta-500, #ff2a6d),
+        var(--cyber-yellow-500, #fcee0a),
+        var(--cyber-green-500, #05ffa1),
+        var(--cyber-cyan-500, #00f0ff)
+      );
+      background-size: 400% 100%;
+      animation: neon-flow 4s linear infinite;
+      filter: blur(15px);
+      inset: 0;
+    }
+
+    // Solid background to cover the center
+    &::after {
+      content: "";
+      position: absolute;
+      z-index: -1;
+      border-radius: inherit;
+      background: var(--color-bg-secondary, #0d1117);
+      inset: 0;
+    }
+
+    // Magenta variant
+    &--magenta::before {
+      background: linear-gradient(
+        90deg,
+        var(--cyber-magenta-500, #ff2a6d),
+        var(--cyber-cyan-500, #00f0ff),
+        var(--cyber-magenta-500, #ff2a6d),
+        var(--cyber-yellow-500, #fcee0a),
+        var(--cyber-magenta-500, #ff2a6d)
+      );
+    }
+
+    // Cyan only variant
+    &--cyan::before {
+      background: linear-gradient(
+        90deg,
+        var(--cyber-cyan-400, #33f3ff),
+        var(--cyber-cyan-600, #00c4cc),
+        var(--cyber-cyan-500, #00f0ff),
+        var(--cyber-cyan-400, #33f3ff)
+      );
+    }
+
+    // Yellow variant
+    &--yellow::before {
+      background: linear-gradient(
+        90deg,
+        var(--cyber-yellow-500, #fcee0a),
+        var(--cyber-green-500, #05ffa1),
+        var(--cyber-yellow-500, #fcee0a),
+        var(--cyber-cyan-500, #00f0ff),
+        var(--cyber-yellow-500, #fcee0a)
+      );
+    }
+
+    // Green variant
+    &--green::before {
+      background: linear-gradient(
+        90deg,
+        var(--cyber-green-500, #05ffa1),
+        var(--cyber-cyan-500, #00f0ff),
+        var(--cyber-green-500, #05ffa1),
+        var(--cyber-yellow-500, #fcee0a),
+        var(--cyber-green-500, #05ffa1)
+      );
+    }
+  }
+
+  @keyframes neon-flow {
+    0% {
+      background-position: 0% 50%;
+    }
+
+    100% {
+      background-position: 400% 50%;
+    }
+  }
+
+  // Respect reduced motion preference
+  @media (prefers-reduced-motion: reduce) {
+    .cyber-neon-border {
+      &::before {
+        background-position: 0% 50%;
+        animation: none;
+      }
+    }
+  }
+}

package/src/scss/effects/_noise.scss

@@ -0,0 +1,75 @@
+// ============================================================
+// Noise Effect - SVG noise texture overlay
+// ============================================================
+
+@layer components {
+  .cyber-noise {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: 10;
+      border-radius: inherit;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+      opacity: 15%;
+      pointer-events: none;
+      inset: 0;
+    }
+
+    // Optional animated noise variation
+    &--animated::before {
+      animation: cyber-noise-shift 0.5s steps(10) infinite;
+    }
+  }
+
+  @keyframes cyber-noise-shift {
+    0%,
+    100% {
+      transform: translate(0, 0);
+    }
+
+    10% {
+      transform: translate(-5%, -10%);
+    }
+
+    20% {
+      transform: translate(-15%, 5%);
+    }
+
+    30% {
+      transform: translate(7%, -25%);
+    }
+
+    40% {
+      transform: translate(-5%, 25%);
+    }
+
+    50% {
+      transform: translate(-15%, 10%);
+    }
+
+    60% {
+      transform: translate(15%, 0%);
+    }
+
+    70% {
+      transform: translate(0%, 15%);
+    }
+
+    80% {
+      transform: translate(3%, 35%);
+    }
+
+    90% {
+      transform: translate(-10%, 10%);
+    }
+  }
+
+  // Respect reduced motion preference
+  @media (prefers-reduced-motion: reduce) {
+    .cyber-noise--animated {
+      animation: none;
+    }
+  }
+}

package/src/scss/effects/_scanlines.scss

@@ -0,0 +1,86 @@
+// ============================================================
+// Scanlines Effect - CRT monitor scanline overlay
+// ============================================================
+
+@layer components {
+  .cyber-scanlines {
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      z-index: 10;
+      border-radius: inherit;
+      background: repeating-linear-gradient(
+        0deg,
+        transparent 0,
+        transparent 2px,
+        rgb(0 0 0 / 50%) 2px,
+        rgb(0 0 0 / 50%) 4px
+      );
+      pointer-events: none;
+      inset: 0;
+    }
+
+    // Finer scanlines variant
+    &--fine::after {
+      background: repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 1px,
+        rgb(0 0 0 / 20%) 1px,
+        rgb(0 0 0 / 20%) 2px
+      );
+    }
+
+    // Thicker, more visible scanlines
+    &--heavy::after {
+      background: repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 3px,
+        rgb(0 0 0 / 40%) 3px,
+        rgb(0 0 0 / 40%) 6px
+      );
+    }
+
+    // Animated flickering scanlines
+    &--flicker::after {
+      animation: cyber-scanline-flicker 0.15s infinite;
+    }
+
+    // Scrolling scanlines effect
+    &--scroll::after {
+      animation: cyber-scanline-scroll 8s linear infinite;
+    }
+  }
+
+  @keyframes cyber-scanline-flicker {
+    0%,
+    100% {
+      opacity: var(--scanline-opacity);
+    }
+
+    50% {
+      opacity: calc(var(--scanline-opacity) * 98%);
+    }
+  }
+
+  @keyframes cyber-scanline-scroll {
+    0% {
+      background-position: 0 0;
+    }
+
+    100% {
+      background-position: 0 100%;
+    }
+  }
+
+  // Respect reduced motion preference
+  @media (prefers-reduced-motion: reduce) {
+    .cyber-scanlines--flicker,
+    .cyber-scanlines--scroll {
+      animation: none;
+    }
+  }
+}

package/src/scss/utilities/_accessibility.scss

@@ -0,0 +1,57 @@
+// ============================================================
+// Accessibility Utilities
+// ============================================================
+
+@layer utilities {
+  // Screen reader only - visually hidden but accessible
+  .cyber-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  // Un-hide for focus (for skip links)
+  .cyber-sr-only-focusable:focus,
+  .cyber-sr-only-focusable:focus-within {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: inherit;
+    padding: inherit;
+    overflow: visible;
+    white-space: normal;
+    clip: auto;
+  }
+
+  // Not screen reader - hide from screen readers
+  .cyber-not-sr {
+    speak: none;
+  }
+
+  // Focus visible utilities
+  .cyber-focus-visible:focus-visible {
+    outline: 2px solid var(--cyber-cyan-500);
+    outline-offset: 2px;
+  }
+
+  // Reduced motion utility
+  .cyber-motion-safe {
+    @media (prefers-reduced-motion: reduce) {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  .cyber-motion-reduce {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+}

package/src/scss/utilities/_animation.scss

@@ -0,0 +1,246 @@
+// ============================================================
+// Animation Utilities
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Keyframes
+  // --------------------------------------------------------
+
+  @keyframes cyber-pulse {
+    0%,
+    100% {
+      opacity: 100%;
+    }
+
+    50% {
+      opacity: 50%;
+    }
+  }
+
+  @keyframes cyber-float {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
+  @keyframes cyber-flicker-in {
+    0% {
+      opacity: 0%;
+    }
+
+    10% {
+      opacity: 60%;
+    }
+
+    20% {
+      opacity: 20%;
+    }
+
+    30% {
+      opacity: 80%;
+    }
+
+    40% {
+      opacity: 40%;
+    }
+
+    50% {
+      opacity: 100%;
+    }
+
+    60% {
+      opacity: 70%;
+    }
+
+    70% {
+      opacity: 100%;
+    }
+
+    80% {
+      opacity: 90%;
+    }
+
+    100% {
+      opacity: 100%;
+    }
+  }
+
+  @keyframes cyber-glow-pulse {
+    0%,
+    100% {
+      box-shadow: 0 0 5px currentcolor;
+      filter: brightness(1);
+    }
+
+    50% {
+      box-shadow:
+        0 0 20px currentcolor,
+        0 0 40px currentcolor;
+      filter: brightness(1.2);
+    }
+  }
+
+  @keyframes cyber-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes cyber-ping {
+    75%,
+    100% {
+      opacity: 0%;
+      transform: scale(2);
+    }
+  }
+
+  @keyframes cyber-bounce {
+    0%,
+    100% {
+      transform: translateY(-25%);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+
+    50% {
+      transform: translateY(0);
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+
+  // --------------------------------------------------------
+  // Animation Classes
+  // --------------------------------------------------------
+
+  .cyber-animate-pulse {
+    animation: cyber-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .cyber-animate-float {
+    animation: cyber-float 3s ease-in-out infinite;
+  }
+
+  .cyber-boot {
+    animation: cyber-flicker-in 0.8s ease-out forwards;
+  }
+
+  .cyber-animate-glow {
+    animation: cyber-glow-pulse 2s ease-in-out infinite;
+  }
+
+  .cyber-animate-spin {
+    animation: cyber-spin 1s linear infinite;
+  }
+
+  .cyber-animate-ping {
+    animation: cyber-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  }
+
+  .cyber-animate-bounce {
+    animation: cyber-bounce 1s infinite;
+  }
+
+  // --------------------------------------------------------
+  // Animation Control
+  // --------------------------------------------------------
+
+  .cyber-animate-none {
+    animation: none;
+  }
+
+  .cyber-animate-paused {
+    animation-play-state: paused;
+  }
+
+  .cyber-animate-running {
+    animation-play-state: running;
+  }
+
+  // Delay utilities
+  .cyber-delay-100 {
+    animation-delay: 100ms;
+  }
+
+  .cyber-delay-200 {
+    animation-delay: 200ms;
+  }
+
+  .cyber-delay-300 {
+    animation-delay: 300ms;
+  }
+
+  .cyber-delay-500 {
+    animation-delay: 500ms;
+  }
+
+  .cyber-delay-1000 {
+    animation-delay: 1000ms;
+  }
+
+  // Duration utilities
+  .cyber-duration-fast {
+    animation-duration: 150ms;
+  }
+
+  .cyber-duration-normal {
+    animation-duration: 300ms;
+  }
+
+  .cyber-duration-slow {
+    animation-duration: 500ms;
+  }
+
+  .cyber-duration-slower {
+    animation-duration: 1000ms;
+  }
+
+  // --------------------------------------------------------
+  // Transition Utilities
+  // --------------------------------------------------------
+
+  .cyber-transition {
+    transition-duration: var(--transition-base);
+    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
+  }
+
+  .cyber-transition-fast {
+    transition-duration: var(--transition-fast);
+  }
+
+  .cyber-transition-slow {
+    transition-duration: var(--transition-slow);
+  }
+
+  .cyber-transition-none {
+    transition: none;
+  }
+
+  // --------------------------------------------------------
+  // Reduced Motion Support
+  // --------------------------------------------------------
+
+  @media (prefers-reduced-motion: reduce) {
+    .cyber-animate-pulse,
+    .cyber-animate-float,
+    .cyber-boot,
+    .cyber-animate-glow,
+    .cyber-animate-spin,
+    .cyber-animate-ping,
+    .cyber-animate-bounce {
+      animation: none;
+    }
+
+    .cyber-transition {
+      transition: none;
+    }
+  }
+}