Silk Web Button
A stationary glossy button with curved liquid strands that follow your pointer and softly rejoin its surface.
Overview
About the Silk Web Button
A stationary glossy button with curved liquid strands that follow your pointer and softly rejoin its surface. It is delivered as editable TypeScript for React. Instance-scoped embedded CSS. Tailwind CSS is not required. No Motion or WebGL dependency. Its focused API can be adapted to your own content and visual system.
Usage
When to use it
- Expressive calls to action and creative portfolio contact buttons.
What’s included
Files in the product ZIP
Silk Web Button source
components/gooey-magnetic-button.tsxEditable React and TypeScript component source.
Working example
examples/example.tsxA minimal import and render example that matches the packaged API.
Installation guide
README.mdManual ZIP installation, styling, compatibility, asset, and usage notes.
Usage
Import and render
Copy the packaged source to the documented path, then use the public API shown below.
import { GooeyMagneticButton } from "@/components/gooey-magnetic-button";<GooeyMagneticButton text="Make a connection" elasticity={0.8} viscosity={0.4} stretchDistance={140} spring={{ stiffness: 160, damping: 18 }} />Props
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Make a connection" | Button label. |
| elasticity | number | 0.65 | Pointer attraction, clamped to 0–1. |
| viscosity | number | 0.55 | Motion resistance, clamped to 0–1. |
| stretchDistance | number | 120 | Maximum target offset in pixels, clamped to 0–240 before elasticity. |
| spring | { stiffness?: number; damping?: number } | { stiffness: 160, damping: 18 } | Stiffness 30–500 and damping 4–60 configure return behavior. |
| gooeyIntensity | number | 0.65 | SVG merging strength and neck thickness, 0–1. |
| backgroundColor | string | "#111114" | Liquid and capsule color. |
| color | string | "#ffffff" | Button text color. |
| cursorStyle | "default" | "pointer" | "none" | "pointer" | Pointer appearance within interaction area. |
| width | number | 260 | Capsule width, 100–600px, constrained by parent. |
| height | number | 76 | Minimum capsule height, 40–160px. |
| autoPlay | boolean | false | Demonstration movement while visible and idle. |
| disabled | boolean | false | Disables native button and animation. |
| className | string | — | Interaction wrapper class. |
| style | CSSProperties | — | Interaction wrapper inline styles. |
| ...buttonProps | ButtonHTMLAttributes<HTMLButtonElement> | — | Native onClick, name, value, form, aria-label, type and other button attributes. Type defaults to button. |
Compatibility
Verified project setup
- ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
- This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
- Instance-scoped embedded CSS. Tailwind CSS is not required. No Motion or WebGL dependency.
- Images
- No image files are included or required by the packaged component.
- Fonts
- No font files are included. The component uses system font fallbacks unless your app supplies a matching font.
Installation
Add it to your project
Download the Silk Web Button ZIP, place the source file at src/components/gooey-magnetic-button.tsx, and copy the example into your own page or feature folder.
Target path
src/components/gooey-magnetic-button.tsxNo additional npm runtime packages are required beyond the React host; follow the styling requirements below.
Styling requirements
- Copy components/gooey-magnetic-button.tsx and render GooeyMagneticButton. Keep use client for Next.js App Router.
- The component reserves a pointer interaction area around the native button: maximum width is width + 2 * stretchDistance + 48; minimum height is height + 2 * stretchDistance + 48. Keep overflow visible for liquid edges.
- Hover pulls seven independently lagged gel tendrils. Leaving retains a short viscous sag before they retract. Touch interaction preserves vertical scrolling; only the native capsule button is the click target. Keyboard activation uses the native button.
- Animation sleeps when settled, offscreen, hidden, disabled, or reduced motion is requested. CSS SVG filters may render slightly differently across browsers.
- No images, fonts or third-party implementation code are included. React and React DOM are consumer dependencies under their MIT licenses.