Кнопка
Шнур-выключатель темы
Шнур с ручкой у края экрана: тянешь вниз и отпускаешь — свет переключается, шнур отпружинивает и качается затухающим маятником.
Что можно поменять
- target — что переключается: класс dark на документе или только сам блок
- sound — щелчок выключателя, его можно выключить
- darkLabel и lightLabel — подписи подсказки и aria-label ручки
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/button-anim-001?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных --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
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…