"use client" import { useRef, useState } from "react" import { TextHighlighter, TextHighlighterRef, } from "@/components/fancy/text/text-highlighter" import { Transition } from "motion" export default function TextHighlighterDemo() { const containerRef = useRef(null) const highlighterRefs = useRef([]) const [isHighlighted, setIsHighlighted] = useState(false) const transition = { type: "spring", duration: 1, delay: 0, bounce: 0 } const highlightClass = "rounded-[0.3em] px-px" const highlightColor = "#F7F764" const handleHighlight = () => { highlighterRefs.current.forEach((ref) => { ref.animate() }) setIsHighlighted(true) } const handleReset = () => { highlighterRefs.current.forEach((ref) => { ref.reset() }) setIsHighlighted(false) } return (

The present-day designer has a host of printing types at his disposal. Since{" "} { if (el) highlighterRefs.current.push(el) }} triggerType="ref" className={highlightClass} transition={transition as Transition} highlightColor={highlightColor} > Gutenberg {" "} first invented movable type in 1436-55 hundreds of different types have been designed and cast in lead. The{" "} { if (el) highlighterRefs.current.push(el) }} triggerType="ref" className={highlightClass} transition={transition as Transition} highlightColor={highlightColor} > 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{" "} { if (el) highlighterRefs.current.push(el) }} triggerType="ref" className={highlightClass} transition={transition as Transition} highlightColor={highlightColor} > 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{" "} { if (el) highlighterRefs.current.push(el) }} triggerType="ref" className={highlightClass} transition={transition as Transition} highlightColor={highlightColor} > 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{" "} { if (el) highlighterRefs.current.push(el) }} triggerType="ref" className={highlightClass} transition={transition as Transition} highlightColor={highlightColor} > 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.

{ if (el) highlighterRefs.current.push(el) }} triggerType="ref" className={highlightClass} transition={transition as Transition} highlightColor={highlightColor} > 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{" "} { if (el) highlighterRefs.current.push(el) }} triggerType="ref" className={highlightClass} transition={transition as Transition} highlightColor={highlightColor} > 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{" "} { if (el) highlighterRefs.current.push(el) }} triggerType="ref" className={highlightClass} transition={transition as Transition} highlightColor={highlightColor} > 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.

) }

Text Highlighter Ref Demo

Instalação

Dependências

Registry dependencies