cursor blink terminal typing caret animation Typing-Effekte in Hero-Sections Terminal-UIs und Code-Demos Placeholder-Animationen in Formularen Statische Texteingabefelder wirken unbelebt Authentischer Cursor-Effekt ohne JS
Cursor Blink
Fetch snippet JSON:
curl https://webspire.de/snippets/text/cursor-blink.json Preview
Background
Customize
Quick Start
<span class="cursor-blink">Typing something</span>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 676 bytes · 38 lines
- Custom Properties
-
--cursor-color--cursor-width--cursor-height--cursor-speed - Classes
-
.cursor-blink
cursor blink terminal typing caret animation
Nutzt step-start Easing für den harten 50%-Schnitt — kein Fade, authentisches Cursor-Feeling. Platziert den Cursor über ::after hinter dem Text. Farbe, Breite, Höhe und Geschwindigkeit via Custom Properties.