19:I[695313,["/_next/static/immutable/chunks/422lj974qmlrg.js","/_next/static/immutable/chunks/2__nhv993kwpc.js","/_next/static/immutable/chunks/1ld4m_f9jcwkz.js","/_next/static/immutable/chunks/2h82mq8b3z8_q.js","/_next/static/immutable/chunks/3uooxtxo-riau.js"],"Workbench"] 1a:T124e,"use client"; import * as React from "react"; import { cn } from "@/registry/_lib/cn"; export interface WarmBandActionButtonProps extends React.ButtonHTMLAttributes { children: React.ReactNode; /** Hue of the band. The light stops and the border are derived from it. */ accent?: string; /** Show the bolt glyph in front of the label. */ showIcon?: boolean; /** Corner radius in pixels. */ radius?: number; /** Overall size multiplier, applied through the font size. */ scale?: number; } function hexToRgb(hex: string): [number, number, number] { const value = hex.replace("#", ""); const full = value.length === 3 ? value.split("").map((c) => c + c).join("") : value; const num = Number.parseInt(full.slice(0, 6), 16); if (Number.isNaN(num)) return [0, 0, 0]; return [(num >> 16) & 255, (num >> 8) & 255, num & 255]; } function toHex(rgb: [number, number, number]): string { const part = (n: number) => Math.round(Math.min(255, Math.max(0, n))).toString(16).padStart(2, "0"); return "#" + part(rgb[0]) + part(rgb[1]) + part(rgb[2]); } /** Linear mix of two hex colors, t = 0 gives a, t = 1 gives b. */ function mix(a: string, b: string, t: number): string { const c1 = hexToRgb(a); const c2 = hexToRgb(b); return toHex([c1[0] + (c2[0] - c1[0]) * t, c1[1] + (c2[1] - c1[1]) * t, c1[2] + (c2[2] - c1[2]) * t]); } function rgba(hex: string, alpha: number): string { const c = hexToRgb(hex); return "rgba(" + c[0] + ", " + c[1] + ", " + c[2] + ", " + alpha + ")"; } /** * A large call to action that carries a warm three-stop band, light at the edges and deep through * the middle. Hovering slides the stops along their track so the deep part travels aside and the * light part takes the middle, like a sweep moving under fixed glass. The bolt glyph brightens a * fraction ahead of the band. The label stays dark because the band never gets that dark. */ export function WarmBandActionButton({ children, accent = "#FF6A1F", showIcon = true, radius = 20, scale = 1, className, ...rest }: WarmBandActionButtonProps) { const tint = mix(accent, "#FFFFFF", 0.55); const deep = mix(accent, "#000000", 0.35); const glyphBright = mix(accent, "#FFFFFF", 0.9); const band = "linear-gradient(90deg, " + tint + " 0%, " + accent + " 25%, " + tint + " 50%, " + tint + " 70%, " + accent + " 95%, " + tint + " 100%)"; return ( ); } export default WarmBandActionButton;1b:Tb18c,

"use client";

import * as React from "react";
import { cn } from "@/registry/_lib/cn";

export interface WarmBandActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  /** Hue of the band. The light stops and the border are derived from it. */
  accent?: string;
  /** Show the bolt glyph in front of the label. */
  showIcon?: boolean;
  /** Corner radius in pixels. */
  radius?: number;
  /** Overall size multiplier, applied through the font size. */
  scale?: number;
}

function hexToRgb(hex: string): [number, number, number] {
  const value = hex.replace("#", "");
  const full = value.length === 3 ? value.split("").map((c) => c + c).join("") : value;
  const num = Number.parseInt(full.slice(0, 6), 16);
  if (Number.isNaN(num)) return [0, 0, 0];
  return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
}

function toHex(rgb: [number, number, number]): string {
  const part = (n: number) => Math.round(Math.min(255, Math.max(0, n))).toString(16).padStart(2, "0");
  return "#" + part(rgb[0]) + part(rgb[1]) + part(rgb[2]);
}

/** Linear mix of two hex colors, t = 0 gives a, t = 1 gives b. */
function mix(a: string, b: string, t: number): string {
  const c1 = hexToRgb(a);
  const c2 = hexToRgb(b);
  return toHex([c1[0] + (c2[0] - c1[0]) * t, c1[1] + (c2[1] - c1[1]) * t, c1[2] + (c2[2] - c1[2]) * t]);
}

