Home

Library

Code components

Search a component or section

Last updated on:

Updated on:

July 19, 2026

Copy code

Liquid text effect

Liquid Text brings your headlines to life with a fluid, cursor-reactive distortion effect powered by WebGL and Three.js. As visitors move their mouse or finger across the text, letters ripple and flow away like liquid, then smoothly settle back into place.

...

Variants:

Theme:

Please note: This component is available only for active license holders. Sign in with your license key or purchase one.

Copying disabled

Preview the component

How to use the component?

Insert the component - Copy the Liquid Text component into your project (paste the remix/instance, or drag it in from your Framerstacks asset library). It appears as a single layer.

Place it in a frame - Drop it into a hero section or any frame. It fills its container, set the width to "Fill" and height should be "Fixed". A dark or solid background makes the effect pop.

Customize in the properties panel, with the layer selected, set the following for better performance.

Text - Your headline (shorter reads better; the component auto-shrinks long text to fill, so your text will not breaks on any breakpoint)
Font - Choose the font style you want. All the fonts inside Framer library is already integrated.
Color - Choose color for your text.
Padding - Add padding to your code component to make the texts properly arranged over the component area.
Rotations (X,Y and Z) - 3D rotation for your text. Leave all ZERO if you don't want to make any rotation to the text.
Ripple radius - Set the radius of the ripple effect.
Flow - By default we set to 0.07. Reduce it if you want more watery effect.
Intensity - Change the liquid effect intensity by tweaking this capability.

Preview to see the effect - The canvas shows a static preview by design; press Preview (or publish) and move your cursor over the text to see the liquid distortion live. Works with touch drag on mobile.
Check out more component like this on our main collection page (All code components).

Where to use?

Best placements:

Hero sections - A one-word or short-phrase headline ("Studio", "Portfolio", your brand name) as the centerpiece of the first fold.
Section dividers / statement breaks - Large single words between content sections on portfolio, agency, and fashion sites.
404 and coming-soon pages - A playful interactive focal point where there's little else on the page.
Project or campaign title screens - Case-study intros, event landing pages, product drops.

LIMITED TIME OFFER

Launch amazing websites with

Framerstacks

Still trying to design and launch a website from scratch? Check out 800+ pre-built Framer components and sections that 10x your design speed.

Life time access

Save hundreds of hours

10x design speed

Weekly new releases

Premium designs

Color theme responsiveness

Starts from

$79.00

$99

One-time

Buy now

Liquid text effect

...

Variants:

Theme:

Please note: This component is available only for active license holders. Sign in with your license key or purchase one.

Copying disabled

Preview the component

How to use the component?

Insert the component - Copy the Liquid Text component into your project (paste the remix/instance, or drag it in from your Framerstacks asset library). It appears as a single layer.

Place it in a frame - Drop it into a hero section or any frame. It fills its container, set the width to "Fill" and height should be "Fixed". A dark or solid background makes the effect pop.

Customize in the properties panel, with the layer selected, set the following for better performance.

Text - Your headline (shorter reads better; the component auto-shrinks long text to fill, so your text will not breaks on any breakpoint)
Font - Choose the font style you want. All the fonts inside Framer library is already integrated.
Color - Choose color for your text.
Padding - Add padding to your code component to make the texts properly arranged over the component area.
Rotations (X,Y and Z) - 3D rotation for your text. Leave all ZERO if you don't want to make any rotation to the text.
Ripple radius - Set the radius of the ripple effect.
Flow - By default we set to 0.07. Reduce it if you want more watery effect.
Intensity - Change the liquid effect intensity by tweaking this capability.

Preview to see the effect - The canvas shows a static preview by design; press Preview (or publish) and move your cursor over the text to see the liquid distortion live. Works with touch drag on mobile.
Check out more component like this on our main collection page (All code components).

Where to use?

Best placements:

Hero sections - A one-word or short-phrase headline ("Studio", "Portfolio", your brand name) as the centerpiece of the first fold.
Section dividers / statement breaks - Large single words between content sections on portfolio, agency, and fashion sites.
404 and coming-soon pages - A playful interactive focal point where there's little else on the page.
Project or campaign title screens - Case-study intros, event landing pages, product drops.

LIMITED TIME OFFER

Launch amazing websites with

Framerstacks

Still trying to design and launch a website from scratch? Check out 800+ pre-built Framer components and sections that 10x your design speed.

Life time access

Save hundreds of hours

10x design speed

Weekly new releases

Premium designs

Color theme responsiveness

Starts from

$79.00

$99

One-time

Buy now

Library overview

Framerstacks hosts one of the largest collections of pre-built Framer components and website sections. With 200+ professionally designed components and 800+ variants.

Our library spans 40+ webpage section categories, enabling creators to build beautiful, high-performance websites in Framer faster than ever.

Explore the main library page.

Contribution

Have something creative on your mind? Or wish to become a contributor inside Framerstacks?

You're welcome. Join as a contributor and help to shape the future of high-quality Framer components and sections gallery. Head over to the submission page and contribute.