Typewriter

Печатная машинка: текст набирается посимвольно с мигающей кареткой — чистый CSS (steps).

cssloadrevealbasic~1 КБreduced-motion ✓

Пропсы

Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.

Проп	Тип	По умолчанию	Что это
text?	string	"Motiva — premium animations"

Установка

npx shadcn@latest add https://motiva.pages.dev/r/typewriter.json

Что нужно в проекте до установки

components.json в корне — с алиасами в форме"components": "@/components". Нет файла — CLI не поймёт, куда класть.
Алиас @ объявлен дважды: "paths": {"@/*": ["./src/*"]} в корневом tsconfig.json (в Vite он часто содержит только references — тогда CLI создаёт папку@) и resolve.alias в конфиге сборщика.
Токены подключены один раз на приложение:import "@/styles/motiva-tokens.css" — они приезжают вместе с записью. Без них секция потеряет цвета, ритм и тему.
Своя типографика не должна спорить: если у вас на обёрткеtext-align: center, он протечёт внутрь блоков.
Проект без TypeScript? Всё равно нужен минимальныйtsconfig.json с pathsи "tsx": true в components.json: CLI грузит tsconfig безусловно, а с "tsx": false идёт за jsconfig.json и падает так же. Приехавший рядом.tsx можно не трогать — вам нужен.vanilla.js.

Экспорт

↓ Скачать .zip

Код

.tw {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 1.6rem;
  font-weight: 600;
  color: oklch(0.92 0.01 265);
}

.tw-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  /* базовая ширина = полный текст → при data-shot/no-anim текст виден целиком */
  width: calc(var(--n, 27) * 1ch);
  border-right: 2px solid oklch(0.72 0.15 220);
  animation:
    tw-type 2.4s steps(28) both,
    tw-blink 0.75s step-end infinite;
}

@keyframes tw-type {
  from {
    width: 0;
  }
}
@keyframes tw-blink {
  50% {
    border-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tw-text {
    animation: none;
  }
}

import { type CSSProperties } from "react";
import "./typewriter.css";

/** Эффект печатной машинки на чистом CSS (steps() + мигающий каретка). Ширина = длина текста. */
export function Typewriter({ text = "Motiva — premium animations" }: { text?: string }) {
  return (
    <span className="tw">
      <span className="tw-text" style={{ "--n": text.length } as CSSProperties}>
        {text}
      </span>
    </span>
  );
}

Typewriter

Пропсы

Установка

Экспорт

Код

Похожие эффекты