function rgba(hex: string, alpha: number): string {
  const c = hexToRgb(hex);
  return "rgba(" + c[0] + ", " + c[1] + ", " + c[2] + ", " + alpha + ")";
}

/**
 * A large call to action that carries a warm three-stop band, light at the edges and deep through
 * the middle. Hovering slides the stops along their track so the deep part travels aside and the
 * light part takes the middle, like a sweep moving under fixed glass. The bolt glyph brightens a
 * fraction ahead of the band. The label stays dark because the band never gets that dark.
 */
export function WarmBandActionButton({
  children,
  accent = "#FF6A1F",
  showIcon = true,
  radius = 20,
  scale = 1,
  className,
  ...rest
}: WarmBandActionButtonProps) {
  const tint = mix(accent, "#FFFFFF", 0.55);
  const deep = mix(accent, "#000000", 0.35);
  const glyphBright = mix(accent, "#FFFFFF", 0.9);
  const band =
    "linear-gradient(90deg, " + tint + " 0%, " + accent + " 25%, " + tint + " 50%, " + tint + " 70%, " + accent + " 95%, " + tint + " 100%)";

  return (
    <button
      type="button"
      className={cn(
        "group relative isolate inline-flex select-none items-center justify-center overflow-hidden whitespace-nowrap border font-semibold tracking-tight outline-none",
        "transition-transform duration-100 ease-out active:scale-y-[0.97]",
        "focus-visible:ring-2 focus-visible:ring-[var(--wb-ring)]",
        showIcon ? "gap-[0.5em]" : "gap-0",
        className,
      )}
      style={{
        fontSize: 20 * scale + "px",
        padding: "1em 2.1em",
        borderRadius: radius + "px",
        color: mix(accent, "#000000", 0.86),
        backgroundColor: tint,
        borderColor: rgba(deep, 0.5),
        ["--wb-glyph" as string]: deep,
        ["--wb-glyph-bright" as string]: glyphBright,
        ["--wb-ring" as string]: rgba(deep, 0.55),
      }}
      {...rest}
    >
      <span
        aria-hidden
        className={cn(
          "absolute inset-0",
          "motion-safe:transition-[background-position] motion-safe:duration-[420ms] motion-safe:ease-[cubic-bezier(0.33,0.9,0.35,1)]",
          "motion-safe:group-active:duration-150",
          "motion-safe:group-hover:[background-position:100%_0%] motion-safe:group-focus-visible:[background-position:100%_0%]",
        )}
        style={{ background: band, backgroundSize: "200% 100%", backgroundPosition: "0% 0%" }}
      />
      <span
        aria-hidden
        className="absolute inset-0 opacity-0 motion-reduce:transition-opacity motion-reduce:duration-[120ms] motion-reduce:group-hover:opacity-100 motion-reduce:group-focus-visible:opacity-100"
        style={{ background: band, backgroundSize: "200% 100%", backgroundPosition: "100% 0%" }}
      />
      {showIcon && (
        <span aria-hidden className="relative z-10 h-[1.2em] w-[1.2em] shrink-0">
          <svg
            viewBox="0 0 24 24"
            className="h-[1.2em] w-[1.2em] fill-[var(--wb-glyph)] transition-[fill] duration-150 ease-out group-hover:fill-[var(--wb-glyph-bright)] group-focus-visible:fill-[var(--wb-glyph-bright)]"
          >
            <path d="M13 2 4 13h6l-1.5 9L20 10.5h-6.5L13 2Z" />
          </svg>
        </span>
      )}
      <span className="relative z-10">{children}</span>
    </button>
  );
}

export default WarmBandActionButton;

1c:T258a,

"use client";

import { WarmBandActionButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  showIcon?: boolean;
  radius?: number;
  scale?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Join now", accent = "#FF6A1F", showIcon = true, radius = 20, scale = 1 }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-5 p-8">
      <WarmBandActionButton accent={accent} showIcon={showIcon} radius={radius} scale={scale}>
        {label}
      </WarmBandActionButton>
      <WarmBandActionButton accent="#38BDF8" showIcon={showIcon} radius={radius} scale={scale}>
        Claim early access
      </WarmBandActionButton>
    </div>
  );
}

1d:T10e7, 1e:Tfabd,

<script setup lang="ts">
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    label?: string;
    accent?: string;
    showIcon?: boolean;
    radius?: number;
    scale?: number;
  }>(),
  { label: "Join now", accent: "#FF6A1F", showIcon: true, radius: 20, scale: 1 },
);

