Text & Typography Fancy Stable
DisplacementText
3D text with WebGL displacement that follows the cursor using Three.js shaders
Preview
svelte
<script lang="ts">
import { DisplacementText } from 'fancy-ui-svelte';
</script>
<DisplacementText text="Hover Me" />Installation
pnpm add fancy-ui-svelte
import { DisplacementText } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { DisplacementText } from 'fancy-ui-svelte';
</script>
<DisplacementText />Examples
Basic Usage
svelte
<script lang="ts">
import { DisplacementText } from "$lib/fancy-ui/displacement-text";
</script>
<DisplacementText text="Hover Me" fontSize={220} />Custom Color
svelte
<script lang="ts">
import { DisplacementText } from "$lib/fancy-ui/displacement-text";
</script>
<DisplacementText text="FancyUI" fontSize={200} color="#6366f1" />Theme Aware
Auto-switches between light and dark.
svelte
<script lang="ts">
import { DisplacementText } from "$lib/fancy-ui/displacement-text";
</script>
<DisplacementText text="Adaptive" lightColor="#1a1a1a" darkColor="#f5f5f5" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Hover Me" | Text to display |
fontSize | number | 200 | Font size in pixels |
font | string | "Inter, sans-serif" | Font family |
color | string | - | Fixed text color (overrides theme colors) |
lightColor | string | "#000000" | Text color in light mode |
darkColor | string | "#ffffff" | Text color in dark mode |
Links
Related components
Bl
BlurReveal
Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-child delays and respecting reduced motion
Text & Typography Stable
Bo
BoxReveal
Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered once via IntersectionObserver
Text & Typography Stable
Co
ColourfulText
Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically every 5 seconds using pure CSS transitions
Text & Typography Stable