motion-ui-skill 2.0.0

package/components/buttons/like-button.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Heart } from "lucide-react";
+
+const PARTICLES = [
+  { x: 0, y: -22 },
+  { x: 18, y: -14 },
+  { x: 22, y: 4 },
+  { x: 13, y: 20 },
+  { x: -13, y: 20 },
+  { x: -22, y: 4 },
+  { x: -18, y: -14 },
+];
+
+type BurstProps = Readonly<{ color: string }>;
+
+// Particles fly outward once on mount using a rAF-triggered transition.
+function Burst({ color }: BurstProps) {
+  const [out, setOut] = useState(false);
+
+  useEffect(() => {
+    const id = globalThis.requestAnimationFrame(() => setOut(true));
+    return () => globalThis.cancelAnimationFrame(id);
+  }, []);
+
+  return (
+    <span
+      aria-hidden
+      className="pointer-events-none absolute inset-0 flex items-center justify-center"
+    >
+      {PARTICLES.map((particle, index) => (
+        <span
+          key={index}
+          className="absolute top-1/2 left-1/2 size-1.5 rounded-full transition-all duration-500 ease-out"
+          style={{
+            backgroundColor: color,
+            opacity: out ? 0 : 1,
+            transform: out
+              ? `translate(calc(-50% + ${particle.x}px), calc(-50% + ${particle.y}px)) scale(0.2)`
+              : "translate(-50%, -50%) scale(1)",
+          }}
+        />
+      ))}
+    </span>
+  );
+}
+
+export type LikeButtonProps = Readonly<
+  {
+    label?: string;
+    likedLabel?: string;
+    defaultLiked?: boolean;
+    count?: number;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+// Like — heart pops and scatters particles when toggled on.
+export const LikeButton = forwardRef<HTMLButtonElement, LikeButtonProps>(
+  (
+    {
+      className,
+      label = "Like",
+      likedLabel = "Liked",
+      defaultLiked = false,
+      count = 128,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [liked, setLiked] = useState(defaultLiked);
+    const [burstKey, setBurstKey] = useState(0);
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      setLiked((prev) => {
+        if (!prev) setBurstKey((key) => key + 1);
+        return !prev;
+      });
+    };
+
+    const shown = count + (liked && !defaultLiked ? 1 : 0);
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={liked}
+        aria-label={liked ? likedLabel : label}
+        data-slot="like-button"
+        onClick={handleClick}
+        className={cn(
+          "inline-flex h-10 cursor-pointer items-center gap-2 rounded-full pr-4 pl-3 font-sans text-sm font-medium select-none",
+          "transition-[background-color,box-shadow,color] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]",
+          // Soft blurred top highlight (not a hard white rim) + lift shadows.
+          "shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_1px_rgba(0,0,0,0.1),0_2px_4px_rgba(0,0,0,0.08),inset_0_1px_2px_rgba(255,255,255,0.4),inset_0_-2px_4px_rgba(0,0,0,0.08)]",
+          "active:shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_1px_rgba(0,0,0,0.06),inset_0_1px_2px_rgba(0,0,0,0.08),inset_0_2px_4px_rgba(0,0,0,0.04),inset_0_-1px_2px_rgba(0,0,0,0.05)]",
+          liked
+            ? "bg-rose-50 text-rose-600 active:bg-rose-100"
+            : "bg-neutral-50 text-neutral-600 hover:text-neutral-900 active:bg-neutral-100",
+          className,
+        )}
+        {...props}
+      >
+        <span className="relative flex size-5 items-center justify-center">
+          {liked && <Burst key={burstKey} color="#FB7185" />}
+          <Heart
+            size={16}
+            strokeWidth={2}
+            aria-hidden
+            className={cn(
+              "relative z-10 transition-[transform,fill,color,filter] duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]",
+              "filter-[drop-shadow(0_1px_1px_rgba(0,0,0,0.22))_drop-shadow(0_2px_3px_rgba(0,0,0,0.12))]",
+              liked
+                ? "scale-110 fill-rose-500 text-rose-500 filter-[drop-shadow(0_1px_1px_rgba(244,63,94,0.35))_drop-shadow(0_2px_4px_rgba(244,63,94,0.2))]"
+                : "scale-100 fill-transparent text-current",
+            )}
+          />
+        </span>
+
+        <span className="tabular-nums">{shown.toLocaleString()}</span>
+      </button>
+    );
+  },
+);
+
+LikeButton.displayName = "LikeButton";

