VibeUI

Buttons

Magnetic CTA Button

Крупная CTA с эффектом притяжения: на наведении поднимается, свечение разрастается, по поверхности проходит блик. Самодостаточна: один файл, без зависимостей.

  • button
  • cta
  • gradient
  • animated
  • hero

Preview

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.
Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Install and place "button-003" (Magnetic CTA Button) from VibeUI

## 1. Install first — do not skip, do not recreate
Install command is unavailable: the VibeUI registry URL is not configured.

Installs to: components/vibeui/button-003.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
Крупная CTA с эффектом притяжения: на наведении поднимается, свечение разрастается, по поверхности проходит блик. Самодостаточна: один файл, без зависимостей.

Крупная градиентная CTA-пилюля. На наведении приподнимается и слегка увеличивается, тень под ней разрастается, а по поверхности слева направо проходит светлый блик; стрелка уезжает вперёд. Всё на CSS-переходах, ноль зависимостей, один файл.

## 3. How to use it
import { Button003 } from "@/components/vibeui/button-003"

<Button003 onClick={startTrial}>Начать бесплатно</Button003>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- подъём, увеличение и разрастание тени на наведении — вместе они и дают эффект притяжения, по отдельности не работают
- блик через ::after с translateX и длинным easing — не заменять на opacity-мигание
- градиент из двух переменных accent и accent-2, а не плоскую заливку
- радиус 9999px и крупные метрики: это герой-CTA, а не рядовая кнопка
- cubic-bezier(0.16,1,0.3,1) у переходов — на линейном easing притяжение читается как дёрганье
- правило prefers-reduced-motion, которое гасит и transform, и блик

## 6. You may change
- подпись кнопки
- обработчик onClick
- акцентные цвета — пропы accent и accentForeground
- внешние отступы через className

## 7. Rules
- Не добавляй motion-библиотеки: вся анимация уже на CSS.
- Не ставь эту кнопку в плотный ряд управления — она рассчитана на одну главную CTA на экране.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

Для разработчика

Команда установки недоступна: переменная окруженияREGISTRY_BASE_URLне задана.

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-003-*. Эффект целиком на CSS: ни JS, ни отслеживания курсора, поэтому компонент остаётся серверным. Градиент собирается из двух переменных accent и accent-2.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Button003Props = ComponentPropsWithoutRef<"button"> & {
  accent?: string
  accentForeground?: string
}

// Идея компонента: крупная CTA, которая «притягивает» курсор — на наведении
// она приподнимается, свечение под ней разрастается, а по поверхности
// проходит блик. Эффект целиком на CSS: ни JS, ни отслеживания курсора,
// поэтому компонент остаётся серверным и ничего не тянет в бандл.
const STYLES = `
:where([data-vibeui-block="button-003"]){
--vibeui-button-003-accent:oklch(0.68 0.19 32);
--vibeui-button-003-accent-2:oklch(0.6 0.21 12);
--vibeui-button-003-fg:oklch(0.99 0.004 32);
--vibeui-button-003-glow:color-mix(in oklab, var(--vibeui-button-003-accent) 55%, transparent);
--vibeui-button-003-ring:color-mix(in oklab, var(--vibeui-button-003-accent) 75%, transparent);
--vibeui-button-003-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-003"]{
position:relative;isolation:isolate;overflow:hidden;appearance:none;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:0.5em;
height:3.25rem;padding:0 2rem;border:0;border-radius:9999px;
font-family:var(--vibeui-button-003-font);font-size:1rem;font-weight:600;line-height:1;
letter-spacing:-0.01em;color:var(--vibeui-button-003-fg);
background:linear-gradient(135deg,var(--vibeui-button-003-accent),var(--vibeui-button-003-accent-2));
box-shadow:0 6px 18px -8px var(--vibeui-button-003-glow);
transition:transform .28s cubic-bezier(0.16,1,0.3,1),box-shadow .28s cubic-bezier(0.16,1,0.3,1);
}
[data-vibeui-block="button-003"]::after{
content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
background:linear-gradient(100deg,transparent 35%,oklch(1 0 0 / 34%) 50%,transparent 65%);
transform:translateX(-120%);transition:transform .65s cubic-bezier(0.16,1,0.3,1);
}
[data-vibeui-block="button-003"]:hover:not(:disabled){transform:translateY(-2px) scale(1.02);box-shadow:0 16px 38px -12px var(--vibeui-button-003-glow)}
[data-vibeui-block="button-003"]:hover:not(:disabled)::after{transform:translateX(120%)}
[data-vibeui-block="button-003"]:active:not(:disabled){transform:translateY(0) scale(0.99)}
[data-vibeui-block="button-003"]:focus-visible{outline:2px solid var(--vibeui-button-003-ring);outline-offset:3px}
[data-vibeui-block="button-003"]:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}
[data-vibeui-block="button-003"] svg{width:1em;height:1em;transition:transform .28s cubic-bezier(0.16,1,0.3,1)}
[data-vibeui-block="button-003"]:hover:not(:disabled) svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-003"],[data-vibeui-block="button-003"]::after,[data-vibeui-block="button-003"] svg{animation:none!important;transition:none!important;transform:none!important}}
`

/**
 * Крупная CTA с эффектом притяжения: подъём, разрастающееся свечение и блик
 * по поверхности. Один файл, ноль зависимостей, собственная палитра.
 */
export function Button003({
  accent,
  accentForeground,
  type = "button",
  className,
  style,
  children = "Начать бесплатно",
  ...props
}: Button003Props) {
  const palette = {
    ...(accent ? { "--vibeui-button-003-accent": accent } : null),
    ...(accentForeground
      ? { "--vibeui-button-003-fg": accentForeground }
      : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-button-003" precedence="medium">
        {STYLES}
      </style>
      <button
        {...props}
        type={type}
        data-vibeui-block="button-003"
        className={className}
        style={palette}
      >
        {children}
        <svg viewBox="0 0 14 12" fill="none" aria-hidden="true">
          <path
            d="M1 6h11M8 2l4 4-4 4"
            stroke="currentColor"
            strokeWidth="1.75"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </button>
    </>
  )
}