Aperture CRT

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

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

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

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

Aperture CRT downsamples the source once per display cell, then reconstructs it through staggered red, green, and blue phosphor slots.

Scanlines, tube curvature, tinted highlights, and deep screen black turn pixelation into a physical display illusion rather than a simple low-resolution filter.

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

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

<section class="relative h-128 overflow-hidden">
	<ApertureCrt
		class="absolute inset-0"
		src="/images/your-image.jpg"
	/>

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

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

<section class="relative h-128 overflow-hidden">
	<ApertureCrt
		class="absolute inset-0"
		src="/images/your-image.jpg"
	/>

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

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

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

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

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

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

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

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

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

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

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

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

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

• Raise Cell size when the component is viewed from farther away so the RGB subcells remain legible.
• Curvature deliberately creates a dark screen edge; set it to zero for a flat-panel treatment.