Hightlight text — Framer Components

Live Preview

This React component called HighlightedText creates a highlighted text block with interactive and customizable features. Here's a summarized version of what it does:

1. Component Properties:

   • text: The text to be displayed and highlighted.

   • fontSize: Font size of the text.

   • fontColor: Text color.

   • backgroundColor: Background color of the text block.

   • highlightColor: Highlight color when scrolling through the text.

   • highlightDuration: Duration of the highlight in milliseconds.

   • fontFamily: Font type of the text.

   • lineGap: Vertical space between lines.

   • wordGap: Horizontal space between words.

   • emoji: Emoji to be displayed in a tooltip when clicking on a word.

2. Component State:

   • highlightIndex: Index of the word currently highlighted while scrolling through the text.

   • tooltipVisible: State controlling the visibility of the tooltip when clicking on a word.

3. Events and Features:

   • The text is split into words.

   • A scroll listener is added to calculate the index of the highlighted word based on the scroll position.

   • Clicking on a word triggers a tooltip showing an emoji for a specific duration.

   • The component is rendered with each word in a flexible container that adjusts its style based on the current settings and state.

4. Property Configuration in Framer:

   • Property controls are defined to adjust the component properties in the Framer design environment.

   • Properties are visually configurable in Framer using specific controls such as text fields, color pickers, and sliders.