Animated ASCII Wordmark

Standalone demo and reusable canvas engine for an animated ASCII wordmark inspired by the style seen on jules.google.

Run locally

From project root:

python3 -m http.server 4173

Then open http://localhost:4173.

What is inside

• index.html: demo page (standalone, no framework).
• src/ascii-wordmark.js: reusable canvas engine.
• src/demo.js: demo wiring.
• src/demo.css: demo layout styling.

How the effect works

1. Text (CVRN) is rasterized to an offscreen low-res canvas.
2. Pixel intensity is converted into ASCII glyphs from a charset.
3. The visible canvas redraws those glyphs every animation frame.
4. Extra floating particles are rendered around the wordmark for motion.

This makes the element portable and framework-agnostic.

Reuse in another web page

<canvas id="hero"></canvas>
<script type="module">
  import { createAsciiWordmark } from "./src/ascii-wordmark.js";

  createAsciiWordmark(document.getElementById("hero"), {
    text: "CVRN",
    cellSize: 16
  });
</script>

Reuse in a React / Next.js app (or any app shell)

Wrap the class in a small React client component:

"use client";
import { useEffect, useRef } from "react";
import { AsciiWordmark } from "@/lib/ascii-wordmark";

export function AsciiHero({ text = "CVRN" }) {
  const ref = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    if (!ref.current) return;
    const engine = new AsciiWordmark(ref.current, { text });
    return () => engine.destroy();
  }, [text]);

  return <canvas ref={ref} className="h-[320px] w-full" />;
}

For framework integration, first copy src/ascii-wordmark.js into your app (for example src/lib/ascii-wordmark.js) and then use the import shown above.

License

MIT