Name: 23rd
Author: radiumcoders (Jay)

Preview

Props

Ink

#18181b

Paper

#fafafa

Cell size12

Force1

Dissipation0.05

Brush0.55

Animate

Soft ambient swirl when idle

Installation

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

Or from the public GitHub 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

Prop	Type	Default
`charset`	`string`	full letter/symbol brightness ramp
`cellSize`	`number`	`12`
`color`	`string`	theme ink
`backgroundColor`	`string`	theme paper
`force`	`number`	`1`
`dissipation`	`number`	`0.05`
`brush`	`number`	`0.55`
`animate`	`boolean`	`true`
`interactive`	`boolean`	`true`
`theme`	`"light" \| "dark" \| "auto"`	`auto`
`className`	`string`	React only
`class`	`string`	Svelte only