astro-component-kit 0.3.1 → 0.4.0

package/src/components/lib/typography/CurvedPathHeading.astro

@@ -0,0 +1,86 @@
+---
+/**
+ * CurvedPathHeading — Typographic heading flowing along an SVG circular or arched trajectory.
+ * 
+ * @param {string} text - Headline text content. Default is 'ASTRO COMPONENTS KIT • ZERO RUNTIME DEPENDENCIES •'.
+ * @param {number} size - Pixel container diameter. Default is 260.
+ * @param {boolean} animate - Whether the badge rotates continuously. Default is true.
+ */
+interface Props {
+  text?: string;
+  size?: number;
+  animate?: boolean;
+}
+
+const {
+  text = 'ASTRO COMPONENTS KIT • ZERO RUNTIME • PURE CSS •',
+  size = 260,
+  animate = true,
+} = Astro.props;
+
+const pathId = `curve-path-${Math.random().toString(36).substring(2, 8)}`;
+---
+
+<div class:list={['curved-heading', { 'is-animated': animate }]} style={`--curved-size: ${size}px;`}>
+  <svg viewBox="0 0 300 300" width={size} height={size}>
+    <defs>
+      <path
+        id={pathId}
+        d="M 150, 150 m -110, 0 a 110,110 0 1,1 220,0 a 110,110 0 1,1 -220,0"
+      />
+    </defs>
+    <text class="curved-heading__text">
+      <textPath href={`#${pathId}`} startOffset="0%">
+        {text}
+      </textPath>
+    </text>
+  </svg>
+  <div class="curved-heading__core">✦</div>
+</div>
+
+<style>
+  .curved-heading {
+    position: relative;
+    width: var(--curved-size);
+    height: var(--curved-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-sans, system-ui, sans-serif);
+    user-select: none;
+  }
+
+  .curved-heading.is-animated svg {
+    animation: curved-spin 20s linear infinite;
+  }
+
+  .curved-heading__text {
+    font-size: 13.5px;
+    font-weight: 800;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    fill: var(--c-primary-light, #d4a017);
+  }
+
+  .curved-heading__core {
+    position: absolute;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: rgba(184, 134, 11, 0.12);
+    border: 1px solid rgba(184, 134, 11, 0.3);
+    color: var(--c-accent, #fef3c7);
+    display: grid;
+    place-items: center;
+    font-size: 1.2rem;
+  }
+
+  @keyframes curved-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .curved-heading.is-animated svg { animation: none; }
+  }
+</style>

package/src/components/lib/typography/GradientTextMarquee.astro

@@ -0,0 +1,105 @@
+---
+/**
+ * GradientTextMarquee — Continuous kinetic typographic marquee banner with background-clip gold gradient.
+ * 
+ * @param {string[]} phrases - Array of words or slogans to scroll continuously.
+ * @param {string} speed - Animation duration string (e.g. '25s'). Default is '20s'.
+ * @param {boolean} reverse - Whether the marquee moves in reverse direction.
+ */
+interface Props {
+  phrases?: string[];
+  speed?: string;
+  reverse?: boolean;
+}
+
+const {
+  phrases = [
+    'PERFORMANCE FIRST',
+    'ZERO DEPENDENCIES',
+    'ACCESSIBLE WCAG AA',
+    'ASTRO 5 READY',
+    'DARK GLASS MORPHISM',
+  ],
+  speed = '20s',
+  reverse = false,
+} = Astro.props;
+---
+
+<div class="grad-marquee" style={`--marquee-speed: ${speed};`} aria-label="Animated slogan marquee">
+  <div class:list={['grad-marquee__track', { 'is-reverse': reverse }]}>
+    {phrases.map((phrase) => (
+      <span class="grad-marquee__item">
+        <span class="text">{phrase}</span>
+        <span class="dot" aria-hidden="true">✦</span>
+      </span>
+    ))}
+    {/* Duplicate loop */}
+    {phrases.map((phrase) => (
+      <span class="grad-marquee__item" aria-hidden="true">
+        <span class="text">{phrase}</span>
+        <span class="dot" aria-hidden="true">✦</span>
+      </span>
+    ))}
+  </div>
+</div>
+
+<style>
+  .grad-marquee {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    padding: var(--sp-4, 1rem) 0;
+    user-select: none;
+    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
+    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+
+  .grad-marquee__track {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    width: max-content;
+    animation: marquee-roll var(--marquee-speed) linear infinite;
+  }
+
+  .grad-marquee__track:hover {
+    animation-play-state: paused;
+  }
+
+  .grad-marquee__track.is-reverse {
+    animation-direction: reverse;
+  }
+
+  .grad-marquee__item {
+    display: inline-flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .grad-marquee__item .text {
+    font-size: clamp(1.8rem, 4vw, 3.2rem);
+    font-weight: 900;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    background: linear-gradient(135deg, #ffffff 0%, #fef3c7 40%, #d4a017 80%, #b8860b 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    white-space: nowrap;
+  }
+
+  .grad-marquee__item .dot {
+    color: var(--c-primary-light, #d4a017);
+    font-size: 1.2rem;
+  }
+
+  @keyframes marquee-roll {
+    from { transform: translateX(0); }
+    to { transform: translateX(-50%); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .grad-marquee__track { animation: none; overflow-x: auto; }
+  }
+</style>

package/src/components/lib/typography/HackerDecodeText.astro

@@ -0,0 +1,85 @@
+---
+/**
+ * HackerDecodeText — Cyberpunk Matrix-style randomized character deciphering effect on hover.
+ * 
+ * @param {string} text - Final decoded text string. Default is 'CYBERNETIC SYSTEM READY'.
+ * @param {string} tag - HTML heading or paragraph tag. Default is 'h3'.
+ * @param {string} className - Optional CSS class names.
+ */
+interface Props {
+  text?: string;
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span';
+  className?: string;
+}
+
+const {
+  text = 'CYBERNETIC PROTOCOL ONLINE',
+  tag: Tag = 'h3',
+  className = '',
+} = Astro.props;
+---
+
+<Tag
+  class:list={['hacker-text', className]}
+  data-hacker-text={text}
+  title="Hover to decode"
+>
+  {text}
+</Tag>
+
+<style>
+  .hacker-text {
+    font-family: var(--font-mono, 'JetBrains Mono', monospace);
+    font-size: clamp(1.2rem, 3vw, 2rem);
+    font-weight: 800;
+    color: var(--c-primary-light, #d4a017);
+    letter-spacing: 0.08em;
+    cursor: default;
+    user-select: none;
+    transition: text-shadow 0.2s ease;
+  }
+
+  .hacker-text:hover {
+    text-shadow: 0 0 12px rgba(212, 160, 23, 0.7);
+  }
+</style>
+
+<script>
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;:,.<>?';
+
+  function setupHackerText() {
+    document.querySelectorAll('[data-hacker-text]').forEach((el) => {
+      if (el.getAttribute('data-hacker-init')) return;
+      el.setAttribute('data-hacker-init', 'true');
+
+      const original = el.getAttribute('data-hacker-text') || el.textContent || '';
+      let interval: any = null;
+
+      el.addEventListener('pointerenter', () => {
+        let iteration = 0;
+        clearInterval(interval);
+
+        interval = setInterval(() => {
+          el.textContent = original
+            .split('')
+            .map((char, index) => {
+              if (char === ' ') return ' ';
+              if (index < iteration) {
+                return original[index];
+              }
+              return chars[Math.floor(Math.random() * chars.length)];
+            })
+            .join('');
+
+          if (iteration >= original.length) {
+            clearInterval(interval);
+          }
+          iteration += 1 / 2;
+        }, 30);
+      });
+    });
+  }
+
+  setupHackerText();
+  document.addEventListener('astro:page-load', setupHackerText);
+</script>

package/src/components/lib/typography/index.ts

@@ -21,3 +21,7 @@ export { default as ShadowRevealText } from './ShadowRevealText.astro';
 export { default as StrokeHeadingOutline } from './StrokeHeadingOutline.astro';
 export { default as Text3DLayer } from './Text3DLayer.astro';
 export { default as TypewriterText } from './TypewriterText.astro';
+export { default as AnimatedCounterText } from './AnimatedCounterText.astro';
+export { default as GradientTextMarquee } from './GradientTextMarquee.astro';
+export { default as CurvedPathHeading } from './CurvedPathHeading.astro';
+export { default as HackerDecodeText } from './HackerDecodeText.astro';

package/src/styles/global.css

@@ -26,6 +26,21 @@
   --c-text-2:        #a3a3a3;
   --c-text-3:        #737373;
 
+  /* Data-viz — categorical slots (fixed order, CVD-validated for dark surfaces) */
+  --chart-1:         #3987e5;   /* blue    */
+  --chart-2:         #d95926;   /* orange  */
+  --chart-3:         #199e70;   /* aqua    */
+  --chart-4:         #c98500;   /* yellow  */
+  --chart-5:         #d55181;   /* magenta */
+  --chart-6:         #2f9e2f;   /* green   */
+  --chart-7:         #9085e9;   /* violet  */
+  --chart-8:         #e66767;   /* red     */
+  --chart-pos:       #34c38f;   /* status: good     */
+  --chart-neg:       #f06a6a;   /* status: critical */
+  --chart-grid:      rgba(255,255,255,0.07);
+  --chart-axis:      rgba(255,255,255,0.18);
+  --chart-surface:   #0d0d0f;
+
   /* Typography */
   --font-sans:  'Inter', system-ui, sans-serif;
   --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
@@ -35,8 +50,10 @@
   --sp-2: 0.5rem;    /* 8px  */
   --sp-3: 0.75rem;   /* 12px */
   --sp-4: 1rem;      /* 16px */
+  --sp-5: 1.25rem;   /* 20px */
   --sp-6: 1.5rem;    /* 24px */
   --sp-8: 2rem;      /* 32px */
+  --sp-10: 2.5rem;   /* 40px */
   --sp-12: 3rem;     /* 48px */
   --sp-16: 4rem;     /* 64px */
 
@@ -48,7 +65,7 @@
   --r-full: 9999px;
 
   /* Sidebar */
-  --sidebar-w: 260px;
+  --sidebar-w: 280px;
   --header-h:  85px;
 }