Caption Edit

Caption Edit is a post card whose caption gets edited as the visitor scrolls past it. The draft is struck through a piece at a time, new words type in behind a caret, and the clean caption is left at the end, with a count of what was cut and a result line. It suits social media managers, copywriters and agencies who want to show the work rather than describe it.

How it works

- Write the caption with [-text to cut-] and {+new text+}. Everything else stays as it is.

- The edit follows the scroll, forwards and backwards.

- The word and hashtag counts work themselves out from what you wrote.

Controls

- Handle, time note, avatar and photo

- Caption and result line

- Labels for draft, editing and done, and for the two counts

- Colours for the card, text, strike, new words, caret and done state

- Font family and corner radius

Setup

Paste the link onto your canvas and give it a width. Its height follows. Leave some page above and below it, because the edit runs while the card rises through the window.

Good to know

- Without a photo it shows a plain tone.

- With reduced motion on, it shows the clean caption.

- No extra packages. It uses only React and Framer.