Интерфейс
Шнур-выключатель темы
Шнур с ручкой у края экрана: тянешь вниз и отпускаешь — свет переключается, шнур отпружинивает и качается затухающим маятником.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- target — что переключается: класс dark на документе или только сам блок
- sound — щелчок выключателя, его можно выключить
- darkLabel и lightLabel — подписи подсказки и aria-label ручки
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/button-anim-001?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<ButtonAnim001 target="document" />Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Цвет ручки
gripColor· по умолчанию: цвет темы
Ещё в разделе «Интерфейс»
Частые вопросы
- Как установить компонент «Шнур-выключатель темы» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Шнур-выключатель темы»?
- Никаких npm-пакетов, кроме React и Tailwind CSS.
- Что можно поменять в компоненте «Шнур-выключатель темы»?
- Можно менять: target — что переключается: класс dark на документе или только сам блок; sound — щелчок выключателя, его можно выключить; darkLabel и lightLabel — подписи подсказки и aria-label ручки. Сохранить как есть: локальную палитру --vibeui-button-anim-001-* — не подменяйте её токенами вашей темы; пороги срабатывания: сорок пикселей вниз, пятьдесят по диагонали или рывок быстрее 180 пикселей в секунду — иначе шнур переключает свет от случайного касания; пружины возврата и точку вращения у крепления: без них ручка возвращается по прямой и перестаёт быть шнуром.
- Компонент «Шнур-выключатель темы» бесплатный?
- Превью открыто всем, исходник доступен по подписке PRO.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/button-anim-001.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных --vibeui-button-anim-001-*. Тему берёт из окружения через light-dark() плюс строку для класса .dark. Шнур — SVG-линия с пунктиром, ручка — отдельный узел с точкой вращения у крепления; наклон считается как арктангенс горизонтального смещения к длине шнура, поэтому ручка всегда висит по натянутой нити. Тянется указателем через pointer-события с захватом, за упорами ход остаётся, но вчетверо мягче. Отпускание переключает тему, если ручку увели ниже сорока пикселей, дальше пятидесяти по диагонали или дёрнули быстрее 180 пикселей в секунду. Возврат — пружина, посчитанная в requestAnimationFrame (жёсткость 440, затухание 11, масса 0.75 по вертикали; 280, 8, 0.85 по горизонтали); щелчок мышью проигрывает ту же пружину и добавляет затухающее качание по ключевым кадрам. Звук щелчка синтезируется двумя осцилляторами WebAudio, без файлов. При prefers-reduced-motion шнур не анимируется: нажатие сразу переключает тему.
Теги
- theme
- switch
- toggle
- pull
- drag
- spring
- dark-mode
- animated
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…