mportant: Signatures Are Stored Locally SignWall uses the browser's localStorage to save signatures, which means each visitor only sees their own signature — not signatures left by other visitors. This makes it ideal as a personal guestbook experience, a "leave your mark" moment, or a fun interactive element where users can sign and revisit their own entry. If you need a shared, multi-user wall where all visitors see each other's signatures, you would need a backend/database integration that is not included in this component.The component is built with Per-Project Isolation, meaning signatures are stored in the user's local storage and tied specifically to your site's hostname and path. This ensures that different pages on your site can host unique "SignWalls" without data overlapping.
Key Features
Handwritten Canvas: Smooth, pressure-responsive drawing engine with auto-cropping technology.
DPR-Aware: High-definition rendering that looks crisp on Retina and 4K displays.
Full Font Control: Five separate font inputs (Title, Subtitle, Card, Button, and UI) to meet strict marketplace requirements.
Project Isolation: Key-derived persistence based on window.location to keep signatures unique to each subpage.
Adaptive UI: Features a floating "Let Me Sign" pill button and a blur-background modal for a modern aesthetic.
Signature Cards: Submitted signatures appear as physical "cards" with randomized slight rotations for an organic, human feel.
How to Use
Placement: Drag the SignWall component onto any Framer frame. Set its width to "Fill" for the best grid experience.
Styling: Use the Property Controls to adjust the Dot Grid color, the Pen size (thickness), and the Accent color for buttons and focus states.
Typography: Assign your project's specific fonts to the titleFont, subtitleFont, and cardFont categories to ensure brand consistency.
Content: Customize the Modal Title (e.g., "Sign the Guestbook") and the Placeholder text for names and notes.
Publish: Once published, users can click the floating button, draw their name, add an optional note, and see their signature join the wall instantly. Their signature will reappear each time they return to the same page — but only for them, in their own browser.
