About SpaceClaim
What it is
SpaceClaim is a polished, accessible call-to-action that invites visitors to claim a personal URL on your product (e.g., yourdomain.com/alex). It rotates demo usernames until a user types, builds the final URL, and navigates on click or Enter. Every visual—from colors to radii to padding - is adjustable from the properties panel.
Use-cases
Early-access signup: Let visitors reserve a unique handle (e.g., /alex) to join a beta or waitlist—clean CTA with instant feedback.
Community/workspace onboarding: Prompt new members to create a profile or team space URL before entering your app.
Creator or brand pages: Give creators a simple way to claim a public page (e.g., /studio-42) for portfolios, shops, or hubs.
Event registration microsites: Allow attendees to pick a memorable event URL (e.g., /mia-2025) for schedules, tickets, or recaps.
Referral/campaign landing pages: Pair with UTM capture so users pick a handle and you track source + conversion in one step.
Key features
Rotating demo usernames (with smooth y-slide + fade) until the user types
URL composition: https://{domain}/{username} (adds protocol if omitted)
Submit by button click or Enter; optional “Open in new tab”
Fully styleable input & button (fill, border, text, radius, padding, font sizes/colors)
Auto / Row / Column layout with a “stack at width” breakpoint
One global font-family string (default: Sora, system-ui, sans-serif)
Lightweight, no external dependencies beyond Framer motion
How to use (quick start)
Drop the component onto your canvas.
In the properties panel, set your Domain (e.g., app.example.com).
Add a few Demo usernames (e.g., alex, john, team-acme).
Choose Layout: Auto (with Stack ≤ width), Row, or Column.
Customize Input and Button visuals to match your brand.
Preview: type a handle or press Enter / click the button to navigate to https:// [domain] / [username].
Tips & notes
If you pass yourdomain.com without a protocol, the component automatically uses https://.
Use hyphen-friendly demos (e.g., john-smith) so users mimic the right format.
To align with your site fonts, set Font family to your project’s stack, e.g. Inter, system-ui, sans-serif.
For compact UIs, pick Layout → Column and tighten pad X/Y and radius.
Support
Add an email step after the handle to capture leads (single or double confirmation).
Save sign-ups to a spreadsheet or database via your preferred automation tool.
Live handle checks: format validation plus optional availability check against your API.
Webhook/automation events on submit to send data to your CRM or analytics.
Personalized success flow with confirmation screen or redirect.
Analytics tracking for view, focus, validation, and submit events.
Prefill from URL parameters (e.g., ?name=olivia) and capture campaign tags.
Submission guards: hidden-field check, basic rate limiting, debounce.
Reserved-name filter and content screening with custom error messages.
Localization support (including RTL) with externalized strings.
Design polish: micro-interactions, focus states, and accessible color contrast.
Accessibility review: ARIA labels, keyboard nav, visible focus rings.