Add render demo to landing page

package.json

@@ -37,6 +37,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/assets/code-example-ansi.ts

@@ -0,0 +1,35 @@
+const pink = `\x1b[38;2;199;146;234m`;
+const green = `\x1b[38;2;173;219;103m`;
+const blue = `\x1b[38;2;130;170;255m`;
+const white = `\x1b[38;2;214;222;235m`;
+const cyan = `\x1b[38;2;127;219;202m`;
+const indent = `\x1b[48;2;1;22;39m \x1b[0m`;
+const blankLine = `\x1b[48;2;1;22;39m                                                                  \x1b[0m`;
+
+export const CODE_EXAMPLE = `${blankLine}
+${blankLine}
+${indent}\x1b[48;2;1;22;39m${pink}use\x1b[0m\x1b[48;2;1;22;39m${white} \x1b[0m\x1b[48;2;1;22;39m${white}ratatui\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${white}style\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${white}Stylize\x1b[0m\x1b[48;2;1;22;39m${white};                                     \x1b[0m
+${blankLine}
+${indent}\x1b[48;2;1;22;39m${pink}use\x1b[0m\x1b[48;2;1;22;39m${white} \x1b[0m\x1b[48;2;1;22;39m${white}ratatui\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${white}widgets\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${white}{\x1b[0m\x1b[48;2;1;22;39m${white}Block\x1b[0m\x1b[48;2;1;22;39m${white},\x1b[0m\x1b[48;2;1;22;39m${white} Paragraph\x1b[0m\x1b[48;2;1;22;39m${white}}\x1b[0m\x1b[48;2;1;22;39m${white};                        \x1b[0m
+${blankLine}
+${indent}\x1b[48;2;1;22;39m${pink}fn\x1b[0m\x1b[48;2;1;22;39m${white} \x1b[0m\x1b[48;2;1;22;39m${blue}main\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${white})\x1b[0m\x1b[48;2;1;22;39m${white} \x1b[0m\x1b[48;2;1;22;39m${cyan}->\x1b[0m\x1b[48;2;1;22;39m${white} \x1b[0m\x1b[48;2;1;22;39m${green}Result\x1b[0m\x1b[48;2;1;22;39m${white}<\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${white})\x1b[0m\x1b[48;2;1;22;39m${white}, \x1b[0m\x1b[48;2;1;22;39m${green}Box\x1b[0m\x1b[48;2;1;22;39m${white}<\x1b[0m\x1b[48;2;1;22;39m${pink}dyn \x1b[0m\x1b[48;2;1;22;39m${green}std\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${green}error\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${white}Error\x1b[0m\x1b[48;2;1;22;39m${white}>\x1b[0m\x1b[48;2;1;22;39m${white}>\x1b[0m\x1b[48;2;1;22;39m${white} \x1b[0m\x1b[48;2;1;22;39m${white}{            \x1b[0m
+${blankLine}
+${indent}\x1b[48;2;1;22;39m${white}    \x1b[0m\x1b[48;2;1;22;39m${white}ratatui\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${blue}run\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${pink}|\x1b[0m\x1b[48;2;1;22;39m${green}terminal\x1b[0m\x1b[48;2;1;22;39m${pink}|\x1b[0m\x1b[48;2;1;22;39m${white} \x1b[0m\x1b[48;2;1;22;39m${white}{                                    \x1b[0m
+${indent}\x1b[48;2;1;22;39m${green}        terminal\x1b[0m\x1b[48;2;1;22;39m${pink}.\x1b[0m\x1b[48;2;1;22;39m${blue}draw\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${pink}|\x1b[0m\x1b[48;2;1;22;39m${green}frame\x1b[0m\x1b[48;2;1;22;39m${pink}|\x1b[0m\x1b[48;2;1;22;39m${white} \x1b[0m\x1b[48;2;1;22;39m${white}{                                  \x1b[0m
+${indent}\x1b[48;2;1;22;39m${white}            \x1b[0m\x1b[48;2;1;22;39m${pink}let\x1b[0m\x1b[48;2;1;22;39m${green} block \x1b[0m\x1b[48;2;1;22;39m\x1b[38;2;127;219;202m=\x1b[0m\x1b[48;2;1;22;39m${white} \x1b[0m\x1b[48;2;1;22;39m${white}Block\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${blue}bordered\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${white})\x1b[0m\x1b[48;2;1;22;39m${pink}.\x1b[0m\x1b[48;2;1;22;39m${blue}title\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m\x1b[38;2;217;245;221m"\x1b[0m\x1b[48;2;1;22;39m\x1b[38;2;236;196;141mWelcome\x1b[0m\x1b[48;2;1;22;39m\x1b[38;2;217;245;221m"\x1b[0m\x1b[48;2;1;22;39m${white})\x1b[0m\x1b[48;2;1;22;39m${white};      \x1b[0m
+${blankLine}
+${indent}\x1b[48;2;1;22;39m${white}            \x1b[0m\x1b[48;2;1;22;39m${pink}let\x1b[0m\x1b[48;2;1;22;39m${green} greeting \x1b[0m\x1b[48;2;1;22;39m\x1b[38;2;127;219;202m=\x1b[0m\x1b[48;2;1;22;39m${white} \x1b[0m\x1b[48;2;1;22;39m${white}Paragraph\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${blue}new\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m\x1b[38;2;217;245;221m"\x1b[0m\x1b[48;2;1;22;39m\x1b[38;2;236;196;141mHello, Ratatui! 🐭\x1b[0m\x1b[48;2;1;22;39m\x1b[38;2;217;245;221m"\x1b[0m\x1b[48;2;1;22;39m${white})  \x1b[0m
+${indent}\x1b[48;2;1;22;39m${white}                \x1b[0m\x1b[48;2;1;22;39m${pink}.\x1b[0m\x1b[48;2;1;22;39m${blue}centered\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${white})                                      \x1b[0m
+${indent}\x1b[48;2;1;22;39m${white}                \x1b[0m\x1b[48;2;1;22;39m${pink}.\x1b[0m\x1b[48;2;1;22;39m${blue}yellow\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${white})                                        \x1b[0m
+${indent}\x1b[48;2;1;22;39m${white}                \x1b[0m\x1b[48;2;1;22;39m${pink}.\x1b[0m\x1b[48;2;1;22;39m${blue}block\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${green}block\x1b[0m\x1b[48;2;1;22;39m${white})\x1b[0m\x1b[48;2;1;22;39m${white};                                   \x1b[0m
+${blankLine}
+${indent}\x1b[48;2;1;22;39m${green}            frame\x1b[0m\x1b[48;2;1;22;39m${pink}.\x1b[0m\x1b[48;2;1;22;39m${blue}render_widget\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${green}greeting\x1b[0m\x1b[48;2;1;22;39m${white},\x1b[0m\x1b[48;2;1;22;39m${green} frame\x1b[0m\x1b[48;2;1;22;39m${pink}.\x1b[0m\x1b[48;2;1;22;39m${blue}area\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${white})\x1b[0m\x1b[48;2;1;22;39m${white})\x1b[0m\x1b[48;2;1;22;39m${white};         \x1b[0m
+${indent}\x1b[48;2;1;22;39m${white}        \x1b[0m\x1b[48;2;1;22;39m${white}}\x1b[0m\x1b[48;2;1;22;39m${white})\x1b[0m\x1b[48;2;1;22;39m\x1b[38;2;127;219;202m?\x1b[0m\x1b[48;2;1;22;39m${white};                                                     \x1b[0m
+${blankLine}
+${indent}\x1b[48;2;1;22;39m${white}        \x1b[0m\x1b[48;2;1;22;39m${white}std\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${white}thread\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${blue}sleep\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${white}std\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${white}time\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${white}Duration\x1b[0m\x1b[48;2;1;22;39m${pink}::\x1b[0m\x1b[48;2;1;22;39m${blue}from_secs\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m\x1b[38;2;247;140;108m5\x1b[0m\x1b[48;2;1;22;39m${white})\x1b[0m\x1b[48;2;1;22;39m${white})\x1b[0m\x1b[48;2;1;22;39m${white};   \x1b[0m
+${blankLine}
+${indent}\x1b[48;2;1;22;39m${white}        \x1b[0m\x1b[48;2;1;22;39m\x1b[38;2;173;219;103mOk\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${white}(\x1b[0m\x1b[48;2;1;22;39m${white})\x1b[0m\x1b[48;2;1;22;39m${white})                                                   \x1b[0m
+${blankLine}
+${indent}\x1b[48;2;1;22;39m${white}    \x1b[0m\x1b[48;2;1;22;39m${white}}\x1b[0m\x1b[48;2;1;22;39m${white})                                                           \x1b[0m
+${indent}\x1b[48;2;1;22;39m${white}}                                                                \x1b[0m
+${blankLine}`;

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 { CODE_EXAMPLE } from "../assets/code-example-ansi.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(CODE_EXAMPLE);
+
+      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>