# LiquidText

> Big text that liquefies along the cursor's path via a raw-WebGL fluid solver, with chromatic-aberration fringing that relaxes back over time.

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

## Import

```svelte
<script lang="ts">
  import { LiquidText } 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 { LiquidText } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` | `"Liquid"` | Text to display |
| `font` | `string` | `""` | Font family; empty string resolves via getComputedStyle(host).fontFamily |
| `fontSize` | `number` | `0` | Font size in pixels; 0 auto-fits to the container width |
| `fontWeight` | `number \| string` | `700` | Font weight |
| `lightColor` | `string` | `"#000000"` | Text color in light mode |
| `darkColor` | `string` | `"#ffffff"` | Text color in dark mode |
| `class` | `string` | — | Additional CSS classes |
| `strength` | `number` | `0.5` | Geometric UV warp gain |
| `radius` | `number` | `160` | Splat radius in screen pixels |
| `forceGain` | `number` | `17` | Mouse-delta to force multiplier |
| `dissipation` | `number` | `0.98` | Per-frame velocity decay factor |
| `viscosity` | `number` | `4` | Jacobi viscous diffusion strength (8 iterations) |
| `chromaticRatio` | `number` | `0.2` | Chromatic offset as a ratio of the warp |
| `staticBelow` | `number` | `1024` | innerWidth at/below which the component renders as static DOM text (also used at mount) |
| `interactive` | `boolean` | `true` | Whether pointer movement drives the fluid simulation |
| `pauseWhenHidden` | `boolean` | `true` | Pause the render loop while the document is hidden |

## Examples

### Basic Usage

Move the cursor across the text — it smears, then relaxes back.

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

<LiquidText text="Liquid" fontSize={160} />
```

### Interactive Playground

```svelte
<script lang="ts">
	import { LiquidText, type LiquidTextProps } from "fancy-ui-svelte";
	import PropsPlayground from "$lib/components/PropsPlayground.svelte";
</script>

<PropsPlayground
	controls={[
		{ key: "text", type: "text", label: "Text" },
		{
			key: "fontSize",
			type: "range",
			label: "Font Size (0 = auto-fit)",
			min: 0,
			max: 280,
			step: 10,
		},
		{
			key: "fontWeight",
			type: "select",
			label: "Font Weight",
			options: [
				{ value: "400", label: "400" },
				{ value: "500", label: "500" },
				{ value: "600", label: "600" },
				{ value: "700", label: "700" },
				{ value: "800", label: "800" },
				{ value: "900", label: "900" },
			],
		},
		{ key: "lightColor", type: "color", label: "Light Color" },
		{ key: "darkColor", type: "color", label: "Dark Color" },
		{ key: "strength", type: "range", label: "Warp Strength", min: 0, max: 1, step: 0.05 },
		{ key: "radius", type: "range", label: "Splat Radius", min: 40, max: 400, step: 10 },
		{ key: "forceGain", type: "range", label: "Force Gain", min: 1, max: 40, step: 1 },
		{ key: "dissipation", type: "range", label: "Dissipation", min: 0.8, max: 0.999, step: 0.005 },
		{ key: "viscosity", type: "range", label: "Viscosity", min: 0, max: 20, step: 1 },
		{
			key: "chromaticRatio",
			type: "range",
			label: "Chromatic Ratio",
			min: 0,
			max: 1,
			step: 0.05,
		},
		{ key: "interactive", type: "boolean", label: "Interactive" },
	]}
	initialValues={{
		text: "Liquid",
		fontSize: 160,
		fontWeight: "700",
		lightColor: "#000000",
		darkColor: "#ffffff",
		strength: 0.5,
		radius: 160,
		forceGain: 17,
		dissipation: 0.98,
		viscosity: 4,
		chromaticRatio: 0.2,
		interactive: true,
	}}
>
	{#snippet preview(values)}
		<div class="bg-background relative h-40 w-full max-w-md overflow-hidden rounded-xl border">
			<LiquidText {...values as LiquidTextProps} />
		</div>
	{/snippet}
</PropsPlayground>
```