Add render demo to landing page

package.json

@@ -16,7 +16,8 @@
     "format": "npm run _format -- --write",
     "format:check": "npm run _format -- --check",
     "preinstall": "npx playwright install",
-    "test": "vitest"
+    "test": "vitest",
+    "generate:ansi-code": "bash src/utils/generateAnsiCode.sh"
   },
   "dependencies": {
     "@astro-community/astro-embed-youtube": "^0.5.6",
@@ -37,6 +38,7 @@
     "remark-svgbob": "^1.1.1",
     "sharp": "^0.33.5",
     "starlight-links-validator": "0.14.1",
+    "tachyonfx-renderer": "^0.2.1",
     "tailwindcss": "^4.1.14",
     "toml": "^3.0.0",
     "tree-sitter": "0.22.1",

src/components/CodeEffects.astro

@@ -0,0 +1,84 @@
+---
+// TachyonFX Code Animation
+
+import { readFile } from "fs/promises";
+import RatatuiVersion from "./RatatuiVersion.astro";
+import CopyButton from "./CopyButton.astro";
+import CodeExampleLabel from "./CodeExampleLabel.astro";
+
+// Read file at build time
+const code = await readFile("./code/tutorials/quickstart-ratatui/src/main.rs", "utf-8");
+---
+
+<div class="relative max-sm:hidden">
+  <RatatuiVersion />
+  <CopyButton code={code} class="absolute top-0 right-0" />
+  <div id="tachyon-canvas" class="bg-[#011627]"></div>
+  <CodeExampleLabel />
+</div>
+
+<script>
+  import init, { createRenderer, RendererConfig } from "tachyonfx-renderer";
+  import wasmUrl from "tachyonfx-renderer/tachyonfx_renderer_bg.wasm?url";
+  import { ANSI_CODE } from "../assets/code-example.ts";
+
+  const FIRE_EFFECT = `let content_area = Rect::new(0, 0, 80, 27);
+let screen_bg = Color::from_u32(0x020617);
+let content_bg = Color::from_u32(0x1E293B);
+
+let style = Style::default()
+    .fg(content_bg)
+    .bg(screen_bg);
+
+let boot_timer = (300, Interpolation::CircIn);
+let timer = (900, QuadIn);
+
+let startup = fx::evolve((EvolveSymbolSet::Shaded, style), boot_timer)
+    .with_pattern(RadialPattern::with_transition((0.5, 0.5), 10.0))
+    .with_area(content_area);
+
+// the effect runs reversed() so that the symbols appear
+// to flicker out; since it's reversed, the applied pattern
+// is the same as DissolvePattern if the effect wasn't reversed
+let inner_fire_fx = fx::evolve_from((EvolveSymbolSet::Quadrants, style), timer)
+    .with_pattern(CoalescePattern::new())
+    .with_area(content_area)
+    .reversed();
+
+// moving the rendered area upwards to mimic of fire
+let fire = fx::translate(inner_fire_fx, Offset { x: 0, y: -22 }, timer)
+    .with_area(content_area);
+
+let fade_in_text = fade_from(screen_bg, screen_bg, timer)
+    .with_filter(CellFilter::Text)
+    .with_area(content_area)
+    .with_pattern(CoalescePattern::new());
+
+
+fx::prolong_start(300, fx::sequence(&[
+    startup,
+    fx::parallel(&[
+        fx::fade_from(screen_bg, screen_bg, 300),
+        fire,
+        fade_in_text,
+    ])
+]))
+`;
+
+  async function initTachyon() {
+    try {
+      await init(wasmUrl);
+
+      const config = new RendererConfig("tachyon-canvas")
+        .withDsl(FIRE_EFFECT)
+        .withCanvas(ANSI_CODE);
+
+      const renderer = createRenderer(config);
+      document.getElementById("code-label")?.classList.remove("opacity-0");
+    } catch (error) {
+      console.error("Error:", error);
+    }
+  }
+
+  initTachyon();
+</script>

src/components/CodeExampleLabel.astro

@@ -0,0 +1,24 @@
+---
+// Footer label for landing page code sample
+---
+
+<div
+  class="absolute right-3 bottom-3 text-sm text-slate-500 opacity-0 transition-opacity"
+  id="code-label"
+>
+  (Powered by{" "}
+  <a
+    class="bg-slate-950 px-1 text-slate-300 hover:bg-slate-800"
+    href="https://github.com/orhun/ratzilla"
+    target="_blank">Ratzilla</a
+  >
+  {" "}
+  with{" "}
+  <a
+    class="bg-slate-950 px-1 text-slate-300 hover:bg-slate-800"
+    href="https://github.com/webassembly"
+    target="_blank"
+  >
+    WebAssembly</a
+  >)
+</div>

src/components/RatatuiVersion.astro

@@ -10,6 +10,6 @@ const version = await getRatatuiVersion("./code/tutorials/quickstart-ratatui/Car
     href=`https://github.com/ratatui/ratatui/releases/tag/ratatui-v0.30.0`
     target="_blank"
   >
-    <span class="landing-mono bg-slate-700 px-2 text-slate-300">0.30.0</span>
+    <span class="landing-mono bg-slate-950 px-2 text-slate-300 hover:bg-slate-800">0.30.0</span>
   </a>
 </div>

src/components/ShowcaseCard.astro

@@ -18,8 +18,8 @@ try {
 ---
 
 <div
-  class={`gallery-item grid h-[550px] min-w-[300px] bg-gradient-to-br from-slate-300 to-slate-400 max-sm:h-[300px] dark:from-slate-950 dark:to-slate-950 ${
-    colSpan === 1 ? "grid-rows-[1fr_5fr]" : "grid-cols-[1fr_4fr]"
+  class={`gallery-item grid min-w-[300px] bg-gradient-to-br from-slate-300 to-slate-400 max-sm:h-[300px] dark:from-slate-950 dark:to-slate-950 ${
+    colSpan === 1 ? "h-[600px] grid-rows-[1fr_5fr]" : "h-[550px] grid-cols-[1fr_4fr]"
   } max-sm:grid-cols-none max-sm:grid-rows-[1fr_5fr]`}
   data-col-span={colSpan}
 >

src/content/docs/index.mdx

@@ -23,7 +23,7 @@ import CompanyLogos from "@components/CompanyLogos.astro";
 import RandomDots from "@components/RandomDots.astro";
 import Features from "@components/Features.astro";
 import ScrambleText from "@components/ScrambleText.astro";
-import ScrambleCode from "@components/ScrambleCode.astro";
+import CodeEffects from "@components/CodeEffects.astro";
 import RatatuiVersion from "@components/RatatuiVersion.astro";
 import ShowcaseCards from "@components/ShowcaseCards.astro";
 import TutorialVideos from "@components/TutorialVideos.astro";
@@ -88,7 +88,7 @@ import ThemeSwitch from "@components/ThemeSwitch.astro";
             <SocialIcons />
             <ThemeSwitch />
           </div>
-          <ScrambleCode />
+          <CodeEffects />
         </div>
       </div>
     </div>