Cap ASCII logo text at 5 letters

content/docs/components/ascii-logo.mdx

@@ -50,6 +50,8 @@ export function FooterMark() {
   </FrameworkSvelte>
 </FrameworkCode>
 
+`text` is limited to 5 letters. Extra characters are dropped.
+
 Pass `src` to sample an image instead of text — any raster, or a same-origin SVG.
 
 <FrameworkCode>
@@ -71,7 +73,7 @@ Clicks cycle `logo → scattered → fallen → returning → logo`. Hover repul
 
 | Prop              | Type                          | Default                         |
 | ----------------- | ----------------------------- | ------------------------------- |
-| `text`            | `string`                      | `"23rd"`                        |
+| `text`            | `string`                      | `"23rd"` (max 5 letters)        |
 | `src`             | `string`                      | —                               |
 | `fit`             | `number`                      | `0.82`                          |
 | `cellSize`        | `number`                      | `11`                            |

registry/ascii-logo/ascii-logo-demo.tsx

@@ -15,6 +15,8 @@ import { useHydratedTheme } from "@/hooks/use-hydrated-theme"
 import { usePreviewProps } from "@/hooks/use-preview-props"
 import {
   AsciiLogo,
+  MAX_TEXT_LETTERS,
+  clampAsciiLogoText,
   type AsciiLogoPhase,
 } from "@/registry/ascii-logo/ascii-logo"
 
@@ -160,22 +162,34 @@ export function AsciiLogoDemo() {
           </div>
         </div>
         {source === "text" ? (
-          <div className="flex items-center justify-between gap-4">
-            <label
-              htmlFor="ascii-logo-text"
-              className="text-sm font-medium text-foreground/90"
+          <div className="flex flex-col gap-1.5">
+            <div className="flex items-center justify-between gap-4">
+              <label
+                htmlFor="ascii-logo-text"
+                className="text-sm font-medium text-foreground/90"
+              >
+                Text
+              </label>
+              <Input
+                id="ascii-logo-text"
+                value={props.text}
+                maxLength={MAX_TEXT_LETTERS}
+                aria-describedby="ascii-logo-text-hint"
+                className="h-8 w-28"
+                onChange={(event) =>
+                  updateProp(
+                    "text",
+                    clampAsciiLogoText(event.currentTarget.value)
+                  )
+                }
+              />
+            </div>
+            <p
+              id="ascii-logo-text-hint"
+              className="text-right text-xs text-muted-foreground"
             >
-              Text
-            </label>
-            <Input
-              id="ascii-logo-text"
-              value={props.text}
-              maxLength={16}
-              className="h-8 w-36"
-              onChange={(event) =>
-                updateProp("text", event.currentTarget.value)
-              }
-            />
+              Max {MAX_TEXT_LETTERS} letters
+            </p>
           </div>
         ) : null}
         <ControlColor

registry/ascii-logo/ascii-logo-vanilla.ts

@@ -2,10 +2,21 @@ export type AsciiLogoPhase = "logo" | "scattered" | "fallen" | "returning"
 
 export type AsciiLogoTheme = "light" | "dark" | "auto"
 
+/** Wordmark `text` is capped at this many characters. */
+export const MAX_TEXT_LETTERS = 5
+
+/** Keep at most `maxLetters` characters; extra input is dropped. */
+export function clampAsciiLogoText(
+  text: string,
+  maxLetters = MAX_TEXT_LETTERS
+): string {
+  return [...text].slice(0, maxLetters).join("")
+}
+
 export type AsciiLogoOptions = {
   /**
    * Wordmark sampled into the ASCII grid. Ignored when `src` is set.
-   * Default `"23rd"`
+   * Capped at `MAX_TEXT_LETTERS` (5). Default `"23rd"`
    */
   text?: string
   /** Image URL to sample instead of `text` (any raster or same-origin SVG). */
@@ -198,6 +209,7 @@ export function createAsciiLogo(
     theme: "auto",
     ...initial,
   }
+  options.text = clampAsciiLogoText(options.text)
 
   const ctx = canvas.getContext("2d")
   if (!ctx) return null
@@ -606,6 +618,9 @@ export function createAsciiLogo(
   return {
     setOptions(next) {
       options = { ...options, ...next }
+      if (typeof next.text === "string") {
+        options.text = clampAsciiLogoText(next.text)
+      }
     },
     destroy() {
       running = false

registry/ascii-logo/ascii-logo.svelte

@@ -6,6 +6,7 @@
   import {
     createAsciiLogo,
     DEFAULT_CHARSET,
+    clampAsciiLogoText,
     type AsciiLogoInstance,
     type AsciiLogoOptions,
   } from "./ascii-logo-vanilla"
@@ -110,7 +111,7 @@
     })
   })
 
-  const aria = $derived(label ?? (src ? "ASCII logo" : text))
+  const aria = $derived(label ?? (src ? "ASCII logo" : clampAsciiLogoText(text)))
 </script>
 
 <div

registry/ascii-logo/ascii-logo.tsx

@@ -7,11 +7,16 @@ import { cn } from "@/lib/utils"
 import {
   createAsciiLogo,
   DEFAULT_CHARSET,
+  clampAsciiLogoText,
   type AsciiLogoInstance,
   type AsciiLogoOptions,
 } from "./ascii-logo-vanilla"
 
-export { DEFAULT_CHARSET } from "./ascii-logo-vanilla"
+export {
+  DEFAULT_CHARSET,
+  MAX_TEXT_LETTERS,
+  clampAsciiLogoText,
+} from "./ascii-logo-vanilla"
 export type {
   AsciiLogoInstance,
   AsciiLogoOptions,
@@ -145,7 +150,7 @@ export function AsciiLogo({
     onPhaseChange,
   ])
 
-  const aria = label ?? (src ? "ASCII logo" : text)
+  const aria = label ?? (src ? "ASCII logo" : clampAsciiLogoText(text))
 
   return (
     <div