ASCII Bloom — 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/AsciiBloom.svelte and installs its dependencies.

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

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

The effect uses two cached preprocessing targets and one final composition pass.

The ASCII bitmap map is embedded in the generated component and does not require a font asset.

Overview

ASCII Bloom extracts the brightest pixels, blurs them in two directions, and screen-blends the result over the source image.

A second threshold places small translucent ASCII glyphs only in cells reached by the blurred highlight layer, then shifts their shape and brightness with the shimmer over time.

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 AsciiBloom from '$lib/components/ui/AsciiBloom.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<AsciiBloom
		class="absolute inset-0"
		src="/images/your-image.jpg"
		speed={0.8}
	/>

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

<section class="relative h-128 overflow-hidden">
	<AsciiBloom
		class="absolute inset-0"
		src="/images/your-image.jpg"
		speed={0.8}
	/>

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

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<AsciiBloom
				className="absolute inset-0"
				src="/images/your-image.jpg"
				speed={0.8}
			/>

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<AsciiBloom
				className="absolute inset-0"
				src="/images/your-image.jpg"
				speed={0.8}
			/>

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

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

<template>
	<section class="relative h-128 overflow-hidden">
		<AsciiBloom
			class="absolute inset-0"
			src="/images/your-image.jpg"
			:speed="0.8"
		/>

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

<template>
	<section class="relative h-128 overflow-hidden">
		<AsciiBloom
			class="absolute inset-0"
			src="/images/your-image.jpg"
			:speed="0.8"
		/>

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

Raise Bloom threshold to isolate smaller highlights. Bloom softness controls how gradually nearby tones join them.
Glyph threshold controls where characters appear without rebuilding the cached bloom passes.
Saturation changes the combined image and bloom without rebuilding the cached preprocessing passes.
Set Speed to zero for a static overlay, or raise it to make the glyph shimmer and character changes travel faster.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.