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 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)