Framer component · $8
Ink Marks
Hand-drawn circles, underlines and highlighter strokes for the words that matter. Put the words in [brackets], and a pen draws the marks when the text comes into view.
Each mark is drawn when the text comes into view. Reload the page to see it again.
Five marks
Put the words in [brackets]. Pick one mark for all of them, or give a word its own: [word|underline].
Book a call today.
Circle
Goes around the word once or a few times, like a quick pen.
Launch it this week.
Underline
A quick line under the words, a little uneven.
No setup fees.
Double underline
Two strokes, the second a little shorter.
Save two hours a day.
Highlighter
A marker stroke behind the words. Pick its color.
$49 $29 a month.
Strike-through
Cross out the old price or the old way.
Fast, calm and yours.
Your colors
Pick the ink and word colors, and mix marks in one line.
Details
Drawn like a pen
The line gets thicker and thinner and tapers at the ends. Change Seed for a different drawing.
Stays on the words
When a marked phrase wraps onto the next line, each line gets its own mark, at every screen width.
Real text
The text stays text: search engines and screen readers read it, and visitors can select it. The marks are decoration only.
Drawn in turn
Marks are drawn one after another when the text comes into view, or after the page loads.
Your font and tag
Any font, size and color. H1, H2, H3 or paragraph.
Reduced motion
On the canvas and for visitors who turn off motion, the marks are already drawn.
Settings
Text
Your text, with the words to mark in [brackets]. [word|underline] gives one word its own mark.
Tag / Font / Align
H1, H2, H3 or paragraph, any font, left, center or right.
Text color / Marked words
The text color, and an optional color for the marked words.
Mark
Circle, underline, double underline, highlighter or strike-through.
Ink / Highlighter
The pen color, and the highlighter color.
Line weight / Circle loops
How thick the line is (1 suits the font size), and how many times the circle goes round.
Roughness / Seed
How loose the hand is, and a number for a different drawing.
Draw on / Start / Once
Draw the marks, or show them already drawn. In view or after load. Once, or every time the text comes into view.
Delay / Duration / Between marks
When the pen starts, how long a circle takes, and the pause between marks.
How to use it
01
Buy it, then open the component link from your receipt.
02
Paste it on any page of your Framer project (⌘V).
03
Change the settings in the right panel. Preview to see it move.
From the same maker
Framer templates by H SHIFT WORKS
CIRCLED
Booking site for portrait and wedding photographers.
View template →
AGENDA
Conference site with schedule, speakers and venue.
View template →
OFFSET
Studio site for an independent digital agency.
View template →
TRUSS
Site for renovation and design-build companies.
View template →
GAZE
Dark, photo-led portfolio for one visual artist.
View template →
© 2026 H SHIFT WORKS. Framer templates, plugins and components.
framer.com/@hshiftworks
X: @hshiftworks