Highlighted Text

A text component with a sliding background highlight animation. It uses motion and mix-blend-mode for visual effect. Use when adding animated text highlights to a design.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/highlighted-text

npx layro-cli add @xxtomm/highlighted-text

npx layro-cli add @xxtomm/highlighted-text

bunx layro-cli add @xxtomm/highlighted-text

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { motion } from "motion/react";
import { cn } from "@/lib/utils";

type From = "left" | "right" | "top" | "bottom";

interface HighlightedTextProps {
  children: React.ReactNode;
  className?: string;
  from?: From;
  delay?: number;
  inView?: boolean;
  once?: boolean;