Animated Signature brings organic, handwritten realism to your Framer projects. Utilizing SVG mask reveals and synchronized stroke animations, it smoothly reveals custom text as if it were being written live with ink, complete with an optional flourish underline. Perfect for hero sections, personal portfolios, agency landing pages, and author sign-offs.
Realistic SVG Ink Reveal: Masks signature text horizontally to simulate a natural pen-to-paper writing reveal.
Synchronized Underline Flourish: Features an optional curved ink stroke (motion.path) that draws dynamically right after the signature completes.
Interactive Replay: Users can click or tap non-looping signatures (or press Enter/Space) to trigger the writing animation on demand.
Dynamic Web Font Measurement: Automatically measures rendered DOM bounding boxes (getBBox) and re-calculates width when custom web fonts finish loading to prevent clipping.
SSR & Canvas Safety: Employs useIsStaticRenderer checks to ensure seamless static preview rendering in the Framer Canvas and server-side rendering environments without layout glitches.
Accessible Design: Native support for custom aria-label tags, keyboard navigation (tabIndex), and screen reader image role labeling.
All signature properties can be tweaked straight from Framer's Property Panel:
Signature Text: Enter custom names, cursive titles, or signatures.
Typography: Complete font control (family, weight, style, and size) with dedicated letter-spacing adjustments.
Ink Styling: Customize ink color and toggle the organic underline flourish on or off with adjustable stroke line widths.
Made with 💛 by @Karim Saif
Animated Signature brings organic, handwritten realism to your Framer projects. Utilizing SVG mask reveals and synchronized stroke animations, it smoothly reveals custom text as if it were being written live with ink, complete with an optional flourish underline. Perfect for hero sections, personal portfolios, agency landing pages, and author sign-offs.
Realistic SVG Ink Reveal: Masks signature text horizontally to simulate a natural pen-to-paper writing reveal.
Synchronized Underline Flourish: Features an optional curved ink stroke (motion.path) that draws dynamically right after the signature completes.
Interactive Replay: Users can click or tap non-looping signatures (or press Enter/Space) to trigger the writing animation on demand.
Dynamic Web Font Measurement: Automatically measures rendered DOM bounding boxes (getBBox) and re-calculates width when custom web fonts finish loading to prevent clipping.
SSR & Canvas Safety: Employs useIsStaticRenderer checks to ensure seamless static preview rendering in the Framer Canvas and server-side rendering environments without layout glitches.
Accessible Design: Native support for custom aria-label tags, keyboard navigation (tabIndex), and screen reader image role labeling.
All signature properties can be tweaked straight from Framer's Property Panel:
Signature Text: Enter custom names, cursive titles, or signatures.
Typography: Complete font control (family, weight, style, and size) with dedicated letter-spacing adjustments.
Ink Styling: Customize ink color and toggle the organic underline flourish on or off with adjustable stroke line widths.
Made with 💛 by @Karim Saif
