Shimmer Text Heading

Heroes

About

Text in one colour that catches the light: every few seconds a soft glint runs across it. Plain coloured text at rest and with reduced motion; italic overhang is not clipped. From the Midnight Lite template (MIT).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shimmer Text Heading to your project and fits it to your theme.

Code

How Shimmer Text Heading is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { GlintText } from "@/components/ui/glint-text"

const settings = {
  lead: "Ship the page",
  accent: "this afternoon.",
  background: "#f6f5f1",
  text: "#16171b",
  color: "#16171b",
  glint: "#c3c6ce",
  duration: 6,
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div className="flex min-h-svh w-full items-center justify-center px-6" style={{ background: s.background }}>
      <h1
        className="text-center text-[clamp(44px,8vw,104px)] leading-[0.98] font-semibold tracking-[-0.045em] text-balance"
        style={{ color: s.text, fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif" }}
      >
        {s.lead}
        <br />
        <GlintText color={s.color} glint={s.glint} duration={s.duration} delay={0.4}>
          {s.accent}
        </GlintText>
      </h1>
    </div>
  )
}