Writing caret

Typography

A quiet writing mark with a short, deliberate blink sequence.

React · copy into your project · light and dark themes

Try it

A thoughtful beginning

A still writing mark

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/writing-caret.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes button. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/writing-caret.json

Using writing caret

Place WritingCaret inline after display text. It is decorative; editable inputs retain their native browser caret.
Set active to begin a finite sequence. blinkCount defaults to three and is bounded to six; duration is milliseconds per cycle and total animation is capped at six seconds.
Change replayKey to replay. opacity (or style.opacity) takes precedence over blinking; style controls size, colour and corner radius.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

WritingCaretProps

Prop	Type	Required
`active`	`boolean`	No
`blinkCount` At most six cycles; zero leaves a still mark.	`number`	No
`duration` Milliseconds per cycle. Total motion is bounded to six seconds.	`number`	No
`replayKey`	`string \| number`	No
`opacity` An explicit opacity disables blinking.	`number`	No

Accessibility

The mark is hidden from assistive technology and ignores pointer input.
Reduced motion, shared quiet settings and hidden documents stop blinking. Offscreen marks do not run.

States and appearance

stillblinkingreplayedreduced-motion

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.