package/components/buttons/linen-tab-button.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type LinenTabButtonProps = Readonly<
+  {
+    children?: ReactNode;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+const LINEN_BODY =
+  "linear-gradient(180deg, #f8f4ee 0%, #ebe4d8 55%, #dfd6c8 100%)";
+const LINEN_WEAVE =
+  "repeating-linear-gradient(90deg, rgba(120,113,108,0.04) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgba(120,113,108,0.03) 0 1px, transparent 1px 5px)";
+
+export const LinenTabButton = forwardRef<
+  HTMLButtonElement,
+  LinenTabButtonProps
+>(
+  (
+    {
+      children = "View details",
+      className,
+      type = "button",
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        data-slot="linen-tab-button"
+        className={cn(
+          "relative isolate overflow-hidden rounded-lg border border-[#d4cbc0] px-6 py-3 text-[1rem] ring-0 outline-none",
+          "font-sans font-medium tracking-tight text-neutral-800",
+          "shadow-[0_1px_0_rgba(255,255,255,0.85),0_6px_14px_rgba(120,113,108,0.16),inset_0_1px_0_rgba(255,255,255,0.65)]",
+          "transition-[transform,box-shadow,filter] duration-200 ease-out",
+          "hover:brightness-[1.02] active:translate-y-px active:brightness-[0.98]",
+          "motion-reduce:transition-none motion-reduce:hover:brightness-100 motion-reduce:active:translate-y-0",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        style={{ background: LINEN_BODY }}
+        {...props}
+      >
+        <span
+          aria-hidden="true"
+          data-layer="linen-weave"
+          className="pointer-events-none absolute inset-0 opacity-80"
+          style={{ background: LINEN_WEAVE }}
+        />
+
+        <span
+          aria-hidden="true"
+          data-layer="linen-stitch-top"
+          className="pointer-events-none absolute inset-x-3 top-1.5 border-t border-dashed border-[#c4b8aa]/80"
+        />
+        <span
+          aria-hidden="true"
+          data-layer="linen-stitch-bottom"
+          className="pointer-events-none absolute inset-x-3 bottom-1.5 border-b border-dashed border-[#c4b8aa]/80"
+        />
+
+        <span
+          aria-hidden="true"
+          data-layer="linen-fold"
+          className="pointer-events-none absolute inset-0"
+          style={{
+            background:
+              "linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 28%, rgba(87,83,78,0.05) 100%)",
+          }}
+        />
+
+        <span data-layer="linen-label" className="relative z-1">
+          {children}
+        </span>
+      </button>
+    );
+  },
+);
+
+LinenTabButton.displayName = "LinenTabButton";

package/components/buttons/prism-depth-button.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type PrismDepthButtonProps = Readonly<
+  {
+    children?: ReactNode;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+const PRISM_SHELL =
+  "radial-gradient(circle 80px at 80% -10%, #ffffff, #181b1b)";
+const PRISM_EDGE_FLARE =
+  "radial-gradient(circle 60px at 0% 100%, #3fe9ff, #0000ff80, transparent)";
+const PRISM_CORE = "radial-gradient(circle 80px at 80% -50%, #777777, #0f1111)";
+const PRISM_CORE_VEIL =
+  "radial-gradient(circle 60px at 0% 100%, #00e1ff1a, #0000ff11, transparent)";
+
+export const PrismDepthButton = forwardRef<
+  HTMLButtonElement,
+  PrismDepthButtonProps
+>(
+  (
+    { children = "Continue", className, type = "button", disabled, ...props },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        data-slot="prism-depth-button"
+        className={cn(
+          "relative isolate cursor-pointer rounded-2xl border-0 p-0.5 text-[1.4rem] ring-0 outline-none",
+          "transition-[transform,opacity] duration-200 ease-out",
+          "hover:scale-[1.02] active:scale-[0.98] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        style={{ background: PRISM_SHELL }}
+        {...props}
+      >
+        <span
+          aria-hidden="true"
+          data-layer="prism-rim-glow"
+          className="pointer-events-none absolute top-0 right-0 -z-10 h-[60%] w-[65%] rounded-[120px]"
+          style={{ boxShadow: "0 0 20px #ffffff38" }}
+        />
+
+        <span
+          aria-hidden="true"
+          data-layer="prism-edge-flare"
+          className="pointer-events-none absolute bottom-0 left-0 h-full w-[70px] rounded-2xl"
+          style={{
+            background: PRISM_EDGE_FLARE,
+            boxShadow: "-10px 10px 30px #0051ff2d",
+          }}
+        />
+
+        <span
+          data-layer="prism-core"
+          className="relative z-[3] block rounded-[14px] px-[25px] py-3.5 text-white"
+          style={{ background: PRISM_CORE }}
+        >
+          <span
+            aria-hidden="true"
+            data-layer="prism-core-veil"
+            className="pointer-events-none absolute inset-0 rounded-[14px]"
+            style={{ background: PRISM_CORE_VEIL }}
+          />
+          <span
+            data-layer="prism-label"
+            className="relative z-[1] font-sans font-medium tracking-tight"
+          >
+            {children}
+          </span>
+        </span>
+      </button>
+    );
+  },
+);
+
+PrismDepthButton.displayName = "PrismDepthButton";

package/components/buttons/quantity-stepper-button.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { Minus, Plus } from "lucide-react";
+
+export type QuantityStepperButtonProps = Readonly<
+  {
+    value?: number;
+    min?: number;
+    max?: number;
+    onChange?: (value: number) => void;
+  } & Omit<ComponentPropsWithoutRef<"div">, "onChange">
+>;
+
+// Quantity stepper — minus, count, plus in one inline control.
+export const QuantityStepperButton = forwardRef<
+  HTMLDivElement,
+  QuantityStepperButtonProps
+>(
+  (
+    {
+      className,
+      value: defaultValue = 1,
+      min = 0,
+      max = 99,
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const [value, setValue] = useState(defaultValue);
+
+    const update = (next: number) => {
+      const clamped = Math.min(max, Math.max(min, next));
+      setValue(clamped);
+      onChange?.(clamped);
+    };
+
+    // Raised key: layered drop shadows below, white bevel on top, shaded
+    // bottom edge. Pressing sinks it and flips the shadows inward.
+    const keyClass = cn(
+      "group flex w-10 cursor-pointer items-center justify-center rounded-lg bg-neutral-50 text-neutral-600 transition-[box-shadow,color,transform,background-color] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]",
+      "shadow-[0_1px_1px_rgba(0,0,0,0.12),0_2px_3px_rgba(0,0,0,0.1),0_4px_8px_rgba(0,0,0,0.06),inset_0_1px_0_rgba(255,255,255,0.55),inset_0_-2px_3px_rgba(0,0,0,0.1),inset_1px_0_1px_rgba(255,255,255,0.25),inset_-1px_0_1px_rgba(255,255,255,0.25)]",
+      "hover:text-neutral-900",
+      "active:bg-neutral-100 active:shadow-[0_1px_1px_rgba(0,0,0,0.06),inset_0_1px_1px_rgba(0,0,0,0.06),inset_0_2px_3px_rgba(0,0,0,0.03),inset_0_-2px_3px_rgba(0,0,0,0.05)]",
+      "disabled:cursor-default disabled:bg-transparent disabled:text-neutral-300 disabled:shadow-none",
+    );
+
+    // Soft cast shadow under the glyph — 3D lift, no hard outline rim.
+    const iconClass = cn(
+      "shrink-0 filter-[drop-shadow(0_1px_1px_rgba(0,0,0,0.22))_drop-shadow(0_2px_3px_rgba(0,0,0,0.12))]",
+      "group-disabled:filter-none",
+    );
+
+    return (
+      <div
+        ref={ref}
+        data-slot="quantity-stepper-button"
+        className={cn(
+          "inline-flex h-11 items-stretch gap-1 rounded-xl bg-neutral-100 p-1 font-sans text-sm font-medium select-none",
+          "shadow-[inset_0_1px_2px_rgba(0,0,0,0.08),inset_0_2px_4px_rgba(0,0,0,0.05),inset_0_-2px_3px_rgba(0,0,0,0.06),0_1px_0_rgba(255,255,255,0.9)]",
+          className,
+        )}
+        {...props}
+      >
+        <button
+          type="button"
+          aria-label="Decrease quantity"
+          disabled={value <= min}
+          onClick={() => update(value - 1)}
+          className={keyClass}
+        >
+          <Minus
+            size={15}
+            strokeWidth={2.5}
+            aria-hidden
+            className={iconClass}
+          />
+        </button>
+
+        <span
+          className="flex min-w-10 items-center justify-center px-2 text-neutral-900 tabular-nums [text-shadow:0_1px_0_rgba(255,255,255,0.8)]"
+          aria-live="polite"
+        >
+          {value}
+        </span>
+
+        <button
+          type="button"
+          aria-label="Increase quantity"
+          disabled={value >= max}
+          onClick={() => update(value + 1)}
+          className={keyClass}
+        >
+          <Plus size={15} strokeWidth={2.5} aria-hidden className={iconClass} />
+        </button>
+      </div>
+    );
+  },
+);
+
+QuantityStepperButton.displayName = "QuantityStepperButton";

package/components/buttons/segmented-toggle-button.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+export type SegmentedToggleButtonProps = Readonly<
+  {
+    options?: readonly string[];
+    defaultIndex?: number;
+    onChange?: (index: number, value: string) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const SEGMENT_MOTION =
+  "transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none";
+
+const LABEL_MOTION =
+  "transition-[color,opacity] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none";
+
+function segmentGridClass(count: number): string {
+  if (count <= 2) return "grid-cols-2";
+  if (count === 3) return "grid-cols-3";
+  if (count === 4) return "grid-cols-4";
+  return "grid-cols-5";
+}
+
+function indicatorWidthClass(count: number): string {
+  // Subtract horizontal padding (0.5rem) plus inter-segment gaps (gap-1 each).
+  if (count <= 2) return "w-[calc((100%-0.75rem)/2)]";
+  if (count === 3) return "w-[calc((100%-1rem)/3)]";
+  if (count === 4) return "w-[calc((100%-1.25rem)/4)]";
+  return "w-[calc((100%-1.5rem)/5)]";
+}
+
+function indicatorOffsetClass(count: number, active: number): string {
+  if (active <= 0) return "translate-x-0";
+
+  const offsets: Record<number, Record<number, string>> = {
+    2: { 1: "translate-x-[calc(100%+0.25rem)]" },
+    3: {
+      1: "translate-x-[calc(100%+0.25rem)]",
+      2: "translate-x-[calc(200%+0.5rem)]",
+    },
+    4: {
+      1: "translate-x-[calc(100%+0.25rem)]",
+      2: "translate-x-[calc(200%+0.5rem)]",
+      3: "translate-x-[calc(300%+0.75rem)]",
+    },
+    5: {
+      1: "translate-x-[calc(100%+0.25rem)]",
+      2: "translate-x-[calc(200%+0.5rem)]",
+      3: "translate-x-[calc(300%+0.75rem)]",
+      4: "translate-x-[calc(400%+1rem)]",
+    },
+  };
+
+  const capped = Math.min(count, 5);
+  return offsets[capped]?.[active] ?? "translate-x-0";
+}
+
+// Segmented toggle — iOS-style sliding pill with smooth eased motion.
+export const SegmentedToggleButton = forwardRef<
+  HTMLDivElement,
+  SegmentedToggleButtonProps
+>(
+  (
+    {
+      className,
+      options = ["Day", "Week", "Month"],
+      defaultIndex = 0,
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const [active, setActive] = useState(defaultIndex);
+    const count = options.length;
+    const safeActive = Math.min(Math.max(active, 0), Math.max(count - 1, 0));
+
+    const select = (index: number) => {
+      setActive(index);
+      onChange?.(index, options[index] ?? "");
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="tablist"
+        data-slot="segmented-toggle-button"
+        className={cn(
+          "relative inline-grid w-fit gap-1 rounded-xl bg-neutral-100 p-1 font-sans text-sm font-medium select-none",
+          "shadow-[inset_0_1px_2px_rgba(0,0,0,0.08),inset_0_2px_4px_rgba(0,0,0,0.05),inset_0_-2px_3px_rgba(0,0,0,0.06),0_1px_0_rgba(255,255,255,0.9)]",
+          segmentGridClass(count),
+          className,
+        )}
+        {...props}
+      >
+        <span
+          aria-hidden
+          className={cn(
+            "pointer-events-none absolute top-1 bottom-1 left-1 rounded-lg bg-white",
+            "shadow-[0_2px_4px_rgba(0,0,0,0.15),0_1px_1px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.95),inset_0_-2px_3px_rgba(0,0,0,0.06)]",
+            SEGMENT_MOTION,
+            indicatorWidthClass(count),
+            indicatorOffsetClass(count, safeActive),
+          )}
+        />
+
+        {options.map((option, index) => (
+          <button
+            key={option}
+            type="button"
+            role="tab"
+            aria-selected={safeActive === index}
+            tabIndex={safeActive === index ? 0 : -1}
+            onClick={() => select(index)}
+            className={cn(
+              "relative z-10 min-w-18 cursor-pointer rounded-lg px-4 py-2 text-center whitespace-nowrap outline-none focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-900",
+              LABEL_MOTION,
+              safeActive === index
+                ? "text-neutral-900"
+                : "text-neutral-500 hover:text-neutral-700",
+            )}
+          >
+            {option}
+          </button>
+        ))}
+      </div>
+    );
+  },
+);
+
+SegmentedToggleButton.displayName = "SegmentedToggleButton";

package/components/buttons/sheen-pill-button.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type SheenPillButtonProps = Readonly<
+  {
+    children: ReactNode;
+    width?: number;
+    height?: number;
+    highlight?: number;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+const SHEEN_PILL_RADIUS = 9999;
+
+const SHEEN_SHELL =
+  "group relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-4 overflow-hidden border border-double border-[rgba(51,51,51,0.08)] bg-[rgba(255,255,255,0.08)] backdrop-blur-[5px] brightness-[1.05]";
+
+const SHEEN_SHELL_SHADOW =
+  "[box-shadow:inset_2px_-2px_1px_-1px_rgba(255,255,255,0.9),inset_-2px_2px_1px_-1px_rgba(255,255,255,0.9),inset_6px_-6px_1px_-6px_rgba(255,255,255,0.55),inset_-6px_6px_1px_-6px_rgba(255,255,255,0.55),inset_0_0_2px_rgba(0,0,0,0.8),0_4px_8px_rgba(0,0,0,0.2)]";
+
+const SHEEN_SHELL_HOVER_SHADOW =
+  "hover:[box-shadow:inset_2px_-2px_1px_-1px_rgba(255,255,255,0.95),inset_-2px_2px_1px_-1px_rgba(255,255,255,0.95),inset_6px_-6px_1px_-6px_rgba(255,255,255,0.65),inset_-6px_6px_1px_-6px_rgba(255,255,255,0.65),inset_0_0_2px_rgba(0,0,0,0.65),0_6px_12px_rgba(0,0,0,0.22)]";
+
+export const SheenPillButton = forwardRef<
+  HTMLButtonElement,
+  SheenPillButtonProps
+>(
+  (
+    {
+      children,
+      className,
+      width = 180,
+      height = 60,
+      highlight = 15,
+      type = "button",
+      disabled,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const shadeVeilWidth = width - 16;
+    const shadeVeilHeight = height - 16;
+    const rimWireWidth = width - 9;
+    const rimWireHeight = height - 9;
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        data-slot="sheen-pill-button"
+        className={cn(
+          SHEEN_SHELL,
+          "transition-[transform,background-color,box-shadow,filter] duration-250 ease-linear motion-reduce:transition-none",
+          "hover:scale-[1.02] hover:bg-transparent hover:brightness-110",
+          "active:scale-100 motion-reduce:hover:scale-100",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          SHEEN_SHELL_SHADOW,
+          SHEEN_SHELL_HOVER_SHADOW,
+          className,
+        )}
+        style={{
+          width,
+          height,
+          borderRadius: SHEEN_PILL_RADIUS,
+          ...style,
+        }}
+        {...props}
+      >
+        <span
+          aria-hidden="true"
+          data-layer="sheen-shade-veil"
+          className="pointer-events-none absolute top-[35%] left-1/2 z-0 -translate-x-1/2 border border-[rgba(0,0,0,0.9)] blur-sm transition-[opacity,transform,filter] duration-250 ease-linear group-hover:opacity-80 group-hover:blur-md motion-reduce:transition-none"
+          style={{
+            width: shadeVeilWidth,
+            height: shadeVeilHeight,
+            borderRadius: SHEEN_PILL_RADIUS,
+          }}
+        />
+
+        <span
+          aria-hidden="true"
+          data-layer="sheen-light-band"
+          className="pointer-events-none absolute inset-0 z-10 opacity-80 blur-[7px] transition-[opacity,transform,filter] duration-250 ease-linear group-hover:scale-105 group-hover:opacity-100 group-hover:blur-[9px] motion-reduce:transition-none motion-reduce:group-hover:scale-100"
+          style={{
+            borderRadius: SHEEN_PILL_RADIUS,
+            background: `linear-gradient(45deg, rgba(255,255,255,0.8) 0%, transparent ${highlight}%, transparent calc(100% - ${highlight}%), rgba(255,255,255,0.8) 100%)`,
+          }}
+        />
+
+        <span
+          aria-hidden="true"
+          data-layer="sheen-rim-wire"
+          className="pointer-events-none absolute top-1/2 left-1/2 z-20 -translate-x-1/2 -translate-y-1/2 border border-[rgba(255,255,255,0.2)] blur-[1px] transition-[border-color,opacity] duration-250 ease-linear group-hover:border-[rgba(255,255,255,0.45)] group-hover:opacity-100 motion-reduce:transition-none"
+          style={{
+            width: rimWireWidth,
+            height: rimWireHeight,
+            borderRadius: SHEEN_PILL_RADIUS,
+          }}
+        />
+
+        <span
+          data-layer="sheen-label-well"
+          className="relative z-30 flex h-full w-full items-center justify-center gap-4 px-[0.8rem]"
+        >
+          <span
+            data-layer="sheen-label"
+            className="text-lg leading-none whitespace-nowrap text-[#3e3e3e] filter-[drop-shadow(0_25px_3px_rgba(102,102,102,0.15))] transition-[color,filter,transform] duration-250 ease-linear group-hover:translate-y-[-0.5px] group-hover:text-neutral-800 group-hover:filter-[drop-shadow(0_28px_4px_rgba(102,102,102,0.2))] motion-reduce:transition-none motion-reduce:group-hover:translate-y-0"
+          >
+            {children}
+          </span>
+        </span>
+      </button>
+    );
+  },
+);
+
+SheenPillButton.displayName = "SheenPillButton";