# Holographic text

> Foil that shifts color as you move across it.

- Type: Component (light)
- Page: https://textlab.dev/components/holo-text
- Markdown: https://textlab.dev/components/holo-text.md
- Registry item: https://textlab.dev/r/holo-text.json
- Source file: `registry/textlab/holo-text/holo-text.tsx`
- Dependencies: none
- Variants: holo, foil, chrome
- Keywords: holographic, foil, iridescent, chrome, metallic, premium

## When to use

- Collectibles, drops and premium tiers.
- Large display words people will hover or drag across.

## When not to use

- Small text; the pattern breaks the letterforms.
- Text that needs high, steady contrast.

## Installation

### CLI

```bash
npx shadcn@latest add @textlab/holo-text
pnpm dlx shadcn@latest add @textlab/holo-text
```

The `@textlab` name needs `"registries": { "@textlab": "https://textlab.dev/r/{name}.json" }` in `components.json`. Without it, use the full URL:

```bash
npx shadcn@latest add https://textlab.dev/r/holo-text.json
```

Import the tokens once in your root layout: `import "@/components/textlab/tokens.css";`

### Manual

1. Install the dependencies: `npm install motion@12`
2. Copy `text-fx` (https://textlab.dev/r/text-fx.json) and this component into `components/textlab/`.

## Usage

```tsx
import { HoloText } from "@/components/textlab/holo-text/holo-text";

export function Example() {
  return <HoloText as="h1" text="Limited edition" variant="foil" />;
}
```

## API reference

### HoloText

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` (required) | `string` | – | The copy. |
| `variant` | `"holo" \| "foil" \| "chrome"` | `"holo"` | Rainbow hologram, warm iridescent leaf, or a cool metallic sweep. |
| `intensity` | `number` | `0.7` | How far colors travel with the pointer, 0 to 1. |
| `as` | `ElementType` | `"span"` | Rendered element. |
| `reducedMotion` | `"user" \| "always" \| "never"` | `"user"` | user follows the OS setting; always shows the still version. |
| `className` | `string` | – | Merged onto the root. |

## Accessibility

- Plain, unsplit text.
- Without a pointer it rests on a pleasant still frame.

## Motion

- The pattern follows the pointer with damping, like light on a tilted card.
- The sheen brightens while the pointer is over the text.

## Reduced motion

A still foil frame with no pointer tracking.

## Performance

- Pointer position is written to CSS variables once per frame, only while it is settling.

## Notes for AI

- Use only the props documented above. Do not invent props.
- Keep the screen-reader text and the reduced-motion branch when editing the source.
- Pick a variant from: holo, foil, chrome.

## Related

- [Aurora text](https://textlab.dev/components/aurora-text.md): Northern lights drift inside the letters.
- [Spotlight text](https://textlab.dev/components/spotlight-text.md): A light follows the cursor and reveals the copy.
- [Glass text](https://textlab.dev/components/glass-text.md): Glass letters that bend the scene behind them.

## Also in light

- [Gradient text](https://textlab.dev/components/gradient-text.md): Color flows slowly through the letters.
- [Shimmer text](https://textlab.dev/components/shimmer-text.md): A calm light passes across the words.
- [Neon sign](https://textlab.dev/components/neon-text.md): A neon sign that hums and flickers on.
- [Ember text](https://textlab.dev/components/ember-text.md): Letters land hot and cool down to the text color.

## Source

### components/textlab/holo-text/holo-text.tsx

```tsx
"use client";

import { useRef, type CSSProperties, type ElementType } from "react";
import { usePointerVars } from "../lib/use-pointer-vars";
import { useReduced, type ReducedMotion } from "../lib/use-reduced";

export type HoloTextVariant = "foil" | "holo" | "chrome";

export interface HoloTextProps {
  text: string;
  /** foil is warm iridescent leaf, holo is a full rainbow hologram, chrome is a cool metallic sweep. */
  variant?: HoloTextVariant;
  /** How strongly the colors travel with the pointer, 0 to 1. */
  intensity?: number;
  as?: ElementType;
  reducedMotion?: ReducedMotion;
  className?: string;
  style?: CSSProperties;
}

const LAYERS: Record<HoloTextVariant, string> = {
  foil: "repeating-linear-gradient(115deg, oklch(0.86 0.1 80) 0%, oklch(0.8 0.13 30) 8%, oklch(0.84 0.1 330) 16%, oklch(0.88 0.09 200) 24%, oklch(0.86 0.1 80) 32%)",
  holo: "repeating-linear-gradient(110deg, oklch(0.8 0.18 20) 0%, oklch(0.88 0.16 90) 7%, oklch(0.84 0.17 150) 14%, oklch(0.78 0.15 230) 21%, oklch(0.74 0.2 300) 28%, oklch(0.8 0.18 20) 35%)",
  chrome: "linear-gradient(180deg, oklch(0.98 0 0) 0%, oklch(0.72 0.01 250) 38%, oklch(0.32 0.02 250) 50%, oklch(0.8 0.01 250) 62%, oklch(0.96 0 0) 100%)",
};

/**
 * Foil that shifts color as you move across it. The pattern slides with the pointer and a soft
 * sheen follows it, the way light catches a holographic card.
 */
export function HoloText({ text, variant = "holo", intensity = 0.7, as: Tag = "span", reducedMotion = "user", className, style }: HoloTextProps) {
  const ref = useRef<HTMLElement | null>(null);
  const reduced = useReduced(reducedMotion);
  usePointerVars(ref, { enabled: !reduced, rate: 8 });
  const travel = `${intensity * 120}%`;
  const sheen = `radial-gradient(circle at calc(var(--tl-px, 0.5) * 100%) calc(var(--tl-py, 0.5) * 100%), oklch(1 0 0 / calc(0.15 + var(--tl-in, 0) * 0.55)), transparent 45%)`;

  return (
    <Tag
      ref={ref}
      className={className}
      style={{
        backgroundImage: `${sheen}, ${LAYERS[variant]}`,
        backgroundSize: variant === "chrome" ? "100% 100%, 100% 160%" : "100% 100%, 300% 300%",
        backgroundPosition:
          variant === "chrome"
            ? `0 0, 0 calc(var(--tl-py, 0.5) * ${travel})`
            : `0 0, calc(var(--tl-px, 0.5) * ${travel}) calc(var(--tl-py, 0.5) * ${travel})`,
        backgroundClip: "text",
        WebkitBackgroundClip: "text",
        WebkitTextFillColor: "transparent",
        filter: "drop-shadow(0 0.02em 0 color-mix(in oklab, currentColor 25%, transparent))",
        ...style,
      }}
    >
      {text}
    </Tag>
  );
}

export default HoloText;
```

Full library index: https://textlab.dev/llms.txt