Component

LiveNew

Shimmer Button

Single shimmer su offset-path attorno al perimetro a 4s. Background invertito (text-bg su bg-fg), il bordo è il ring del comet.

ButtonEffectClient

Open in Claude Sorgente

Esempio⁰¹

shimmer-button.tsx

001Default

002Hero CTA · paired with secondary

Pronto a spedire?

Componenti già brand-locked, copy in italiano, prompt LLM pronti per Claude.

003Custom color · accent override

tsxsrc/components/shimmer-button.tsx

import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
import { cn } from "@/lib/utils";

export type ShimmerButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
    children: ReactNode;
    /** Color of the rotating shimmer halo. Default `var(--accent)`. */
    shimmerColor?: string;
    /** Spin duration. Default 4s. */
    shimmerDuration?: string;
    /** Button face background. Default `var(--fg)`. */
    background?: string;
    /** Border radius in px. Default 999 (pill). */
    borderRadius?: number;
    className?: string;
};

/**
 * <ShimmerButton/> — pill button with a rotating conic-gradient halo
 * masked behind a 1px ring. Pure CSS — no JS, no offset-path quirks.
 */
export function ShimmerButton({
    children,
    shimmerColor = "var(--accent)",
    shimmerDuration = "4s",
    background = "var(--fg)",
    borderRadius = 999,
    className,
    ...rest
}: ShimmerButtonProps) {
    const shellStyle = {
        "--shimmer-color": shimmerColor,
        "--shimmer-duration": shimmerDuration,
        "--shimmer-radius": `${borderRadius}px`,
        "--shimmer-bg": background,
    } as CSSProperties;

    return (
        <>
            <style>{`
                @keyframes shimmer-button-spin {
                    from { transform: translate(-50%, -50%) rotate(0deg); }
                    to   { transform: translate(-50%, -50%) rotate(360deg); }
                }
            `}</style>
            <button
                type="button"
                {...rest}
                style={shellStyle}
                className={cn(
                    "press relative isolate inline-flex items-center justify-center gap-2",
                    "min-h-[44px] px-5 py-2",
                    "font-sans text-sm font-medium",
                    "overflow-hidden",
                    className,
                )}
            >
                <span
                    aria-hidden
                    className="pointer-events-none absolute inset-0 -z-10 overflow-hidden"
                    style={{ borderRadius: "var(--shimmer-radius)" }}
                >
                    <span
                        className="absolute left-1/2 top-1/2 aspect-square w-[200%]"
                        style={{
                            background: `conic-gradient(from 0deg, transparent 0deg, var(--shimmer-color) 60deg, transparent 120deg)`,
                            animation:
                                "shimmer-button-spin var(--shimmer-duration) linear infinite",
                        }}
                    />
                </span>
                <span
                    aria-hidden
                    className="pointer-events-none absolute -z-10"
                    style={{
                        inset: 1,
                        borderRadius: `calc(var(--shimmer-radius) - 1px)`,
                        background: "var(--shimmer-bg)",
                    }}
                />
                <span
                    className="relative"
                    style={{ color: "var(--bg)" }}
                >
                    {children}
                </span>
            </button>
        </>
    );
}

Note — Il comet vive su offset-path: rect(...) e quindi rispetta esattamente il border-radius. Usa CSS Motion Path (Chrome 116+, Safari 16+, Firefox 122+).

Prompt LLM⁰²

Incolla in Claude o ChatGPT per generare la tua variante. Include il contesto del brand, i token e i vincoli del progetto.

Prompt · shimmer-button

Sei un senior frontend engineer. Stai lavorando su un sito Next.js 16 + React 19 + Tailwind v4 in italiano, look chanhdai-inspired: colonna stretta 672px, Geist Sans + Geist Mono, hairline 1px, divisori a stripe diagonale, palette zinc.

Token CSS disponibili: --bg, --bg-alt, --fg, --fg-muted, --fg-soft, --border, --border-strong, --accent. Usa SEMPRE queste variabili tramite le utility tailwind generate (bg-bg, text-fg-muted, border-border, ecc.). Helper "cn" da "@/lib/utils". Niente librerie UI extra: solo lucide-react e tailwind-merge.

Genera un componente <ShimmerButton>: pillola con cometa shimmer sul bordo.
Props:
- children: ReactNode.
- shimmerColor?: string (default "var(--accent)").
- shimmerDuration?: string (default "4s").
- background?: string (default "var(--fg)").
- borderRadius?: number (default 999).
- className?: string + ...rest button props.

Implementazione:
- "use client" + classe press, min-h-[44px], px-5 py-2.
- Pseudo-layer absolute -z-10 con offset-path rect(0 100% 100% 0 round Npx), aspect-ratio 1, width 22%, linear-gradient transparent → shimmerColor → transparent, blur 6px.
- Inset bg per nascondere il riempimento e tenere solo il ring effect.

Output: file completo src/components/shimmer-button.tsx.

Uso tipico⁰³

tsx

<ShimmerButton shimmerColor="var(--accent)" shimmerDuration="4s">Get Started</ShimmerButton>

Dipendenze⁰⁴

npm

lucide-react
tailwind-merge
clsx

Interno

@/lib/utils#cn

Ti è servito? Dimmelo, oppure proponi il prossimo componente.

Catalogo Scrivimi feedback