Todos os componentes

Shine Text

Shine Text é um componente de efeito para React e Tailwind CSS, da biblioteca SmoothUI, com licença MIT. Copia e cola no teu projeto.

SmoothUI MIT effects

O que é

Shine Text é um componente de efeito para React e Tailwind CSS, da biblioteca SmoothUI, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Precisa de

npm i motion

Licença

Este componente vem de SmoothUI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Shine Text

index.tsx
"use client";

import { motion, useReducedMotion } from "motion/react";

export interface ShineTextProps {
  /** Base text color (any CSS color). */
  baseColor?: string;
  children: string;
  className?: string;
  /** Duration of one sweep, in seconds. */
  duration?: number;
  /** Pause between sweeps, in seconds. */
  repeatDelay?: number;
  /** Color of the sweeping highlight band. */
  shineColor?: string;
}

/**
 * ShineText — a literal light sweep that glides across the text on a loop,
 * using a clipped moving gradient (metallic "shine" / shimmer). For the
 * catalog's fade+slide reveal see `shimmer-sweep`.
 */
export default function ShineText({
  children,
  className = "",
  duration = 2.5,
  repeatDelay = 0.6,
  baseColor = "var(--color-muted-foreground)",
  shineColor = "var(--color-foreground)",
}: ShineTextProps) {
  const shouldReduceMotion = useReducedMotion();

  if (shouldReduceMotion) {
    return (
      <span className={className} style={{ color: baseColor }}>
        {children}
      </span>
    );
  }

  return (
    <motion.span
      animate={{ backgroundPositionX: ["150%", "-150%"] }}
      className={className}
      style={{
        backgroundClip: "text",
        backgroundImage: `linear-gradient(110deg, ${baseColor} 40%, ${shineColor} 50%, ${baseColor} 60%)`,
        backgroundSize: "250% 100%",
        color: "transparent",
        WebkitBackgroundClip: "text",
        WebkitTextFillColor: "transparent",
      }}
      transition={{
        duration,
        ease: "linear",
        repeat: Number.POSITIVE_INFINITY,
        repeatDelay,
      }}
    >
      {children}
    </motion.span>
  );
}

Componentes parecidos