Venom Button
Venom Button is a button in the UI HUB buttons collection. A WebGL1 metaball goo button. A signed-distance field (rounded pill merged with smooth-min cone capsules for every strand segment, plus spikes and droplets) is converted to a height field (z = sqrt(s * (2B - s))) so normals come from finite differences; shading is a procedural env map with fresnel rim, two specular lob…
The component is driven by 45 documented props (background, gooColor, textColor, font, label, size and 39 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: WebGL1 fragment shader (SDF metaballs); Canvas 2D overlay; requestAnimationFrame loop.
Preview the button in the browser above, copy the source, and paste it into your project. Buttons components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Venom Button?
A symbiote pill button whose goo tentacles lunge at a drawn hand, crawl over it as venom, and snap back with spikes and droplets.
Venom Button at a glance
- Category
- Buttons
- Pricing
- Free to use
- Libraries
- React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 45
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Venom Button works
A WebGL1 metaball goo button. A signed-distance field (rounded pill merged with smooth-min cone capsules for every strand segment, plus spikes and droplets) is converted to a height field (z = sqrt(s * (2B - s))) so normals come from finite differences; shading is a procedural env map with fresnel rim, two specular lobes and an offset soft shadow. Up to 7 main strands are 12-point Verlet chains rooted on the pill perimeter and tip-pinned to grip points on a drawn glove hand (or arrow, or the OS cursor), solved with 14 relaxation iterations plus 2 smoothing passes, cycling idle -> seek -> grow -> hold -> snap. On release the mound recoils, spikes burst and droplets spray. A Canvas 2D overlay draws the hand, hair strands, web threads and a goo coating that creeps over each grip.
Technical information for Venom Button
| Category | Buttons |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | WebGL shaders, HTML canvas, CSS gradients |
| State change | idle pill with a ghost hand touring around it to strands lunged out, hand skinned in symbiote, violent snap-back with spikes and droplets |
| Props | 45 configurable |
| Usage example | Included on this page |
What Venom Button requires
- WebGL1 fragment shader (SDF metaballs)
- Canvas 2D overlay
- requestAnimationFrame loop
- Verlet strand simulation with relaxation
- ResizeObserver
- pointer and keyboard event handling
- prefers-reduced-motion support
- devicePixelRatio cap of 2
- adaptive GL buffer downscale on slow frames
- WebGL failure fallback pill
How to use Venom Button
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <VenomButton /> in your page using that import path.
- Pass any of the 45 documented props to change colours, density, speed or behaviour.
Venom Button questions
What is Venom Button?
A symbiote pill button whose goo tentacles lunge at a drawn hand, crawl over it as venom, and snap back with spikes and droplets.
How does Venom Button work?
A WebGL1 metaball goo button. A signed-distance field (rounded pill merged with smooth-min cone capsules for every strand segment, plus spikes and droplets) is converted to a height field (z = sqrt(s * (2B - s))) so normals come from finite differences; shading is a procedural env map with fresnel rim, two specular lobes and an offset soft shadow. Up to 7 main strands are 12-point Verlet chains rooted on the pill perimeter and tip-pinned to grip points on a drawn glove hand (or arrow, or the OS cursor), solved with 14 relaxation iterations plus 2 smoothing passes, cycling idle -> seek -> grow -> hold -> snap. On release the mound recoils, spikes burst and droplets spray. A Canvas 2D overlay draws the hand, hair strands, web threads and a goo coating that creeps over each grip.
Which category does Venom Button belong to?
Venom Button is listed under Buttons in the UI HUB catalog. Call-to-action buttons with real interaction design: magnetic pull on hover, glow and shimmer sweeps, press states and SVG-based shape morphs. Each button accepts its own label, href and colour props, so it drops into an existing layout without forcing a wrapper. Accessible focus states are preserved in every variant.
What does the background prop do in Venom Button?
Stage background behind the pill; also decides whether the goo drop-shadow is drawn. It defaults to "#F0F0F0".
What does the gooColor prop do in Venom Button?
Base symbiote colour for strands, spikes, droplets and the hand coating. It defaults to "#020203".
Is Venom Button free to use?
Venom Button is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Venom Button use?
Venom Button uses React and is styled with Tailwind CSS.
What does Venom Button need to run?
Venom Button needs WebGL1 fragment shader (SDF metaballs), Canvas 2D overlay, requestAnimationFrame loop and Verlet strand simulation with relaxation.