Ascii Image

New

A photo rebuilt from text characters, ready to copy

$ npx @hritik-sharmaa/repeat-ui add image-ascii-image

Live preview

Customize

Width420px

Height300px

Columns90

Characters

Invert

Colour mode

Text

Accent

Background

Contrast1.3×

Lens120px

Copy button

Radius24px

import ImageAsciiImage from "@/components/repeat-ui/image-ascii-image/preview";

<ImageAsciiImage characters=" .:-=+*#%@" />

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add image-ascii-image --variant ts-tailwind

The files are in components/repeat-ui/image-ascii-image/.

import ImageAsciiImage from "@/components/repeat-ui/image-ascii-image/preview";

export default function Page() {
  return <ImageAsciiImage />;
}

Prop	Type	Default	Description	Options
`src`	`string`	Mountain photo	Image URL; same-origin or served with CORS headers.	-
`alt`	`string`	""	Image description for screen readers.	-
`width`	`number`	420	Width in pixels.	-
`height`	`number`	300	Height in pixels.	-
`columns`	`number`	90	Characters per row; more is finer.	-
`characters`	`string`	" .:-=+*#%@"	Characters from darkest to brightest.	-
`invert`	`boolean`	false	Swap the ramp, for light backgrounds.	-
`colorMode`	`"mono" \| "color"`	"mono"	One colour, or each character in its pixel's colour.	mono \| color
`color`	`string`	"#d4d4d4"	Character colour in mono mode.	-
`accentColor`	`string`	"#84cc16"	Colour of the characters under the pointer.	-
`background`	`string`	"#0a0a0a"	Background colour.	-
`contrast`	`number`	1.3	Contrast before mapping to characters.	-
`lensSize`	`number`	120	Diameter of the bright area around the pointer; 0 turns it off.	-
`showCopy`	`boolean`	true	Show a button that copies the art as text.	-
`radius`	`number`	24	Corner radius in pixels.	-
`className`	`string`	""	Extra classes for the root element.	-