←
Scaling Capsule Tactile Button

Scaling Capsule Tactile Button

Frosted Capsule

Recessed capsule button featuring a frosted translucent glass tray, obsidian cap with multi-tiered elevation drop shadows, and circular apex emblem badge.

Interactive Playground & Studio

Live Controls
scaling-capsule-button.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Figma Dark Obsidianvariant="dark"

1:1 Figma Master design with frosted translucent cavity tray.

UI Pirate Magmavariant="orange"

Signature magma orange glowing capsule with apex emblem.

Titanium Lightvariant="light"

Clean ceramic light pill with high-contrast ladder apex.

Cyberpunk Neonvariant="cyberpunk"

Ultraviolet neon tray with cybernetic specular insets.

Features & Physics

✓Frosted outer glass tray
✓Multi-tier shadow stack
✓26px Black circle
✓Ladder-rung icon

Code & Integration

Customized live with your active playground prop settings:

import ScalingCapsuleButton from "@/components/ScalingCapsuleButton";

export default function Example() {
  return (
    <ScalingCapsuleButton
      label=""
      variant=""
      size="md"
      onClick={() => console.log("Capsule clicked")}
    />
  );
}

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
labelstring"Scaling Workshop"Text label.
variant"dark" | "orange" | "light" | "cyberpunk""dark"Appearance style.