KR Logotype Builder
A powerful, customizable logotype component for Framer.
Made with Workshop
Build your own component with AI
A powerful, customizable logotype component for Framer.
Made with Workshop
Build your own component with AI
Enhance your brand identity with KR Logotype Builder, a powerful, customizable logotype component for Framer. Designed to create professional logotypes with Material Icons and text combinations, this component is perfect for any project. Build unique and visually appealing logotypes effortlessly.
1. Drag & Drop -> 2. Customize -> 3. Ship
-----------------------
- Optimized for performance and usability.
- Follows Framer's best practices for component design and functionality.
- Includes comprehensive documentation and comments for easy understanding and modification by other developers.
- Ideal for any project requiring a professional logotype. Get started quickly with a ready-to-use Framer component. Drag & drop into Framer, customize via the Properties Panel—no code required! Add your logo text and publish.
- Experience the ease of use and quality of KR Logotype Builder, designed to require minimal iterations and provide maximum functionality.
-----------------------
- Flexible Layouts: Choose from horizontal (icon left or right) or vertical orientations.
- Icon & Text Combinations: Use Material Icons with customizable text.
- Gradient Support: Apply gradients to both icons and text with angle control.
- Shadow Controls: Add depth with customizable shadows for icons and text.
- Multiple Animations: Choose from various animation presets for icons and text.
- Full Accessibility Support: Ensure your logotype is accessible to all users.
- Responsive Sizing: Works flawlessly on all devices.
-----------------------
### Layout & Structure
- Orientation: Choose how icons and text are arranged (horizontal-left, horizontal-right, vertical).
- Gap: Adjust spacing between icon and text elements.
### Icon Configuration
- Show Icon: Toggle icon visibility.
- Material Icon: Select from a wide range of Material Icons.
- Icon Size: Adjust the size of the icon.
- Icon Color: Customize the icon color.
- Icon Gradient: Apply a gradient fill to the icon with customizable start and end colors and angle.
- Icon Shadow: Add a shadow to the icon for depth and readability.
- Icon Animation: Animate the icon with various effects (scale, rotate, bounce, pulse, swing).
### Text Configuration
- Logo Text: Set the text content of your logotype.
- Text Font: Customize font family, size, weight, and other text properties.
- Text Color: Set the text color.
- Text Gradient: Apply a gradient fill to the text with customizable start and end colors and angle.
- Text Shadow: Add a shadow to the text for depth and readability.
- Text Stagger: Animate each character of the text with a stagger effect.
### Subtitle Configuration
- Show Subtitle: Toggle subtitle visibility.
- Subtitle Text: Set the subtitle text.
- Subtitle Font: Customize font family, size, weight, and other subtitle properties.
- Subtitle Color: Set the subtitle color.
- Subtitle Gradient: Apply a gradient fill to the subtitle with customizable start and end colors and angle.
- Subtitle Shadow: Add a shadow to the subtitle for depth and readability.
- Subtitle Stagger: Animate each character of the subtitle with a stagger effect.
### Link Configuration
- Enable Link: Make the entire logotype clickable as a link.
- Link URL: Set the destination URL when the logotype is clicked.
- Link Target: Choose where to open the link (New Tab or Same Tab).
### Hover Effects
- Enable Hover: Add hover effects when the mouse is over the logotype.
- Hover Scale: Adjust the scale multiplier on hover.
- Hover Opacity: Set the opacity on hover.
### Opening Animation
- Enable Opening Animation: Play an entrance animation when the logotype first appears in the viewport.
- Animation Type: Choose the style of entrance animation (fade, slide-up, slide-down, slide-left, slide-right, scale, scale-up, scale-down, bounce, pop).
- Animation Duration: Set how long the animation takes to complete.
- Animation Delay: Set the wait time before the animation starts.
### Accessibility
- ARIA Label: Custom accessible label for screen readers.
- ARIA Described By: ID of an element that provides additional description for screen readers.
- ARIA Role: Custom ARIA role.
-----------------------
- Minimal, high-quality code adhering to best industry practices and standards.
- Verbose comments in the code for easy re-usability by other developers.
- Error checking and correction mechanisms for robustness.
- Logical code organization to avoid overcomplexity and potential future issues.
- Utilizes Framer's native features and capabilities for compatibility and ease of use.
-----------------------
- Ready-to-use Framer component.
- Sample logotype for quick setup.
- Remix link
-----------------------
v1.0
- Initial release
