TextRevealCard

Preview

svelte

<script lang="ts">
	import { TextRevealCard } from "fancy-ui-svelte";
</script>

<TextRevealCard>
	<p class="mb-4 text-lg font-bold text-white">Move your mouse to reveal</p>
	{#snippet text()}
		<p
			class="bg-gradient-to-b from-white to-neutral-300 bg-clip-text py-6 text-[2rem] font-bold text-transparent md:text-[3rem]"
		>
			I know the secret
		</p>
	{/snippet}
	{#snippet revealText()}
		<p class="py-6 text-[2rem] font-bold text-white/10 md:text-[3rem]">Hover me to see</p>
	{/snippet}
</TextRevealCard>

Installation

pnpm add fancy-ui-svelte

import { TextRevealCard } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { TextRevealCard } from 'fancy-ui-svelte';
</script>

<TextRevealCard />

Examples

Basic Usage

svelte

<script lang="ts">
	import { TextRevealCard } from "$lib/fancy-ui/text-reveal-card";
</script>

<TextRevealCard>
	<p class="mb-4 text-lg font-bold text-white">Move your mouse to reveal</p>
	{#snippet text()}
		<p
			class="bg-gradient-to-b from-white to-neutral-300 bg-clip-text py-6 text-[2rem] font-bold text-transparent md:text-[3rem]"
		>
			I know the secret
		</p>
	{/snippet}
	{#snippet revealText()}
		<p class="py-6 text-[2rem] font-bold text-white/10 md:text-[3rem]">Hover me to see</p>
	{/snippet}
</TextRevealCard>

Fewer Stars

svelte

<script lang="ts">
	import { TextRevealCard } from "$lib/fancy-ui/text-reveal-card";
</script>

<TextRevealCard starsCount={40}>
	<p class="mb-4 text-sm text-neutral-400">Fewer stars, same effect</p>
	{#snippet text()}
		<p
			class="bg-gradient-to-b from-white to-neutral-300 bg-clip-text py-6 text-[2rem] font-bold text-transparent md:text-[3rem]"
		>
			Less is more
		</p>
	{/snippet}
	{#snippet revealText()}
		<p class="py-6 text-[2rem] font-bold text-white/10 md:text-[3rem]">Minimalist</p>
	{/snippet}
</TextRevealCard>

Props

Prop	Type	Default	Description
`starsCount`	number	`130`	Number of star particles in the background
`starsClass`	string	`""`	CSS classes for the stars container

Slots

Slot	Description
`children`	Content rendered above the reveal area (e.g., title)
`text`	Text shown in the revealed layer (dragged to reveal)
`revealText`	Text visible in the background star layer