Motion Core

Canvas

ASCII Renderer

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

ogl

Installation

Install the component

Run the following command to install the component and its dependencies: 
npx @motion-core/cli add ascii-renderer
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

Props

80
3.000
<script lang="ts">
	import { AsciiRenderer } from "motion-core";
	import type { ComponentProps } from "svelte";

	const demoImage = "/images/photos/sample-image-17.webp";
	type Props = Partial<ComponentProps<typeof AsciiRenderer>>;

	let {
		density = 25,
		strength = 3,
		color = "#00ff00",
		backgroundColor = "#17181A",
	}: Props = $props();
</script>

<AsciiRenderer
	src={demoImage}
	class="h-full min-h-96 w-full"
	{density}
	{strength}
	{color}
	{backgroundColor}
/>

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

	const demoImage = "/images/photos/sample-image-17.webp";
	type Props = Partial<ComponentProps<typeof AsciiRenderer>>;

	let {
		density = 25,
		strength = 3,
		color = "#00ff00",
		backgroundColor = "#17181A",
	}: Props = $props();
</script>

<AsciiRenderer
	src={demoImage}
	class="h-full min-h-96 w-full"
	{density}
	{strength}
	{color}
	{backgroundColor}
/>

Props

AsciiRenderer

PropTypeDefault
src
string —
density
number 25
strength
number 3.0
color
stringnumber[number, number, number]{ r: number; g: number; b: number } "#00ff00"
backgroundColor
stringnumber[number, number, number]{ r: number; g: number; b: number } "#17181A"
class
string ""