REFERENCE
- Gallery page: https://magpui.com/en/i/hand-drawn-circle-around-a-title-96ad89
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hand-drawn-circle-around-a-title-96ad89/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hand-drawn-circle-around-a-title-96ad89/clip.mp4
- Original post: https://21st.dev/@kokonutd/components/hand-writing-text by Kokonut UI
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A centered heading with a subtitle, and a single loose ellipse drawn by hand around it. On load (or when in view) the stroke draws itself from the top right going counter-clockwise and overshoots a little where it ends, while the heading fades from grey to black.
DESIGN SYSTEM
- White background with a faint dot grid; heading 40px medium, subtitle 12px #888.
- Stroke: 3px black, round caps, an irregular ellipse path wider than the text (about 1.4x), slightly tilted.
MOTION
- Stroke draws with stroke-dashoffset from length to 0 over 1.6s, cubic-bezier(0.65, 0, 0.35, 1).
- Heading color #BDBDBD to #111 over the first 800ms; subtitle fades in after 600ms.
- Replays when the element re-enters the viewport (optional).
SECTIONS
- Heading, subtitle, SVG stroke.
- States: hidden, drawing, done.
IMPLEMENTATION
- Inline SVG path with pathLength=1 and CSS or Motion pathLength animation; the SVG is absolutely positioned and scales with the text box.
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders.
SUCCESS CHECK
- The circle draws in one continuous stroke around the text.
- It stays around the text at every screen size.
- Reduced motion shows the finished circle.
