←
Swipe to Grow / Slide Button

Swipe to Grow / Slide Button

Capsule Slider

Interactive metallic capsule slider button with draggable glowing electric blue knob, illuminated neon channel fill, and dynamic masked text reveal.

Interactive Playground & Studio

Live Controls
slide-grow-button.tsx
Lets Grow!
Get Started
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Silver Steel Tracktheme="silver"
Lets Grow!
Get Started

Brushed aluminium capsule track with glowing electric blue slider knob.

Dark Metal Editiontheme="dark"
Lets Grow!
Get Started

Dark titanium chassis with bright neon blue photon channel fill.

UI Pirate Magmatheme="uipirate"
Lets Grow!
Get Started

Signature molten orange glow track with high-energy sliding physics.

Emerald Matrixtheme="emerald"
Lets Grow!
Get Started

Vibrant emerald photon illumination channel with smooth slider snap.

Features & Physics

✓Gesture-driven draggable capsule knob physics
✓Dynamic neon channel fill path as knob travels
✓Masked text reveal animation on swipe
✓Auto-snap completion threshold

Code & Integration

Customized live with your active playground prop settings:

import { SlideGrowButton } from "@/components/SlideGrowButton";

export default function Example() {
  return (
    <SlideGrowButton
      theme=""
      size="md"
      onComplete={() => alert("Action unlocked!")}
    />
  );
}

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
theme"silver" | "dark" | "uipirate" | "cyberpunk" | "emerald" | "orange""silver"Metallic finish for the capsule track.
size"xs" | "sm" | "md" | "lg" | "xl""md"Width and height scaling dimensions.
onComplete() => voidundefinedCalled when swipe reaches 100% threshold.