shellfie 0.1.0 → 1.0.0

data/docs/scripts.js

@@ -0,0 +1,85 @@
+const observer = new IntersectionObserver(
+  (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add("is-visible");
+        observer.unobserve(entry.target);
+      }
+    });
+  },
+  { threshold: 0.2 }
+);
+
+document.querySelectorAll(".section, .card, .code-block, .terminal-card").forEach((el) => {
+  el.classList.add("fade-in");
+  observer.observe(el);
+});
+
+const typewriter = document.querySelector(".typewriter");
+if (typewriter) {
+  const rawLines = typewriter.dataset.lines || "";
+  const lines = rawLines.split("||");
+  const typingDelay = 45;
+  const lineDelay = 650;
+  const loopDelay = 5000;
+  let lineIndex = 0;
+  let charIndex = 0;
+
+  const cursor = document.createElement("span");
+  cursor.className = "typewriter__cursor";
+
+  const renderFrame = () => {
+    typewriter.innerHTML = "";
+    lines.forEach((line, index) => {
+      if (index > lineIndex) return;
+      const lineEl = document.createElement("div");
+      const isPrompt = line.trim().startsWith("$");
+      lineEl.className = `typewriter__line ${
+        isPrompt ? "typewriter__line--prompt" : "typewriter__line--output"
+      }`;
+      const text = index === lineIndex ? line.slice(0, charIndex) : line;
+      lineEl.textContent = text;
+      if (index === lineIndex) {
+        lineEl.appendChild(cursor);
+      }
+      typewriter.appendChild(lineEl);
+    });
+  };
+
+  const isInstantLine = (line) =>
+    line.startsWith("Generated:") || line.startsWith("Let the glow begin");
+
+  const typeNext = () => {
+    if (lineIndex >= lines.length) {
+      setTimeout(() => {
+        lineIndex = 0;
+        charIndex = 0;
+        typewriter.innerHTML = "";
+        typeNext();
+      }, loopDelay);
+      return;
+    }
+
+    if (isInstantLine(lines[lineIndex])) {
+      charIndex = lines[lineIndex].length;
+      renderFrame();
+      charIndex = 0;
+      lineIndex += 1;
+      setTimeout(typeNext, lineDelay);
+      return;
+    }
+
+    if (charIndex <= lines[lineIndex].length) {
+      renderFrame();
+      charIndex += 1;
+      setTimeout(typeNext, typingDelay);
+      return;
+    }
+
+    charIndex = 0;
+    lineIndex += 1;
+    setTimeout(typeNext, lineDelay);
+  };
+
+  typeNext();
+}

data/docs/styles.css

