Text Scan — Godsend

Preparing preview…

Installation

Choose your framework. The registry installs the component and its runtime 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/TextScan.svelte and installs its dependencies.

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

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

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

<section class="relative h-128 overflow-hidden">
	<TextScan
		class="absolute inset-0"
		text="Your words"
		fontUrl="/fonts/your-font.woff2"
		textColor="#E4FFF2"
		speed={0.8}
	/>

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

<section class="relative h-128 overflow-hidden">
	<TextScan
		class="absolute inset-0"
		text="Your words"
		fontUrl="/fonts/your-font.woff2"
		textColor="#E4FFF2"
		speed={0.8}
	/>

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

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<TextScan
				className="absolute inset-0"
				text="Your words"
				fontUrl="/fonts/your-font.woff2"
				textColor="#E4FFF2"
				speed={0.8}
			/>

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<TextScan
				className="absolute inset-0"
				text="Your words"
				fontUrl="/fonts/your-font.woff2"
				textColor="#E4FFF2"
				speed={0.8}
			/>

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

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

<template>
	<section class="relative h-128 overflow-hidden">
		<TextScan
			class="absolute inset-0"
			text="Your words"
			fontUrl="/fonts/your-font.woff2"
			textColor="#E4FFF2"
			:speed="0.8"
		/>

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

<template>
	<section class="relative h-128 overflow-hidden">
		<TextScan
			class="absolute inset-0"
			text="Your words"
			fontUrl="/fonts/your-font.woff2"
			textColor="#E4FFF2"
			:speed="0.8"
		/>

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

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.