Motion Core

canvas

ASCII Renderer

A retro-styled renderer that converts images into character-based visuals with configurable scanlines.

@threlte/core@threlte/extrasthree

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add ascii-renderer

Import the component

Import the component into your Svelte file: 
import { AsciiRenderer } from "$lib/motion-core";
import { AsciiRenderer } from "$lib/motion-core";

Usage

<script lang="ts">
	import { AsciiRenderer } from "motion-core";

	const demoImage = "/images/demos/sample-11.jpg";
</script>

<AsciiRenderer
	src={demoImage}
	density={25}
	strength={25.0}
	color="#00ff00"
	backgroundColor="#111113"
	class="h-full min-h-96 w-full"
/>

Props

AsciiRenderer

PropTypeDefault
src
string —
density
number 25
strength
number 25.0
color
string "#00ff00"
backgroundColor
string "#000000"
class
string ""