3D Displacement Text
An interactive WebGL text effect with 3D displacement that responds to mouse movement. Creates a liquid, morphing effect on the text.
Install using CLI
npx shadcn@latest add "https://obsidianui.dev/r/liquid-text.json"Install Manually
1
Install dependencies
2
Copy the source code
Copy into components/ui/liquid-text.tsx
Note: This component uses Three.js for WebGL rendering. Install via CLI for the full shader implementation.
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| text | string | 'Liquid Text' | Text to display |
| fontSize | number | 200 | Font size in pixels |
| font | string | 'Inter, sans-serif' | Font family |
| color | string | - | Fixed text color |
| lightColor | string | '#000000' | Light mode color |
| darkColor | string | '#ffffff' | Dark mode color |
| className | string | - | Additional CSS classes |