@@ -0,0 +1,507 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Share+Tech+Mono&display=swap");
+
+:root {
+  color-scheme: dark;
+  --bg: #0b0617;
+  --bg-alt: #140826;
+  --neon-pink: #ff5fd2;
+  --neon-blue: #52f2ff;
+  --neon-purple: #a07bff;
+  --neon-green: #34f5b4;
+  --neon-orange: #ff9f5f;
+  --neon-sun: #ff4fd8;
+  --text: #f3eaff;
+  --muted: #c2b0d8;
+  --card: rgba(18, 10, 34, 0.85);
+  --border: rgba(255, 255, 255, 0.08);
+  --glow: 0 0 24px rgba(255, 95, 210, 0.35);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: "Space Grotesk", "Segoe UI", sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 10% 20%, rgba(255, 95, 210, 0.15), transparent 40%),
+    radial-gradient(circle at 90% 10%, rgba(82, 242, 255, 0.2), transparent 45%),
+    linear-gradient(180deg, #1a0a2f 0%, #0b0617 55%, #05020c 100%);
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ambient-glow {
+  position: fixed;
+  inset: -30% auto auto -10%;
+  width: 60vw;
+  height: 60vw;
+  background: radial-gradient(circle, rgba(255, 95, 210, 0.25), rgba(10, 4, 16, 0));
+  filter: blur(14px);
+  z-index: 0;
+  pointer-events: none;
+}
+
+.sun-core {
+  position: fixed;
+  top: 8vh;
+  left: 70%;
+  width: 280px;
+  height: 280px;
+  background: radial-gradient(circle at 50% 35%, var(--neon-sun), #ff8ad2 40%, rgba(255, 79, 216, 0.2) 60%, transparent 70%);
+  border-radius: 50%;
+  opacity: 0.55;
+  filter: blur(1px) saturate(120%);
+  z-index: 0;
+  pointer-events: none;
+  box-shadow: 0 0 28px rgba(255, 79, 216, 0.45);
+  animation: sunfloat 6s ease-in-out infinite;
+}
+
+.scanlines {
+  position: fixed;
+  inset: 0;
+  background: repeating-linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.03),
+    rgba(255, 255, 255, 0.03) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+  mix-blend-mode: soft-light;
+  opacity: 0.18;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.stars {
+  position: fixed;
+  inset: 0;
+  background-image:
+    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px),
+    radial-gradient(circle at 38% 12%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px),
+    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
+    radial-gradient(circle at 86% 32%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
+    radial-gradient(circle at 18% 78%, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px),
+    radial-gradient(circle at 64% 62%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px);
+  opacity: 0.2;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.grid-floor {
+  position: fixed;
+  inset: auto 0 0 0;
+  height: 45vh;
+  background-image:
+    linear-gradient(transparent 60%, rgba(82, 242, 255, 0.12)),
+    repeating-linear-gradient(90deg, rgba(82, 242, 255, 0.1) 0 1px, transparent 1px 60px),
+    repeating-linear-gradient(0deg, rgba(82, 242, 255, 0.1) 0 1px, transparent 1px 60px);
+  transform: perspective(600px) rotateX(65deg);
+  transform-origin: bottom;
+  opacity: 0.2;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 6vw;
+  backdrop-filter: blur(12px);
+  background: rgba(7, 4, 15, 0.65);
+  border-bottom: 1px solid var(--border);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.brand__glyph {
+  font-size: 22px;
+  color: var(--neon-blue);
+  text-shadow: 0 0 12px rgba(82, 242, 255, 0.8);
+}
+
+.brand__title {
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.brand__subtitle {
+  display: block;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.topnav {
+  display: flex;
+  gap: 18px;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.topnav a {
+  position: relative;
+  padding-bottom: 4px;
+}
+
+.topnav a::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 2px;
+  background: var(--neon-pink);
+  transition: width 0.3s ease;
+}
+
+.topnav a:hover::after {
+  width: 100%;
+}
+
+.cta {
+  padding: 10px 18px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  font-weight: 600;
+  background: linear-gradient(120deg, rgba(160, 123, 255, 0.2), rgba(255, 95, 210, 0.2));
+  box-shadow: var(--glow);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
+}
+
+.cta--primary {
+  background: linear-gradient(120deg, var(--neon-pink), var(--neon-purple));
+  color: #0b0617;
+}
+
+.cta--ghost {
+  background: transparent;
+  border: 1px solid rgba(255, 95, 210, 0.6);
+}
+
+.cta:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 0 28px rgba(255, 95, 210, 0.45);
+  filter: brightness(1.08);
+}
+
+.cta:active {
+  transform: translateY(0) scale(0.99);
+  box-shadow: 0 0 18px rgba(255, 95, 210, 0.35);
+}
+
+main {
+  position: relative;
+  z-index: 1;
+  padding: 0 6vw 80px;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 48px;
+  padding: 80px 0 40px;
+  align-items: center;
+}
+
+.hero h1 {
+  font-size: clamp(32px, 5vw, 56px);
+  line-height: 1.05;
+  margin: 0 0 20px;
+  background: linear-gradient(90deg, #ffffff, #ffb6f5 35%, #7cf6ff 65%, #ffffff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.hero__lead {
+  color: var(--muted);
+  font-size: 18px;
+  line-height: 1.6;
+}
+
+.hero__actions {
+  display: flex;
+  gap: 16px;
+  margin: 24px 0;
+}
+
+.hero__meta {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.eyebrow {
+  font-family: "Share Tech Mono", "Courier New", monospace;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  font-size: 12px;
+  color: var(--neon-green);
+  margin-bottom: 12px;
+}
+
+.hero__preview {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+
+.terminal-card {
+  background: var(--card);
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
+  width: min(100%, 420px);
+  overflow: hidden;
+}
+
+.terminal-card__bar {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  background: rgba(9, 5, 19, 0.8);
+}
+
+.terminal-card__bar span {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: rgba(255, 95, 210, 0.6);
+  box-shadow: 0 0 8px rgba(255, 95, 210, 0.6);
+}
+
+.terminal-card__bar span:nth-child(2) {
+  background: rgba(82, 242, 255, 0.7);
+}
+
+.terminal-card__bar span:nth-child(3) {
+  background: rgba(52, 245, 180, 0.7);
+}
+
+.terminal-card__body {
+  font-family: "Share Tech Mono", "Courier New", monospace;
+  padding: 20px;
+  font-size: 14px;
+  color: #e9d7ff;
+  background: linear-gradient(180deg, rgba(17, 9, 29, 0.9), rgba(9, 5, 19, 0.95));
+}
+
+.typewriter {
+  min-height: 110px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.typewriter__line {
+  color: #e9d7ff;
+}
+
+.typewriter__line--prompt {
+  color: var(--neon-blue);
+}
+
+.typewriter__line--output {
+  color: #f7b6ff;
+}
+
+.typewriter__cursor {
+  display: inline-block;
+  width: 10px;
+  height: 16px;
+  margin-left: 4px;
+  background: var(--neon-green);
+  animation: caret 0.9s steps(1) infinite;
+  vertical-align: text-bottom;
+}
+
+@keyframes caret {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.prompt {
+  color: var(--neon-blue);
+}
+
+.output {
+  color: #f7b6ff;
+}
+
+.section {
+  padding: 80px 0;
+}
+
+.section--alt {
+  background: rgba(20, 8, 38, 0.6);
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 80px 6vw;
+  margin: 0 -6vw;
+}
+
+.section__header h2 {
+  margin: 0 0 12px;
+  font-size: clamp(26px, 4vw, 40px);
+}
+
+.section__lead {
+  color: var(--muted);
+  font-size: 16px;
+  max-width: 640px;
+}
+
+.grid {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  margin-top: 36px;
+}
+
+.card {
+  padding: 24px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+}
+
+.split {
+  display: grid;
+  gap: 28px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  margin-top: 36px;
+}
+
+.code-block {
+  background: #0a0618;
+  border-radius: 16px;
+  border: 1px solid rgba(82, 242, 255, 0.2);
+  padding: 18px 20px;
+  box-shadow: inset 0 0 24px rgba(82, 242, 255, 0.08);
+}
+
+.code-block h3 {
+  margin-top: 0;
+}
+
+.code-block pre {
+  margin: 12px 0 0;
+  font-family: "Share Tech Mono", "Courier New", monospace;
+  color: #bfefff;
+  white-space: pre-wrap;
+}
+
+.code-block--wide {
+  max-width: 860px;
+}
+
+.theme-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin: 24px 0;
+}
+
+.theme-pill {
+  padding: 8px 16px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 95, 210, 0.4);
+  font-size: 14px;
+  background: rgba(255, 95, 210, 0.08);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.footer {
+  padding: 40px 6vw 60px;
+  text-align: center;
+  color: var(--muted);
+  border-top: 1px solid var(--border);
+}
+
+.fade-in {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.fade-in.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@keyframes sunfloat {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 900px) {
+  .topbar {
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .topnav {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .hero {
+    padding-top: 50px;
+  }
+
+  .section--alt {
+    padding: 60px 6vw;
+  }
+}
+
+@media (max-width: 600px) {
+  .hero__actions {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .topbar {
+    padding: 18px 6vw;
+  }
+
+  .topnav {
+    gap: 12px;
+    font-size: 13px;
+  }
+}

data/examples/simple.yml

@@ -11,11 +11,11 @@ lines:
     command: "gem install shellfie"
 
   - output: |
-      Fetching shellfie-0.1.0.gem
-      Successfully installed shellfie-0.1.0
+      Fetching shellfie-1.0.0.gem
+      Successfully installed shellfie-1.0.0
       1 gem installed
 
   - prompt: "$ "
     command: "shellfie --version"
 
-  - output: "shellfie 0.1.0"
+  - output: "shellfie 1.0.0"