Blinking Cursor

A GSAP-animated blinking cursor rendered as a thin inline span, with imperative controls exposed via ref.

BlinkingCursor renders a styled <span> that blinks continuously using a GSAP timeline. It accepts a forwarded ref so parent components can call stopBlinking(), startBlinking(), and resetCursor() imperatively — useful when pairing it with typewriter or streaming-text effects.

Installation

npx shadcn@latest add @adv/blinking-cursor

Usage

import { BlinkingCursor } from '@/components/BlinkingCursor';

<span className="inline-flex items-center">
  Hello world
  <BlinkingCursor />
</span>

Example

Hello world

Props

Prop	Type	Default	Description
`className`	`string`	`"inline-block bg-foreground ml-1 h-7 -mb-1 rounded-sm"`	CSS classes for the cursor span.
`width`	`number`	`2`	Width of the cursor in pixels.
`height`	`number`	`28`	Height of the cursor in pixels.
`blinkSpeed`	`number`	`0.5`	Duration (in seconds) of each fade half-cycle.
`blinkEase`	`string`	`"power2.inOut"`	GSAP ease applied to each blink step.
`isVisible`	`boolean`	`true`	Whether the cursor is visible and animating.
`onBlinkStart`	`() => void`	—	Callback fired when blinking begins.
`onBlinkStop`	`() => void`	—	Callback fired when blinking stops.

Imperative ref methods

When you attach a ref to BlinkingCursor, the DOM node is extended with three methods:

Method	Description
`stopBlinking()`	Gradually fades and desaturates the cursor to signal completion.
`startBlinking()`	Resets any fade state and restarts the blink loop.
`resetCursor()`	Kills all animations and restores the cursor to full opacity.