TextHighlight

Animated background, underline, or text‑gradient highlights applied to key phrases within a block of text. Uses pure CSS for smooth performance and works well with hero copy, headings, and benefit statements.

Use Cases

• Hero taglines that need emphasis on a phrase, e.g., “Celebrate our love”.
• Section headings where a few words should stand out, e.g., “Why choose us?”.
• Call‑to‑action phrases such as “Get started today”.
• Key benefit statements like “Save 50% off”.
• Wedding invitations, for example “You’re invited to our wedding”.
• Event announcements, e.g., “Save the date: June 15th”.

Properties

text

Text with highlighted phrases marked as **phrase**. Example: ‘Join us for the **celebration of a lifetime**!’. Type: string. Required.

highlightType

Type of highlight effect. Type: string. Required. Options: background-gradient, underline, text-gradient. Default: background-gradient. Visual Impact:

• background-gradient – Bold, celebratory – animated gradient background (weddings, events)
• underline – Subtle, professional – animated underline (business, SaaS)
• text-gradient – Modern, creative – animated color gradient on text (portfolios, design)

• weddings – background-gradient with soft pastels
• business – underline with brand colors
• creative – text-gradient with vibrant colors

highlightColor

Primary highlight color (hex, rgb, or CSS color name). Type: string. Required. Default: #fbbf24.

secondaryColor

Secondary color for gradient effects (optional). Creates smooth color transition. Type: string. Not required.

animationSpeed

Animation speed. Type: string. Options: slow, medium, fast. Default: medium. Visual Impact:

• slow – 1.2s – elegant, deliberate (weddings, luxury)
• medium – 0.8s – balanced (most use cases)
• fast – 0.5s – energetic (celebrations, sales)

shape

Highlight shape (for background-gradient type). Type: string. Options: pill, straight. Default: pill. Recommendations:

• friendly – pill (rounded, soft)
• professional – straight (sharp, clean)

Best Practices

• Highlight 1‑3 key phrases maximum per section (overuse dilutes impact).
• Use slow animations (0.8‑1.2 s); faster feels janky and unprofessional.
• Use **text** syntax to mark highlighted phrases in the text property.
• highlightType='background-gradient' for bold, celebratory emphasis (weddings, events).
• highlightType='underline' for subtle, professional emphasis (SaaS, business).
• highlightType='text-gradient' for modern, creative emphasis (portfolios, design).
• Use shape='pill' for friendly, soft aesthetic (weddings, consumer).
• Use shape='straight' for professional, sharp aesthetic (business, SaaS).
• Choose colors that match the brand palette.
• Good for: Hero taglines, section headings, key benefits, CTAs.
• Avoid: Body paragraph text (too distracting), navigation, forms.
• Wedding use: Invitation text, date announcements, couple names, key phrases.

Common Mistakes

Highlighting too many phrases (5+ per section)

Why it's a problem: Overuse dilutes impact and looks cluttered.

Fix: Highlight 1‑3 key phrases maximum per section.

Using fast speed (0.5s) for professional/wedding contexts

Why it's a problem: Fast animations feel cheap and rushed.

Fix: Use medium (0.8s) or slow (1.2s) for a polished feel.

Using background-gradient for SaaS/business apps

Why it's a problem: Background highlights are bold and celebratory – too casual for business.

Fix: Use highlightType='underline' for professional contexts.

Highlighting entire sentences

Why it's a problem: Long highlights lose focus and look messy.

Fix: Highlight 1‑3 words maximum (‘**our love**’, ‘**today**’, ‘**50% off**’).