Docs
Text
Text Highlighter

Text Highlighter

An animated text highlighting component with multiple trigger modes and directional animations.

Typeface alphabets

The present-day designer has a host of printing types at his disposal. Since Gutenberg first invented movable type in 1436-55 hundreds of different types have been designed and cast in lead. The most recent technical developments with computer and photo-typesetting have once again brought new faces or variations of old ones on the market.

The choice is up to the designer It is left to his feeling for form to use good or poor typefaces for his design work. In view of the limited space available, we shall refer here to only a few of the outstanding designs of the past and the 20th century which have appeared most frequently in publications.

Knowledge of the quality of a typeface is of the greatest importance for the functional, aesthetic and psychological effect of printed matter. Again, the typographic design, i. e. the correct spaces between letters and words and the length and spacing of lines conducive to easy reading, does much to enhance the impression created. Today the field is dominated mainly by computer and photo-typesetting A typical characteristic of these forms of composition is the too narrow setting of the letters which makes reading difficult. The designer will be well advised to demand the normal spacing between letters when ordering photo-typesetting.

By studying the classic designs of Garamond, Casion, Bodoni, Walbaum and others, the designer can learn what the timeless criteria are which produce a refined and artistic typeface that makes for ease of reading.

The lead type designs of Berthold, Helvetica, Folio, Univers etc. produce pleasant and easily legible type areas. The typographic rules that apply to the roman typefaces are also valid for the sans serifs.

The creators of these type designs were extremely intelligent artists with high creative powers. This is shown by the fact that for more than four centuries innumerable type designers have sought to create new type alphabets but very few of these have gained acceptance. An alphabet of Garamond for example, is an artistic achievement of the first order. Each letter has its own unmistakable face, whether lower or upper case, and displays the highest quality of form and originality. Each letter has its own personality and makes a marked impact.

Every designer who is concerned with typography should take the trouble when creating graphic designs to sketch words and sentences by hand Many designers take advantage of the Letraset process, which can undoubtedly produce a clean draft design that is almost ready for press. But a feeling for good letter forms and an attractive typeface can be acquired only by constant and careful practice in sketching letters.

How the forms of letters can create simultaneously both tension and nobility and how pleasantly legible lines of type can appear to the eye of the reader may be seen from the examples on the following pages.

The Renaissance created midline typography which held its position until the 20th century.

The new typography differs from the old in that it is the first to try to develop the outward appearance from the function of the text

The new typography uses the background as an element of design which is on a par with the other elements.

Earlier typography (midline typography) played an active role against a dead, passive background.

Installation


1pnpm dlx shadcn@latest add "https://fancycomponents.dev/r/text-highlighter.json"

Usage


Just wrap your text content with the component and set the highlight color with the highlightColor prop.

Usage example

1<TextHighlighter highlightColor="hsl(25, 90%, 80%)">Howdy!</TextHighlighter>

Understanding the component


The magic behind this component lies in animating the text's background. Instead of using a solid background color (CSS prop: background-color), we use background-image with a linear gradient. This allows us to animate the entire background of the text by changing the background-size property; something that wouldn't be possible with the simple background-color property. We also use a linear gradient because we can't set a solid color directly as a background image (as far as I know).

Highlighter style

1const highlightStyle = {
2 backgroundImage: `linear-gradient(${highlightColor}, ${highlightColor})`,
3 backgroundRepeat: "no-repeat",
4 backgroundPosition: backgroundPosition,
5 backgroundSize: animatedSize,
6 boxDecorationBreak: "clone",
7 WebkitBoxDecorationBreak: "clone",
8} as React.CSSProperties

We also use box-decoration-break: clone to make sure each individual line is properly highlighted when dealing with multi-line text. Check out this demo why this is important.

The direction of the highlight reveal is controlled by the direction prop. Depending on the value, we set the background-position and background-size accordingly. There is two function which returns the appropriate values:

Get animation values by direction

1// Get background size based on direction
2const getBackgroundSize = (animated: boolean) => {
3 switch (currentDirection) {
4 case "ltr":
5 return animated ? "100% 100%" : "0% 100%"
6 case "rtl":
7 return animated ? "100% 100%" : "0% 100%"
8 case "ttb":
9 return animated ? "100% 100%" : "100% 0%"
10 case "btt":
11 return animated ? "100% 100%" : "100% 0%"
12 default:
13 return animated ? "100% 100%" : "0% 100%"
14 }
15}
16
17// Get background position based on direction
18const getBackgroundPosition = () => {
19 switch (currentDirection) {
20 case "ltr":
21 return "0% 0%"
22 case "rtl":
23 return "100% 0%"
24 case "ttb":
25 return "0% 0%"
26 case "btt":
27 return "0% 100%"
28 default:
29 return "0% 0%"
30 }
31}

Then, we just use motion to animate the background-size property based on the shouldAnimate state:

Animation

1<motion.span
2 className={cn("inline", className)}
3 style={highlightStyle}
4 animate={{
5 backgroundSize: animatedSize,
6 }}
7 initial={{
8 backgroundSize: initialSize,
9 }}
10 transition={transition}
11>
12 {children}
13</motion.span>

