ASCII Fluid

Pointer trails dump ink into a fluid sim; density maps onto a full letter/symbol brightness ramp. Theme-aware. No text input — just a background. Press d to toggle theme.

Installation

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

Or install straight from the public GitHub source registry:

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

Usage

Place it behind content in a relatively positioned container.

"use client"

import { AsciiFluid } from "@/components/ui/ascii-fluid"

export function Hero() {
  return (
    <div className="relative h-svh overflow-hidden bg-background">
      <AsciiFluid />
      <div className="relative z-10 p-10">Your content</div>
    </div>
  )
}

Props