function hexToRgb(hex: string): [number, number, number] {
  const value = hex.replace("#", "");
  const full = value.length === 3 ? value.split("").map((c) => c + c).join("") : value;
  const num = Number.parseInt(full.slice(0, 6), 16);
  if (Number.isNaN(num)) return [0, 0, 0];
  return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
}

function toHex(rgb: [number, number, number]): string {
  const part = (n: number) => Math.round(Math.min(255, Math.max(0, n))).toString(16).padStart(2, "0");
  return "#" + part(rgb[0]) + part(rgb[1]) + part(rgb[2]);
}

function mix(a: string, b: string, t: number): string {
  const c1 = hexToRgb(a);
  const c2 = hexToRgb(b);
  return toHex([c1[0] + (c2[0] - c1[0]) * t, c1[1] + (c2[1] - c1[1]) * t, c1[2] + (c2[2] - c1[2]) * t]);
}

function rgba(hex: string, alpha: number): string {
  const c = hexToRgb(hex);
  return "rgba(" + c[0] + ", " + c[1] + ", " + c[2] + ", " + alpha + ")";
}

const tint = computed(() => mix(props.accent, "#FFFFFF", 0.55));
const deep = computed(() => mix(props.accent, "#000000", 0.35));
const ink = computed(() => mix(props.accent, "#000000", 0.86));
const glyphBright = computed(() => mix(props.accent, "#FFFFFF", 0.9));
const band = computed(
  () =>
    "linear-gradient(90deg, " + tint.value + " 0%, " + props.accent + " 25%, " + tint.value + " 50%, " + tint.value + " 70%, " + props.accent + " 95%, " + tint.value + " 100%)",
);

const buttonStyle = computed(() => ({
  fontSize: 20 * props.scale + "px",
  borderRadius: props.radius + "px",
  color: ink.value,
  backgroundColor: tint.value,
  borderColor: rgba(deep.value, 0.5),
  "--wb-band": band.value,
  "--wb-glyph": deep.value,
  "--wb-glyph-bright": glyphBright.value,
  "--wb-ring": rgba(deep.value, 0.55),
}));
</script>

<template>
  <button type="button" class="wb-button" :class="{ 'wb-button--no-icon': !showIcon }" :style="buttonStyle">
    <span v-if="showIcon" aria-hidden="true" class="wb-icon">
      <svg viewBox="0 0 24 24"><path d="M13 2 4 13h6l-1.5 9L20 10.5h-6.5L13 2Z" /></svg>
    </span>
    <span class="wb-label">{{ label }}</span>
    <span aria-hidden="true" class="wb-band wb-band--rest" />
    <span aria-hidden="true" class="wb-band wb-band--hover" />
  </button>
</template>

<style scoped>
.wb-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  overflow: hidden;
  white-space: nowrap;
  padding: 1em 2.1em;
  border: 1px solid transparent;
  font: 600 1em/1.2 system-ui, sans-serif;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: transform 100ms ease;
}
.wb-button:active {
  transform: scale(1, 0.97);
}
.wb-button:focus-visible {
  box-shadow: 0 0 0 2px var(--wb-ring);
}
.wb-button--no-icon {
  gap: 0;
}
.wb-band {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--wb-band);
  background-size: 200% 100%;
}
.wb-band--rest {
  background-position: 0% 0%;
}
.wb-band--hover {
  background-position: 100% 0%;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .wb-band--rest {
    transition: background-position 420ms cubic-bezier(0.33, 0.9, 0.35, 1);
  }
  .wb-button:hover .wb-band--rest,
  .wb-button:focus-visible .wb-band--rest {
    background-position: 100% 0%;
  }
  .wb-button:active .wb-band--rest {
    transition-duration: 150ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb-band--hover {
    transition: opacity 120ms ease;
  }
  .wb-button:hover .wb-band--hover,
  .wb-button:focus-visible .wb-band--hover {
    opacity: 1;
  }
}
.wb-icon {
  position: relative;
  z-index: 1;
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 200ms ease;
}
.wb-icon svg {
  width: 1.2em;
  height: 1.2em;
  fill: var(--wb-glyph);
  transition: fill 150ms ease;
}
.wb-button:hover .wb-icon svg,
.wb-button:focus-visible .wb-icon svg {
  fill: var(--wb-glyph-bright);
}
.wb-label {
  position: relative;
  z-index: 1;
}
</style>

1f:T1120,

Nearby