ASCII Logo

A logo sampled onto a grid of letters and numbers. Move over it and the characters drift aside. Click to scatter them, click again to drop them under gravity, click once more to gather them back. Theme-aware. Press d to toggle theme.

Installation

pnpm dlx shadcn@latest add @23rd/ascii-logo

Or install straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/ascii-logo

Usage

Place it in a sized container. The canvas fills the parent.

"use client"

import { AsciiLogo } from "@/components/ui/ascii-logo"

export function FooterMark() {
  return (
    <div className="relative h-64 w-full overflow-hidden bg-background">
      <AsciiLogo text="23rd" />
    </div>
  )
}

Pass src to sample an image instead of text — any raster, or a same-origin SVG.

<AsciiLogo src="/logo.svg" />

Clicks cycle logo → scattered → fallen → returning → logo. Hover repulsion only runs in the resting logo phase.

Props