@nukleas/cyberdesign 0.1.0

package/src/css/components/gauge.css

@@ -0,0 +1,156 @@
+/* ── Gauge / Radial Meter ──────────────────────────────────────────────────── */
+/*
+  Circular/radial progress gauges with neon cyberpunk styling.
+
+  Usage:
+  <div class="cd-gauge" style="--value: 78;">
+    <div class="cd-gauge__track"></div>
+    <div class="cd-gauge__fill"></div>
+    <div class="cd-gauge__center">
+      <div class="cd-gauge__value">78</div>
+      <div class="cd-gauge__label">INTEGRITY</div>
+    </div>
+    <!-- optional ticks via CSS or children -->
+  </div>
+
+  The --value (0-100) drives the conic fill. Color via current --cd-accent (or override).
+
+  Modifiers / variants:
+  .cd-gauge--small
+  .cd-gauge--danger / --success (changes accent locally)
+  .cd-gauge--radar (concentric rings + sweep)
+
+  Works great inside .cd-hud-frame or .cd-glow-card.
+*/
+
+.cd-gauge {
+  --size: 128px;
+  --thickness: 12px;
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cd-gauge__track,
+.cd-gauge__fill {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+}
+
+.cd-gauge__track {
+  background: conic-gradient(
+    var(--cd-border) 0deg 360deg
+  );
+  border: 1px solid var(--cd-border-dim);
+}
+
+.cd-gauge__fill {
+  background: conic-gradient(
+    var(--cd-accent) 0deg calc(var(--value, 0) * 3.6deg),
+    transparent calc(var(--value, 0) * 3.6deg) 360deg
+  );
+  transition: background 300ms ease;
+  box-shadow: 0 0 8px var(--cd-accent-glow);
+}
+
+/* Center content */
+.cd-gauge__center {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - var(--thickness) * 2 - 8px);
+  height: calc(100% - var(--thickness) * 2 - 8px);
+  background: var(--cd-bg-panel);
+  border-radius: 50%;
+  border: 1px solid var(--cd-border-dim);
+  text-align: center;
+}
+
+.cd-gauge__value {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--cd-accent);
+  text-shadow: 0 0 6px var(--cd-accent-glow);
+  font-variant-numeric: tabular-nums;
+}
+
+.cd-gauge__label {
+  font-size: 8px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--cd-text-muted);
+  margin-top: 2px;
+}
+
+/* Size variants */
+.cd-gauge--small {
+  --size: 92px;
+  --thickness: 9px;
+}
+
+.cd-gauge--small .cd-gauge__value {
+  font-size: 20px;
+}
+
+.cd-gauge--small .cd-gauge__label {
+  font-size: 7px;
+}
+
+/* Color variants (override accent locally) */
+.cd-gauge--danger { --cd-accent: var(--cd-neon-red); }
+.cd-gauge--success { --cd-accent: var(--cd-neon-green); }
+.cd-gauge--warn   { --cd-accent: var(--cd-amber); }
+
+/* Radar / sweep style */
+.cd-gauge--radar .cd-gauge__track {
+  background:
+    radial-gradient(circle at 50% 50%,
+      transparent 48%,
+      var(--cd-border-dim) 48%,
+      var(--cd-border-dim) 50%,
+      transparent 50%
+    ),
+    conic-gradient(var(--cd-border) 0deg 360deg);
+}
+
+.cd-gauge--radar .cd-gauge__fill {
+  background: conic-gradient(
+    color-mix(in srgb, var(--cd-accent) 85%, transparent) 0deg calc(var(--value, 0) * 3.6deg),
+    transparent calc(var(--value, 0) * 3.6deg) 360deg
+  );
+  box-shadow: 0 0 12px var(--cd-accent-glow);
+}
+
+/* Optional tick marks (add as children or via ::before multiple) */
+.cd-gauge__ticks {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.cd-gauge__tick {
+  position: absolute;
+  left: 50%;
+  top: 4px;
+  width: 1px;
+  height: 6px;
+  background: var(--cd-accent);
+  transform-origin: 50% calc(var(--size) / 2 - 4px);
+  box-shadow: 0 0 2px var(--cd-accent-glow);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .cd-gauge__fill {
+    transition: none;
+  }
+}

package/src/css/components/glow-card.css

@@ -0,0 +1,32 @@
+.cd-glow-card {
+  background: color-mix(in srgb, var(--cd-bg-panel) 80%, transparent);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
+  backdrop-filter: blur(var(--cd-card-blur, 4px));
+  -webkit-backdrop-filter: blur(var(--cd-card-blur, 4px));
+  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
+}
+
+.cd-glow-card:hover {
+  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
+  background: color-mix(in srgb, var(--cd-bg-panel-hover) 80%, transparent);
+}
+
+.cd-glow-card[data-active="true"],
+.cd-glow-card.is-active {
+  border-color: color-mix(in srgb, var(--cd-accent) 60%, transparent);
+  box-shadow:
+    0 0 8px color-mix(in srgb, var(--cd-accent) 25%, transparent),
+    0 0 20px color-mix(in srgb, var(--cd-accent) 12%, transparent),
+    inset 0 0 8px color-mix(in srgb, var(--cd-accent) 6%, transparent);
+}
+
+/* Color variant modifiers — override --cd-accent locally for the card */
+.cd-glow-card--orange  { --cd-accent: #ff8800; }
+.cd-glow-card--amber   { --cd-accent: #ffaa00; }
+.cd-glow-card--gold    { --cd-accent: #ffcc00; }
+.cd-glow-card--cyan    { --cd-accent: #47f6ff; }
+.cd-glow-card--magenta { --cd-accent: #ff2bd6; }
+.cd-glow-card--green   { --cd-accent: #52ff9f; }
+.cd-glow-card--red     { --cd-accent: #ff456c; }
+.cd-glow-card--blue    { --cd-accent: #6aa8ff; }
+.cd-glow-card--purple  { --cd-accent: #9d7cff; }

package/src/css/components/hud.css

@@ -0,0 +1,165 @@
+/* ── HUD Frames, Bars & Segments ──────────────────────────────────────────── */
+/*
+  Heads-up display elements for cyberpunk / neo-futuristic interfaces.
+
+  Usage examples:
+  <!-- Floating frame / panel wrapper -->
+  <div class="cd-hud-frame">
+    <div class="cd-hud__label">THREAT LEVEL</div>
+    <div class="cd-hud__value cd-hud__value--warn">HIGH</div>
+  </div>
+
+  <!-- Top / bottom status bar -->
+  <div class="cd-hud-bar cd-hud-bar--top">
+    <div class="cd-hud-segment">
+      <span class="cd-hud-segment__label">LOC</span>
+      <span class="cd-hud-segment__value">SECTOR-7</span>
+    </div>
+    ...
+  </div>
+
+  Compose with: .cd-corners, .cd-glow, .cd-scanline (as child), existing badges/stats.
+
+  Modifiers: --top, --bottom, --side, --floating, --compact
+*/
+
+.cd-hud-frame,
+.cd-hud {
+  position: relative;
+  background: color-mix(in srgb, var(--cd-bg-panel) 94%, transparent);
+  border: 1px solid var(--cd-border-glow);
+  padding: 14px 16px;
+  color: var(--cd-text);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 6%, transparent),
+    0 0 12px color-mix(in srgb, var(--cd-accent) 10%, transparent);
+}
+
+.cd-hud-frame::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 25%, transparent);
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Inner label / readout */
+.cd-hud__label {
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--cd-text-muted);
+  margin-bottom: 4px;
+}
+
+.cd-hud__value {
+  font-size: var(--cd-text-base);
+  font-weight: 700;
+  color: var(--cd-accent);
+  letter-spacing: 0.05em;
+  text-shadow: 0 0 6px var(--cd-accent-glow);
+}
+
+.cd-hud__value--ok   { color: var(--cd-neon-green); }
+.cd-hud__value--warn { color: var(--cd-amber); }
+.cd-hud__value--err  { color: var(--cd-neon-red); }
+.cd-hud__value--dim  { color: var(--cd-text-secondary); font-weight: 400; }
+
+/* Status / data bar (top or bottom of screen or panels) */
+.cd-hud-bar {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  background: color-mix(in srgb, var(--cd-bg) 92%, var(--cd-accent) 2%);
+  border: 1px solid var(--cd-border-dim);
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--cd-text-muted);
+  user-select: none;
+  overflow: hidden;
+}
+
+.cd-hud-bar--top {
+  border-bottom-color: var(--cd-accent);
+  box-shadow: 0 0 8px var(--cd-accent-glow);
+}
+
+.cd-hud-bar--bottom {
+  border-top-color: var(--cd-accent);
+  box-shadow: 0 0 8px var(--cd-accent-glow);
+}
+
+.cd-hud-bar--side {
+  flex-direction: column;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  padding: 8px 4px;
+}
+
+/* Individual data segment inside bar or frame */
+.cd-hud-segment {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px;
+  border-right: 1px solid var(--cd-border-dim);
+  white-space: nowrap;
+  height: 100%;
+}
+
+.cd-hud-bar--side .cd-hud-segment {
+  border-right: none;
+  border-bottom: 1px solid var(--cd-border-dim);
+  padding: 8px 4px;
+  height: auto;
+}
+
+.cd-hud-segment:last-child {
+  border-right: none;
+  border-bottom: none;
+}
+
+.cd-hud-segment__label {
+  color: var(--cd-text-dim);
+  letter-spacing: 0.2em;
+  font-size: 8px;
+}
+
+.cd-hud-segment__value {
+  color: var(--cd-accent);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+}
+
+.cd-hud-segment__value--ok   { color: var(--cd-neon-green); }
+.cd-hud-segment__value--warn { color: var(--cd-amber); }
+.cd-hud-segment__value--err  { color: var(--cd-neon-red); }
+
+/* Compact variant for dense UIs */
+.cd-hud-bar--compact .cd-hud-segment {
+  padding: 0 8px;
+  font-size: 8px;
+}
+
+.cd-hud-frame.cd-hud--compact {
+  padding: 8px 10px;
+}
+
+/* Floating / AR style */
+.cd-hud--floating {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  background: color-mix(in srgb, var(--cd-bg-surface) 70%, transparent);
+}
+
+/* Reduced motion (no extra pulses etc.) */
+@media (prefers-reduced-motion: reduce) {
+  .cd-hud-frame,
+  .cd-hud-bar {
+    box-shadow: none;
+  }
+}

package/src/css/components/image.css

@@ -0,0 +1,164 @@
+/* ── Images & Media Frames ─────────────────────────────────────────────────── */
+/*
+  Cyberpunk-styled image treatments and containers.
+  Use on <img> or <picture> elements, or wrap for frames.
+
+  Base:
+  <img class="cd-img" src="..." alt="...">
+
+  Framed / bordered:
+  <div class="cd-img-frame">
+    <img class="cd-img" src="..." />
+  </div>
+
+  Effects (apply to the img or wrapper):
+  .cd-img-glitch
+  .cd-img-scan   (adds CRT scan overlay)
+  .cd-img-crt    (scan + subtle flicker feel)
+  .cd-img-holo   (holographic glow + slight perspective on hover)
+
+  Compose with existing:
+  - .cd-glow, .cd-glow-card
+  - .cd-corners or .cd-aug-panel for clipped frames
+  - .cd-interference for noise over images
+  - .cd-vectorbg for SVG illustrations instead of photos
+
+  All respect --cd-* tokens and reduced-motion.
+*/
+
+.cd-img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border: 1px solid var(--cd-border);
+  background: var(--cd-bg-panel);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 6%, transparent);
+  object-fit: cover;
+  image-rendering: auto;
+}
+
+/* Neon / accent border variant */
+.cd-img--neon {
+  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--cd-accent) 20%, transparent),
+    0 0 12px color-mix(in srgb, var(--cd-accent) 18%, transparent);
+}
+
+/* Frame wrapper — adds outer structure, glow, and optional corners */
+.cd-img-frame {
+  position: relative;
+  display: inline-block;
+  padding: 3px;
+  background: var(--cd-bg);
+  border: 1px solid var(--cd-border-glow);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 8%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--cd-accent) 12%, transparent),
+    0 0 16px color-mix(in srgb, var(--cd-accent) 10%, transparent);
+}
+
+.cd-img-frame .cd-img {
+  border: 1px solid var(--cd-border-dim);
+  box-shadow: none;
+  width: 100%;
+  height: 100%;
+}
+
+.cd-img-frame--glow {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 12%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--cd-accent) 25%, transparent),
+    0 0 24px var(--cd-accent-glow);
+}
+
+/* Glitch effect — digital distortion / signal noise on the image */
+.cd-img-glitch {
+  position: relative;
+  overflow: hidden;
+}
+
+.cd-img-glitch img {
+  animation: cd-img-glitch-jitter 0.4s linear infinite alternate;
+  filter: contrast(1.1) saturate(1.05);
+}
+
+@keyframes cd-img-glitch-jitter {
+  0%   { transform: translate(0, 0); filter: hue-rotate(0deg) contrast(1.05); }
+  20%  { transform: translate(-1px, 1px); filter: hue-rotate(-8deg) contrast(1.15); }
+  40%  { transform: translate(1px, -1px); filter: hue-rotate(6deg) contrast(1.1); }
+  60%  { transform: translate(-2px, 0); filter: hue-rotate(4deg) contrast(1.2); }
+  80%  { transform: translate(1px, 1px); filter: hue-rotate(-5deg) contrast(1.08); }
+  100% { transform: translate(0, -1px); filter: hue-rotate(0deg) contrast(1.05); }
+}
+
+/* Scan / CRT overlay effect */
+.cd-img-scan,
+.cd-img-crt {
+  position: relative;
+}
+
+.cd-img-scan::after,
+.cd-img-crt::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    var(--cd-scanline-color) 2px,
+    var(--cd-scanline-color) 4px
+  );
+  mix-blend-mode: multiply;
+  z-index: 2;
+}
+
+.cd-img-crt::after {
+  opacity: 0.65;
+}
+
+/* Holographic / projection style */
+.cd-img-holo {
+  position: relative;
+  transition: transform 180ms ease, box-shadow 180ms ease;
+}
+
+.cd-img-holo:hover {
+  transform: perspective(600px) rotateX(3deg) rotateY(-4deg) translateY(-1px);
+  box-shadow:
+    0 10px 20px color-mix(in srgb, var(--cd-accent) 12%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--cd-accent) 30%, transparent),
+    0 0 18px var(--cd-accent-glow);
+}
+
+.cd-img-holo::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    135deg,
+    transparent 20%,
+    color-mix(in srgb, var(--cd-accent) 8%, transparent) 40%,
+    transparent 70%
+  );
+  mix-blend-mode: screen;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0.6;
+}
+
+/* Size helpers for frames */
+.cd-img-frame--sm .cd-img { max-height: 120px; }
+.cd-img-frame--lg .cd-img { max-height: 420px; }
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .cd-img-glitch img {
+    animation: none;
+  }
+  .cd-img-holo:hover {
+    transform: none;
+  }
+}

package/src/css/components/input-otp.css

@@ -0,0 +1,53 @@
+/* ── Input OTP ─────────────────────────────────────────────────────────────── */
+
+.cd-input-otp {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--cd-font-mono);
+}
+
+.cd-input-otp__slot {
+  width: 36px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--cd-border);
+  background: rgba(5, 6, 10, 0.82);
+  color: var(--cd-text);
+  font-size: var(--cd-text-lg);
+  font-weight: 700;
+  letter-spacing: 0;
+  text-align: center;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+  caret-color: var(--cd-accent);
+}
+
+.cd-input-otp__slot:focus {
+  outline: 2px solid var(--cd-accent);
+  outline-offset: 2px;
+  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--cd-accent) 20%, transparent);
+}
+
+.cd-input-otp__slot.is-filled {
+  border-color: color-mix(in srgb, var(--cd-accent) 40%, transparent);
+  color: var(--cd-accent);
+}
+
+.cd-input-otp__slot:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.cd-input-otp__sep {
+  color: var(--cd-text-dim);
+  font-weight: 700;
+}
+
+.cd-input-otp--sm .cd-input-otp__slot {
+  width: 28px;
+  height: 32px;
+  font-size: var(--cd-text-base);
+}