WebGL Button

Full Description WebGL Button is an interactive, code-based button component that renders a real-time WebGL liquid simulation inside its shape — no video, no GIF, just live shader…

Full Description WebGL Button is an interactive, code-based button component that renders a real-time WebGL liquid simulation inside its shape — no video, no GIF, just live shader animation. Move your cursor across it and the liquid tilts and sloshes; click it and it "gulps" down before settling back. Fully customizable directly from the Framer properties panel, no code editing required: Liquid Color — recolor the animated liquid to match your brand Background — set the button's base color independently of the liquid Typography — full font control (family, weight, size, letter-spacing) via Framer's native font picker Text Color Icon Image — upload your own icon (SVG/PNG), with adjustable size and gap from the label Padding — size the button by adjusting padding rather than dragging the frame, so it always hugs its content Corner Radius Link — turn it into a working link with optional new-tab behavior, or leave it as a plain interactive button Great for hero CTAs, form submit buttons, or any spot where a subtle, tactile animation adds polish without feeling gimmicky. Key Features Live WebGL shader animation, not a video/GIF Cursor-reactive tilt and slosh physics Click "gulp" interaction Fully themeable: liquid color, background, text, icon Custom icon upload with size/gap controls Auto-sizing via padding (hug-content behavior) Works as a button or a link (with new-tab option) Follows Framer's static-render guidelines (no animation on canvas/export, only in live Preview/published site)

Animated liquid-fill button