Text & Typography Fancy Stable
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
Preview
svelte
<script lang="ts">
import { LiquidText } from "fancy-ui-svelte";
</script>
<LiquidText text="Liquid" fontSize={160} />Installation
pnpm add fancy-ui-svelte
import { LiquidText } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { LiquidText } from 'fancy-ui-svelte';
</script>
<LiquidText />Examples
Basic Usage
Move the cursor across the text — it smears, then relaxes back.
svelte
<script lang="ts">
import { LiquidText } from "$lib/fancy-ui/liquid-text";
</script>
<LiquidText text="Liquid" fontSize={160} />Interactive Playground
svelte
<script lang="ts">
import { LiquidText, type LiquidTextProps } from "$lib/fancy-ui/liquid-text";
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>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 |
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