Curved Arc Input for Framer reimagines conventional form inputs into striking, curved UI elements. Built on clean mathematical geometry, the component dynamically maps input text, icons, and action triggers along a customizable vector path with configurable arch bending. Designed for high-performing web applications, it offers full feature parity with standard form elements—including auto or manual validation, real-time overflow handling, passive static renderer safety, and native accessible focus states.
Dynamic Curved Geometry: Smoothly transitions between flat layouts and pronounced arch curves ($archBend$) using procedural SVG path generation.
SVG Text-on-Path Rendering: Renders real-time text input directly along vector curves, complete with automatic text length calculations and sliding viewport alignment.
All properties are exposed directly within the Framer property panel:
Geometry & Layout: Fine-tune component width, bar height, arch bend radius, inset spacing, and internal padding.
Typography & Fonts: Complete control over font families, weights, font styles, text sizes, and letter spacing for input and button text.
Color Palette & Themes: Configure individual background, border, focus state, text, placeholder, icon, and multi-state button colors.
Validation & Messaging: Toggle automatic vs. manual validation, set validation trigger points (submit, blur, change), and customize error strings for each input rule.
Actions & Routing: Set custom button actions (submit callback, external link, or internal redirect), destination URLs, tracking IDs, and tab targets.
Shadows & Elevation: Choose from built-in elevation presets (none, low, medium, high) with customizable drop-shadow colors.
Have questions, need custom features, or want to share feedback? Reach out anytime at karimsaif010@gmail.com or on X @Karim Saif
Curved Arc Input for Framer reimagines conventional form inputs into striking, curved UI elements. Built on clean mathematical geometry, the component dynamically maps input text, icons, and action triggers along a customizable vector path with configurable arch bending. Designed for high-performing web applications, it offers full feature parity with standard form elements—including auto or manual validation, real-time overflow handling, passive static renderer safety, and native accessible focus states.
Dynamic Curved Geometry: Smoothly transitions between flat layouts and pronounced arch curves ($archBend$) using procedural SVG path generation.
SVG Text-on-Path Rendering: Renders real-time text input directly along vector curves, complete with automatic text length calculations and sliding viewport alignment.
All properties are exposed directly within the Framer property panel:
Geometry & Layout: Fine-tune component width, bar height, arch bend radius, inset spacing, and internal padding.
Typography & Fonts: Complete control over font families, weights, font styles, text sizes, and letter spacing for input and button text.
Color Palette & Themes: Configure individual background, border, focus state, text, placeholder, icon, and multi-state button colors.
Validation & Messaging: Toggle automatic vs. manual validation, set validation trigger points (submit, blur, change), and customize error strings for each input rule.
Actions & Routing: Set custom button actions (submit callback, external link, or internal redirect), destination URLs, tracking IDs, and tab targets.
Shadows & Elevation: Choose from built-in elevation presets (none, low, medium, high) with customizable drop-shadow colors.
Have questions, need custom features, or want to share feedback? Reach out anytime at karimsaif010@gmail.com or on X @Karim Saif
