Centered Light Handwritten Arrow Scribble CTA Block for React

The arrow is an inline SVG made of two strokes, and a CSS clip-path reveals it from tail to head over one second, half a second after the page loads. It plays once and the finished arrow stays. With reduced motion on, the arrow is simply there, and the text no longer fades up. There is no script and no animation library.

The arrow sits above the frame and spans its width, so its head lands on the first button whatever the labels are. To aim elsewhere, edit the two d paths: the head is the last point of each. The "Start here!" note is placed from the end edge, so it stays beside the tail on right-to-left pages, where the whole drawing mirrors with the buttons.

Yes. The arrow and the note are decoration, hidden from assistive technology, and they never carry information the text doesn't. Everything a visitor needs is in the headline, the sentence and the two buttons, which read in that order. The note's colour is the theme's muted text colour at full strength, so it also passes contrast.

Below the sm breakpoint the arrow and the note are hidden, because a drawing that long would crowd a small screen, and the frame moves up under the copy. The buttons wrap and centre as before, so the call to action is unchanged. Nothing has a fixed width, so it reads at 320 pixels.

It uses your theme's serif font in italic, which gives a handwritten feel without a font file. If your theme has no serif font, the browser's own serif is used. To use a script font, add its family to the note's font-serif class.

Both are links with href="#" placeholders. Point Open workspace at your app and Take a tour at your walkthrough. Each button renders the link it's given with render, with nativeButton={false}.