You can customize the transition by passing a Transition object to the transition prop. The default value is spring type animation { type: "spring", duration: 1, delay: 0., bounce: 0 }.

By default, the animation will be triggered once the component is mounted. Another interesting trigger option is inView, which will trigger the animation when the component enters the viewport (demonstrated in the demo above). You can customize that behaviour by setting the useInViewOptions prop. For more information, check out the useInView documentation.

Different directions

You can control the highlight animation direction via the direction prop. The available options are:

  • "ltr" - Left to right animation
  • "rtl" - Right to left animation
  • "ttb" - Top to bottom animation
  • "btt" - Bottom to top animation

The following demo shows how to dynamically change the reveal direction based on the user's scroll direction. Scroll left and right to see the animations trigger.

01

Our object detection systems identify and locate items in real-time. From facial recognition to product identification, we deliver precision at scale.

Whether it's traffic monitoring for smart cities or inventory management for retail, our AI distinguishes between people, vehicles, and objects with unmatched accuracy.

Advanced video analytics track movement across frames. Our object tracking algorithms power autonomous vehicles and security systems worldwide.

Scene understanding capabilities analyze spatial relationships and context. From sports performance analysis to surveillance systems, we make sense of complex visual data.

Our OCR technology converts printed and handwritten text to digital format instantly. Document automation streamlines workflows across industries.

From invoice processing to accessibility solutions, our text recognition supports multiple languages and formats with exceptional accuracy.

3D depth perception enables precise spatial understanding. Our stereo vision systems power robotic automation and quality control processes.

Advanced augmented reality and virtual reality applications rely on our depth analysis for immersive, interactive experiences.

Image segmentation separates objects with pixel-perfect precision. Our enhancement algorithms restore clarity and remove noise from any visual content.

Generate synthetic training data and create high-resolution imagery for machine learning models and creative applications.

Transform your industry with computer vision that sees, understands, and acts on visual information like never before.

Hover

You can also trigger the highlight animation via hover, if you set the triggerType prop to "hover":

hover me - left to righthover me - right to lefthover me - top to bottomhover me - bottom to top

Control via ref

You can also trigger the animation via an exposed ref. This is useful if you want to trigger the animation programmatically:

The present-day designer has a host of printing types at his disposal. Since Gutenberg first invented movable type in 1436-55 hundreds of different types have been designed and cast in lead. The most recent technical developments with computer and photo-typesetting have once again brought new faces or variations of old ones on the market.

Knowledge of the quality of a typeface is of the greatest importance for the functional, aesthetic and psychological effect of printed matter. Again, the typographic design, i.e. the correct spaces between letters and words and the length and spacing of lines conducive to easy reading, does much to enhance the impression created.

By studying the classic designs of Garamond, Caslon, Bodoni, Walbaum and others, the designer can learn what the timeless criteria are which produce a refined and artistic typeface that makes for ease of reading.

The lead type designs of Berthold, Helvetica, Folio, Univers etc. produce pleasant and easily legible type areas. The typographic rules that apply to the roman typefaces are also valid for the sans serifs.

The creators of these type designs were extremely intelligent artists with high creative powers. This is shown by the fact that for more than four centuries innumerable type designers have sought to create new type alphabets but very few of these have gained acceptance. An alphabet of Garamond for example, is an artistic achievement of the first order.

Every designer who is concerned with typography should take the trouble when creating graphic designs to sketch words and sentences by hand. Many designers take advantage of the Letraset process, which can undoubtedly produce a clean draft design that is almost ready for press.

Notes


  • While the component only support a single-colored highlight directly, you can change it to an image, a fancy gradient, or anything that a background-image can handle. Just change the appropriate line:

Fancier highlight color

1backgroundImage: `linear-gradient(${highlightColor}, ${highlightColor})`, // change this to make it fancier
  • As many users have pointed out, excessive animations can be distracting and impact readability, especially when highlighting large blocks of text. Consider using animations sparingly and adjusting the transition duration and delay to create a more subtle effect. You may also want to use the useInViewOptions prop to control when animations trigger, for example by increasing the amount threshold or setting once: true to only animate elements once.

Props


TextHighlighterProps

PropTypeDefaultDescription
children*React.ReactNode-The text content to be highlighted
asElementType"span"HTML element to render as
triggerType"auto" | "hover" | "ref" | "inView""inView"How to trigger the animation
transitionTransition{ type: "spring", duration: 1, delay: 0, bounce: 0 }Animation transition configuration
useInViewOptionsUseInViewOptions{ once: true, initial: false, amount: 0.5 }Options for useInView hook when triggerType is "inView"
classNamestring-Class name for the container element
highlightColorstring"hsl(25, 90%, 80%)"Highlight color (CSS color string)
direction"ltr" | "rtl" | "ttb" | "btt""ltr"Direction of the highlight animation

TextHighlighterRef

MethodDescription
animate(direction?: HighlightDirection)Trigger the highlight animation with optional direction override
reset()Reset the highlight animation to its initial state