Liquid Text FX transforms your static headlines into visceral, physics-driven experiences that stop visitors mid-scroll. Powered by a dual-layer WebGL pipeline, every cursor movement bends, warps, and chromatically splits your typography in real time — producing the kind of fluid, tactile interaction that used to require a senior GLSL developer and weeks of work. From silky intro animations that reveal each character like a cinematic title card to fully tunable distortion physics, this component delivers a gallery-quality visual statement with nothing more than a drag onto the canvas.
https://liquidtextfx.framer.website/playground
Portfolio & Agency Sites: Make your hero headline the most memorable thing a client has ever seen — before they even read a word.
SaaS & Tech Landing Pages: Elevate product launches and feature reveals with an interactive headline that signals cutting-edge craft.
Fashion & Luxury Brands: Liquid motion and chromatic aberration evoke high-end editorial aesthetics that static type simply cannot compete with.
Creative Studios & Freelancers: Showcase technical excellence and differentiate your Framer projects in a crowded market without writing a single line of code.
Physics You Can Feel: Adjust trail scale, strength, hardness, fluidity, and momentum from a single panel — dial in everything from a subtle shimmer to a violent, full-canvas wave.
Cinematic Intro Animations: Characters or words slide up and fade in with spring or tween easing, staggered timing, and mask-reveal clipping for a true title-card entrance.
Chromatic Fringe System: Two fully custom fringe colors split along the distortion edge in real time, with a selectable blend mode for glitchy, neon, or ethereal color effects.
Performance-Smart Rendering: An idle sleep system and DPR cap keep GPU usage minimal — the simulation only runs when something is actually happening on screen.
Total Typography Control: Connect any Framer font, choose your HTML tag, set alignment, weight, and size — the WebGL layer matches your type perfectly at every breakpoint.
Building reactive WebGL text distortion from scratch means wrestling with shader code, canvas sizing, physics simulation loops, intersection observers, and font rendering pipelines — easily a week of senior engineering time. Liquid Text FX ships all of that as a single, production-ready component that configures entirely through Framer's native property controls. It handles retina displays, touch events, resize observers, and GPU cleanup automatically, so you can focus on the design decision that actually matters: how dramatic you want the effect to be.
Set Your Foundation: Drag Liquid Text FX onto your canvas, type your headline, and choose your HTML tag and font from the Typography control.
Define the Aesthetic: Pick your base color and fringe colors, set the blend mode, and tune the physics sliders — strength, fluidity, tail, and aberration — until the distortion feels exactly right.
Preview & Deploy: Enable the intro animation trigger, preview the entrance sequence in Framer's preview mode, then publish. Your headline is live.
Matheus Brandão
