@alikhalilll/a-skeleton 1.1.0 → 1.2.0

package/.media/hero.svg

@@ -0,0 +1,232 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1718 1160" width="1718" height="1160" role="img" aria-label="ASkeleton — a real profile card on the left transforms into its shimmering skeleton replica on the right, layered with a stack of variant primitives at the bottom">
+  <defs>
+    <!-- Backdrop — same purple family as ATelInput hero. -->
+    <radialGradient id="bg" cx="50%" cy="32%" r="78%">
+      <stop offset="0%" stop-color="#3f2167"/>
+      <stop offset="55%" stop-color="#28153f"/>
+      <stop offset="100%" stop-color="#0a0410"/>
+    </radialGradient>
+
+    <radialGradient id="cardSurface" cx="50%" cy="0%" r="100%">
+      <stop offset="0%" stop-color="#1d142b"/>
+      <stop offset="100%" stop-color="#10081a"/>
+    </radialGradient>
+
+    <linearGradient id="cardOutline" x1="50%" y1="0%" x2="50%" y2="100%">
+      <stop offset="0%" stop-color="#3a2a5a" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#1f1638" stop-opacity="0.4"/>
+    </linearGradient>
+
+    <!-- Shimmer bar gradients — animated feel via two-stop highlight. -->
+    <linearGradient id="shimmer" x1="0%" y1="50%" x2="100%" y2="50%">
+      <stop offset="0%" stop-color="#3a4458"/>
+      <stop offset="50%" stop-color="#7c89a8"/>
+      <stop offset="100%" stop-color="#3a4458"/>
+    </linearGradient>
+
+    <linearGradient id="shimmerWarm" x1="0%" y1="50%" x2="100%" y2="50%">
+      <stop offset="0%" stop-color="#4a3f5e"/>
+      <stop offset="50%" stop-color="#a78bfa"/>
+      <stop offset="100%" stop-color="#4a3f5e"/>
+    </linearGradient>
+
+    <linearGradient id="shimmerLight" x1="0%" y1="50%" x2="100%" y2="50%">
+      <stop offset="0%" stop-color="#525d7a"/>
+      <stop offset="50%" stop-color="#9aa6c0"/>
+      <stop offset="100%" stop-color="#525d7a"/>
+    </linearGradient>
+
+    <!-- Card glow + shadow. -->
+    <filter id="cardShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="20"/>
+      <feOffset dy="30"/>
+      <feComponentTransfer><feFuncA type="linear" slope="0.50"/></feComponentTransfer>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="30"/>
+    </filter>
+
+    <!-- Arrow tip. -->
+    <marker id="arrowTip" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#c4b5fd"/>
+    </marker>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1718" height="1160" fill="url(#bg)"/>
+
+  <!-- Decorative glow accents -->
+  <circle cx="200" cy="280" r="180" fill="#7c3aed" opacity="0.18" filter="url(#glow)"/>
+  <circle cx="1518" cy="320" r="220" fill="#a78bfa" opacity="0.15" filter="url(#glow)"/>
+  <circle cx="859" cy="900" r="260" fill="#10b981" opacity="0.10" filter="url(#glow)"/>
+
+  <!-- ============================================================ -->
+  <!-- TITLE BLOCK                                                   -->
+  <!-- ============================================================ -->
+  <g transform="translate(859, 110)">
+    <rect x="-185" y="-30" width="370" height="40" rx="20" fill="#a78bfa" fill-opacity="0.10" stroke="#a78bfa" stroke-opacity="0.35" stroke-width="1.5"/>
+    <text x="0" y="-3" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="14" fill="#c4b5fd" text-anchor="middle" letter-spacing="0.22em" font-weight="700">@ALIKHALILLL / A-SKELETON</text>
+
+    <text x="0" y="68" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="52" fill="#f4f3f8" text-anchor="middle" font-weight="700" letter-spacing="-0.02em">A self-generating skeleton loader</text>
+    <text x="0" y="124" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="24" fill="#a09bb8" text-anchor="middle" font-weight="400">clone · mirror · structural   ·   fifteen variant primitives   ·   themeable</text>
+  </g>
+
+  <!-- ============================================================ -->
+  <!-- LEFT CARD — real content                                      -->
+  <!-- ============================================================ -->
+  <g transform="translate(140, 330)" filter="url(#cardShadow)">
+    <rect width="660" height="480" rx="28" fill="url(#cardSurface)" stroke="url(#cardOutline)" stroke-width="1.5"/>
+
+    <!-- Recommended pill -->
+    <rect x="46" y="46" width="210" height="44" rx="22" fill="#10b981" fill-opacity="0.18" stroke="#10b981" stroke-opacity="0.45" stroke-width="1.5"/>
+    <text x="151" y="74" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="15" font-weight="700" fill="#10b981" text-anchor="middle" letter-spacing="0.14em">RECOMMENDED</text>
+
+    <!-- Avatar -->
+    <circle cx="92" cy="180" r="42" fill="#7c3aed"/>
+    <text x="92" y="194" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="32" font-weight="700" fill="#ffffff" text-anchor="middle">MH</text>
+
+    <!-- Name -->
+    <text x="160" y="166" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="28" font-weight="700" fill="#f4f3f8">Maya Hartman</text>
+    <!-- Role -->
+    <text x="160" y="198" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="14" font-weight="600" fill="#8b85a0" letter-spacing="0.10em">SENIOR PLATFORM ENGINEER</text>
+
+    <!-- Description (absolute y per line) -->
+    <text x="46" y="278" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="18" fill="#bdb8d0">Builds developer tools and component libraries.</text>
+    <text x="46" y="308" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="18" fill="#bdb8d0">Currently exploring runtime DOM introspection for</text>
+    <text x="46" y="338" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="18" fill="#bdb8d0">self-generating skeleton loaders.</text>
+
+    <!-- Button -->
+    <rect x="46" y="384" width="240" height="56" rx="14" fill="#10b981"/>
+    <text x="166" y="420" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="18" font-weight="600" fill="#ffffff" text-anchor="middle">View profile</text>
+  </g>
+
+  <!-- Caption under left card -->
+  <text x="470" y="858" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="18" fill="#8b85a0" text-anchor="middle">
+    <tspan font-weight="700" fill="#e9e5f8">&lt;ASkeleton :loading=&quot;false&quot;&gt;</tspan><tspan>   ·   real content</tspan>
+  </text>
+
+  <!-- ============================================================ -->
+  <!-- TRANSFORMATION ARROWS                                         -->
+  <!-- ============================================================ -->
+  <g transform="translate(859, 570)">
+    <line x1="-60" y1="0" x2="60" y2="0" stroke="#c4b5fd" stroke-width="3" stroke-linecap="round" marker-end="url(#arrowTip)"/>
+    <text x="0" y="-22" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="17" fill="#c4b5fd" text-anchor="middle" font-weight="600">capture</text>
+    <text x="0" y="36" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="17" fill="#c4b5fd" text-anchor="middle" font-weight="600">replay</text>
+  </g>
+
+  <!-- ============================================================ -->
+  <!-- RIGHT CARD — skeleton replica                                 -->
+  <!-- ============================================================ -->
+  <g transform="translate(918, 330)" filter="url(#cardShadow)">
+    <rect width="660" height="480" rx="28" fill="url(#cardSurface)" stroke="url(#cardOutline)" stroke-width="1.5"/>
+
+    <!-- Badge skeleton -->
+    <rect x="46" y="46" width="210" height="44" rx="22" fill="url(#shimmerWarm)" opacity="0.95"/>
+
+    <!-- Avatar skeleton -->
+    <circle cx="92" cy="180" r="42" fill="url(#shimmer)" opacity="0.95"/>
+
+    <!-- Name bar -->
+    <rect x="160" y="148" width="320" height="28" rx="6" fill="url(#shimmerLight)" opacity="0.95"/>
+    <!-- Role bar -->
+    <rect x="160" y="186" width="240" height="14" rx="3" fill="url(#shimmer)" opacity="0.65"/>
+
+    <!-- Paragraph bars -->
+    <rect x="46" y="266" width="568" height="16" rx="4" fill="url(#shimmer)" opacity="0.85"/>
+    <rect x="46" y="294" width="568" height="16" rx="4" fill="url(#shimmer)" opacity="0.85"/>
+    <rect x="46" y="322" width="380" height="16" rx="4" fill="url(#shimmer)" opacity="0.85"/>
+
+    <!-- Button skeleton -->
+    <rect x="46" y="384" width="240" height="56" rx="14" fill="url(#shimmerWarm)" opacity="0.95"/>
+  </g>
+
+  <!-- Caption under right card -->
+  <text x="1248" y="858" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="18" fill="#8b85a0" text-anchor="middle">
+    <tspan font-weight="700" fill="#e9e5f8">&lt;ASkeleton :loading=&quot;true&quot;&gt;</tspan><tspan>   ·   shimmer replica</tspan>
+  </text>
+
+  <!-- ============================================================ -->
+  <!-- VARIANT RAIL — fifteen primitives strip                        -->
+  <!-- ============================================================ -->
+  <g transform="translate(140, 920)">
+    <rect width="1438" height="180" rx="22" fill="url(#cardSurface)" stroke="url(#cardOutline)" stroke-width="1.5"/>
+
+    <text x="32" y="44" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="13" fill="#c4b5fd" letter-spacing="0.16em" font-weight="700">FIFTEEN VARIANT PRIMITIVES</text>
+
+    <!-- Avatar -->
+    <circle cx="60" cy="118" r="22" fill="url(#shimmer)"/>
+    <text x="60" y="166" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="11" fill="#8b85a0" text-anchor="middle">Avatar</text>
+
+    <!-- Heading + text -->
+    <rect x="105" y="92" width="120" height="14" rx="3" fill="url(#shimmerLight)"/>
+    <rect x="105" y="116" width="120" height="9" rx="2" fill="url(#shimmer)" opacity="0.7"/>
+    <rect x="105" y="131" width="100" height="9" rx="2" fill="url(#shimmer)" opacity="0.7"/>
+    <text x="165" y="166" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="11" fill="#8b85a0" text-anchor="middle">Text</text>
+
+    <!-- Image -->
+    <rect x="260" y="88" width="80" height="56" rx="6" fill="url(#shimmer)"/>
+    <text x="300" y="166" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="11" fill="#8b85a0" text-anchor="middle">Image</text>
+
+    <!-- Button -->
+    <rect x="365" y="105" width="90" height="32" rx="8" fill="url(#shimmerWarm)"/>
+    <text x="410" y="166" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="11" fill="#8b85a0" text-anchor="middle">Button</text>
+
+    <!-- Input -->
+    <rect x="480" y="105" width="120" height="32" rx="6" fill="none" stroke="url(#shimmer)" stroke-width="2"/>
+    <rect x="490" y="116" width="30" height="10" rx="2" fill="url(#shimmer)"/>
+    <text x="540" y="166" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="11" fill="#8b85a0" text-anchor="middle">Input</text>
+
+    <!-- Chip -->
+    <rect x="630" y="108" width="46" height="22" rx="11" fill="url(#shimmer)"/>
+    <rect x="682" y="108" width="60" height="22" rx="11" fill="url(#shimmer)"/>
+    <text x="690" y="166" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="11" fill="#8b85a0" text-anchor="middle">Chip</text>
+
+    <!-- Card -->
+    <rect x="770" y="84" width="120" height="68" rx="8" fill="url(#cardSurface)" stroke="url(#shimmer)" stroke-width="1.5"/>
+    <rect x="780" y="94" width="36" height="36" rx="4" fill="url(#shimmer)"/>
+    <rect x="824" y="96" width="56" height="9" rx="2" fill="url(#shimmerLight)"/>
+    <rect x="824" y="112" width="50" height="6" rx="2" fill="url(#shimmer)" opacity="0.7"/>
+    <text x="830" y="166" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="11" fill="#8b85a0" text-anchor="middle">Card</text>
+
+    <!-- Table -->
+    <g transform="translate(920, 84)">
+      <rect width="120" height="14" rx="2" fill="url(#shimmerLight)"/>
+      <rect y="20" width="120" height="9" rx="2" fill="url(#shimmer)" opacity="0.7"/>
+      <rect y="34" width="120" height="9" rx="2" fill="url(#shimmer)" opacity="0.7"/>
+      <rect y="48" width="120" height="9" rx="2" fill="url(#shimmer)" opacity="0.7"/>
+      <rect y="62" width="120" height="9" rx="2" fill="url(#shimmer)" opacity="0.7"/>
+    </g>
+    <text x="980" y="166" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="11" fill="#8b85a0" text-anchor="middle">Table</text>
+
+    <!-- Chart -->
+    <g transform="translate(1070, 92)">
+      <rect y="48" width="14" height="14" rx="2" fill="url(#shimmer)"/>
+      <rect x="20" y="32" width="14" height="30" rx="2" fill="url(#shimmer)"/>
+      <rect x="40" y="20" width="14" height="42" rx="2" fill="url(#shimmer)"/>
+      <rect x="60" y="40" width="14" height="22" rx="2" fill="url(#shimmer)"/>
+      <rect x="80" y="10" width="14" height="52" rx="2" fill="url(#shimmer)"/>
+      <rect x="100" y="28" width="14" height="34" rx="2" fill="url(#shimmer)"/>
+    </g>
+    <text x="1127" y="166" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="11" fill="#8b85a0" text-anchor="middle">Chart</text>
+
+    <!-- List item -->
+    <g transform="translate(1190, 96)">
+      <circle cx="14" cy="22" r="14" fill="url(#shimmer)"/>
+      <rect x="36" y="10" width="100" height="11" rx="2" fill="url(#shimmerLight)"/>
+      <rect x="36" y="26" width="80" height="8" rx="2" fill="url(#shimmer)" opacity="0.7"/>
+    </g>
+    <text x="1260" y="166" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="11" fill="#8b85a0" text-anchor="middle">List</text>
+
+    <!-- Divider -->
+    <rect x="1340" y="118" width="80" height="3" rx="1.5" fill="url(#shimmer)"/>
+    <text x="1380" y="166" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="11" fill="#8b85a0" text-anchor="middle">Divider</text>
+  </g>
+
+  <!-- Bottom signature -->
+  <text x="859" y="1142" font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="13" fill="#6b6582" text-anchor="middle" letter-spacing="0.12em">vue 3   ·   nuxt 3+   ·   typescript-first   ·   ssr-safe (mirror)</text>
+</svg>