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

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

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

Overview

Crackle builds five rotated layers of sharpened sine-cosine ridges. Recursive displacement bends them into a connected network that changes slowly over time.

The accumulated ridge height controls the color transition and supplies finite-difference normals for directional highlights, keeping the glow attached to every line.

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

<section class="relative h-128 overflow-hidden">
	<Crackle
		class="absolute inset-0"
		speed={0.8}
	/>

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

<section class="relative h-128 overflow-hidden">
	<Crackle
		class="absolute inset-0"
		speed={0.8}
	/>

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

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<Crackle
				className="absolute inset-0"
				speed={0.8}
			/>

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<Crackle
				className="absolute inset-0"
				speed={0.8}
			/>

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

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

<template>
	<section class="relative h-128 overflow-hidden">
		<Crackle
			class="absolute inset-0"
			:speed="0.8"
		/>

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

<template>
	<section class="relative h-128 overflow-hidden">
		<Crackle
			class="absolute inset-0"
			:speed="0.8"
		/>

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

Raise Ridge sharpness for thinner, more crystalline cracks; lower it for broad, soft fissures.
Set Speed to zero for a static frame. Reduced-motion mode pauses the renderer automatically.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.