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 for hero copy, headings, and benefit statements.

Use Cases

• Hero taglines that need a highlighted phrase, e.g., “Celebrate our love”.
• Section headings with emphasis, e.g., “Why choose us?”.
• Call‑to‑action phrases such as “Get started today”.
• Key benefit statements like “Save 50% off”.
• Wedding invitations, e.g., “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. Options: background-gradient, underline, text-gradient. Default: background-gradient. Required.

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).

Recommendations: 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. Default: #fbbf24. Required.

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.2 s, elegant and deliberate (weddings, luxury); medium – 0.8 s, balanced for most use cases; fast – 0.5 s, energetic for celebrations or 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.
• Choose highlightType='background-gradient' for bold, celebratory emphasis (weddings, events).
• Choose highlightType='underline' for subtle, professional emphasis (SaaS, business).
• Choose highlightType='text-gradient' for modern, creative emphasis (portfolios, design).
• Use shape='pill' for a friendly, soft aesthetic (weddings, consumer).
• Use shape='straight' for a professional, sharp aesthetic (business, SaaS).
• Select 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 (e.g., “our love”, “today”, “50% off”).