Ascii Aquarium

Heroes

About

A dark text-cell aquarium where glowing glyph-tile fish swim, bend and turn across a faint grid, leaving wake dots as shoals of dashes and tiny fish drift by. More like this, plus a designer your coding agent can connect to over MCP, at studios.lou15.com/agents?ref=21st

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ascii Aquarium to your project and fits it to your theme.

Code

How Ascii Aquarium is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { AsciiAquarium } from "@/components/ui/ascii-aquarium";

/** The aquarium filling the screen. Move the pointer through it to scatter the shoals; click to let out bubbles. */
export default function AsciiAquariumDemo() {
  return (
    <main className="relative h-screen min-h-[340px] w-full overflow-hidden" style={{ backgroundColor: "#000000" }}>
      <AsciiAquarium style={{ width: "100%", height: "100%", minHeight: 0 }} />
    </main>
  );
}