All components

Font Weight Text

Font Weight Text is a React and Tailwind CSS text component from Eldora UI, licensed MIT. Copy it and paste it into your project.

Eldora UI MIT text

What it is

Font Weight Text is a React and Tailwind CSS text component from Eldora UI, licensed MIT. Copy it and paste it into your project.

How to use it

Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.

Open in the catalogue

Five free copies a month. No card.

Needs

npm i react

Licence

This component comes from Eldora UI and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.

Font Weight Text

registry/eldoraui/font-weight-text.tsx
"use client"

import { useEffect, useRef } from "react"

import { cn } from "@/lib/utils"

interface FontWeightTextProps {
  text: string
  className?: string
  fontSize?: number
  minWeight?: number
  maxWeight?: number
  animationDuration?: number
  delayMultiplier?: number
}

export function FontWeightText({
  text,
  className = "",
  fontSize = 150,
  minWeight = 0,
  maxWeight = 840,
  animationDuration = 1.5,
  delayMultiplier = 0.25,
}: FontWeightTextProps) {
  const containerRef = useRef<HTMLParagraphElement>(null)

  useEffect(() => {
    if (!containerRef.current) return

    const spans = containerRef.current.querySelectorAll("span")
    const numLetters = spans.length

    spans.forEach((span, i) => {
      const mappedIndex = i - numLetters / 2
      span.style.animationDelay = mappedIndex * delayMultiplier + "s"
    })
  }, [text, delayMultiplier])

  const characters = text.split("").map((char, index) => (
    <span
      key={index}
      aria-hidden="true"
      style={{
        animation: `breath ${animationDuration}s alternate cubic-bezier(0.37, 0, 0.63, 1) infinite`,
        animationFillMode: "both",
        fontVariationSettings: `"wght" ${minWeight}`,
      }}
    >
      {char}
    </span>
  ))

  return (
    <div className="flex items-center justify-center">
      <p
        className={cn("m-0 font-sans", className)}
        ref={containerRef}
        aria-label={text}
        style={{
          fontSize: `${fontSize}px`,
          fontFeatureSettings: '"wght"',
        }}
      >
        {characters}
        <style jsx>{`
          @keyframes breath {
            0% {
              font-variation-settings: "wght" ${minWeight};
            }
            100% {
              font-variation-settings: "wght" ${maxWeight};
            }
          }
        `}</style>
      </p>
    </div>
  )
}

Similar components