# DisplacementText

> 3D text with WebGL displacement that follows the cursor using Three.js shaders.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Text & Typography
- Tags: text, webgl, 3d, displacement, cursor, shader, threejs
- Docs: https://fancy-ui.rama.app/docs/components/displacement-text
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/displacement-text

## Import

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

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { DisplacementText } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## 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 |

## Examples

### Basic Usage

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

<DisplacementText text="Hover Me" fontSize={220} />
```

### Custom Color

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

<DisplacementText text="FancyUI" fontSize={200} color="#6366f1" />
```

### Theme Aware

Auto-switches between light and dark.

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

<DisplacementText text="Adaptive" lightColor="#1a1a1a" darkColor="#f5f5f5" />
```