ASCII Logo — Godsend

Preparing preview…

Installation

Choose your framework. The registry installs one component file and its PixiJS dependency.

Installation unavailable

The preview is public, but its installable release is still being prepared.

The registry command writes the component to src/lib/components/ui/AsciiLogo.svelte and installs its dependencies.

The registry command writes the component to src/components/ui/AsciiLogo.tsx and installs its dependencies.

The registry command writes the component to src/components/ui/AsciiLogo.vue and installs its dependencies.

The generated component builds its SVG distance field locally and does not upload artwork to a server.

The bitmap glyph set and film grain are procedural, so no font or texture assets are required. Bloom is composed in a second GPU pass.

Overview

ASCII Logo converts an SVG silhouette into a stable grid of bitmap characters over the darkest product-palette color.

A soft band travels from the bottom to the top of the logo, changing glyph shapes and feeding a bloom layer while luminance-aware film grain unifies the result.

Basic usage

The shader fills its parent. Your layout decides whether that parent is a card, hero, or viewport.

Hero.svelte

<script lang="ts">
	import AsciiLogo from '$lib/components/ui/AsciiLogo.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<AsciiLogo
		class="absolute inset-0"
		svgSource="/images/your-logo.svg"
		speed={0.8}
	/>

	<div class="relative z-10">Your content</div>
</section>
<script lang="ts">
	import AsciiLogo from '$lib/components/ui/AsciiLogo.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<AsciiLogo
		class="absolute inset-0"
		svgSource="/images/your-logo.svg"
		speed={0.8}
	/>

	<div class="relative z-10">Your content</div>
</section>

import { AsciiLogo } from '@/components/ui/AsciiLogo';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<AsciiLogo
				className="absolute inset-0"
				svgSource="/images/your-logo.svg"
				speed={0.8}
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}
import { AsciiLogo } from '@/components/ui/AsciiLogo';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<AsciiLogo
				className="absolute inset-0"
				svgSource="/images/your-logo.svg"
				speed={0.8}
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}

<script setup lang="ts">
import AsciiLogo from '@/components/ui/AsciiLogo.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<AsciiLogo
			class="absolute inset-0"
			svgSource="/images/your-logo.svg"
			:speed="0.8"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>
<script setup lang="ts">
import AsciiLogo from '@/components/ui/AsciiLogo.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<AsciiLogo
			class="absolute inset-0"
			svgSource="/images/your-logo.svg"
			:speed="0.8"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>

Use Glyph size to balance silhouette fidelity against the legibility of individual characters.
Set Speed to zero for a static logo. Shimmer width and intensity remain available for positioning a still highlight.
Simple, filled SVG silhouettes retain the clearest outline at larger glyph sizes.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.