MorphHeadline
Description
The MorphHeadline component is a versatile and engaging text display element that animates between multiple text variants. It's designed to create eye-catching headlines that smoothly transition between different phrases, maintaining common text elements while changing others. This component is ideal for landing pages, hero sections, or any area where you want to draw attention to multiple related messages.
Installation
bash
sabaccui add morphHeadline
Usage
Here are examples of how to use the MorphHeadline component in a Storyblok block:
Second part is morphing and not repeating
Preview
SabaccUI DeliversSeamless Integration with Nuxt
First part is morphing and repeating
Preview
Transform Your Web Projectswith SabaccUI
Complete change of text
Preview
Code Less, Create More
Schema
| Field | Type | Description | Default |
|---|---|---|---|
text | textarea | The text content for the headline. Each line represents a different variant that will be morphed. | - |
level | option | The HTML heading level (h1, h2, h3, h4). | h2 |
size | option | The text size class (9xl, 7xl, 5xl, 3xl, xl, lg, sm). | - |
color | option | The text color (primary, secondary, dark, light, white, black). | - |
weight | option | The font weight (bold, semibold, light). | - |
interval | number | The time interval (in milliseconds) between text transitions. | 1000 |
repeatDelay | number | The delay (in milliseconds) before repeating the animation cycle. | - |
Related Components
None specified.
Notes
- The component uses Vue 3's Composition API with
<script setup>for improved performance and maintainability. - Text transitions are handled using Vue's built-in
<transition-group>component for smooth animations. - The component automatically detects common substrings across variants to keep them static during transitions.
- Tailwind CSS classes are used for styling, making it easy to customize the appearance.
Best Practices:
- Keep the number of text variants (lines in the
textfield) reasonable to ensure smooth performance. - Use concise phrases that share common words or structure for the best morphing effect.
- Adjust the
intervalandrepeatDelayto find the right balance between readability and engagement. - Consider the context where the MorphHeadline will be used and choose appropriate size and color options to match your design.
- Test the component at different screen sizes to ensure readability across devices.