VibeUI
РусEng
Войти

Рукописный

Рукописный первый экран

Первый экран от руки: дисплейный рукописный заголовок с обведённым словом, две нарисованные кнопки и фото, приклеенное к листу скотчем под наклоном. Контуры дорисовываются при появлении, слова заголовка дописываются по одному.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • все тексты — title, titleAccent, eyebrow, lede, подписи кнопок — ссылки и фото
  • accent и ink — цвет линий и текста
  • rough и boil — размашистость и живость линии, tone — светлая или тёмная схема

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Рукописный первый экран — Первый экран от руки: дисплейный рукописный заголовок с обведённым словом, две нарисованные кнопки и фото, приклеенное к листу скотчем под наклоном. Контуры дорисовываются при появлении, слова заголовка дописываются по одному.

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

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

добавь это на главную первым экраном:

https://vibeui.ru/c/sketch-016?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

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

Загружается…

Как использовать

<Sketch016
  eyebrow="Портретный фотограф · Петербург"
  title="Снимаю людей,"
  titleAccent="а не позы"
  lede="Час разговора, немного прогулки — и на карточках вы настоящие."
  primaryLabel="Записаться"
  primaryHref="#book"
  secondaryLabel="Смотреть работы"
  secondaryHref="#works"
  image="/photos/hero.webp"
  imageCaption="Нева, май, плёнка"
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Тема
tone · по умолчанию: auto
Заголовок
title · по умолчанию: Снимаю людей,
Обведённое
titleAccent · по умолчанию: а не позы
Почерк
rough · по умолчанию: loose
Дрожание
boil · по умолчанию: soft
Линия
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы

Используется в сценариях

Ещё в разделе «Рукописный»

Частые вопросы

Как установить компонент «Рукописный первый экран» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Рукописный первый экран»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Рукописный первый экран»?
Можно менять: все тексты — title, titleAccent, eyebrow, lede, подписи кнопок — ссылки и фото; accent и ink — цвет линий и текста; rough и boil — размашистость и живость линии, tone — светлая или тёмная схема. Сохранить как есть: дорисовку контуров при появлении и дрожание boil после — это и есть «рукописность», без них блок становится обычным хиро; обводку titleAccent эллипсом и наклон фото с тенью и скотчем — узнаваемые детали листа; дисплейный Caveat в заголовке и кнопках, Neucha в тексте: шрифты грузятся самим блоком.
Компонент «Рукописный первый экран» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/sketch-016.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Один файл, ноль зависимостей, «use client». Раскладка от собственной ширины (container query): до 52rem колонка, дальше текст слева и фото справа. Заголовок разбит на слова, каждое въезжает с задержкой --n×70ms; titleAccent обводится эллипсом в полтора оборота, измеренным по коробке span. Кнопки и фото — Framed: хост измеряется ResizeObserver, по коробке рисуется контур rectPoints тремя кадрами boil; первичная кнопка залита (fill), фото с нарисованной тенью и полоской «скотча». Дорисовка: path с pathLength=1 и stroke-dashoffset 1→0, задержка своя у каждого слоя; после — обычный boil через @property --frame и step-end. Шрифты Neucha и Caveat через <link precedence>. Палитра --vibeui-sketch-016-* с light-dark, tone фиксирует схему, reduced-motion выключает всё.

Теги

  • sketch
  • hand-drawn
  • handwritten
  • doodle
  • rough
  • boil
  • hero
  • header
  • photo
  • portfolio
Исходник компонента

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

Загружается…