Perspective Highlight

Cards 194

About

A 3D card that tilts toward your cursor. As it rotates, highlighted text rises forward, creating a layered depth effect. Includes three color variants for highlights, full dark mode support, and respects prefers-reduced-motion.

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

Code

How Perspective Highlight is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Perspective, Highlight } from "@/components/ui/perspective-highlight";

export default function DemoOne() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background">
      <Perspective>
        <article className="text-[15px] leading-[1.75] text-muted-foreground">
          <p className="mb-[1.1em]">
            <Highlight color="red">Three nested wrappers</Highlight>, each with
            one job. Strip any of them out and the whole illusion collapses
            back into a flat rectangle on a page.
          </p>
          <p className="mb-[1.1em]">
            <Highlight color="purple">
              The whole effect rides on CSS's perspective property.
            </Highlight>{" "}
            The outer wrapper defines the 3D space, the middle one preserves
            it, and only the inner card actually rotates. Three transforms
            standing on each other's shoulders.
          </p>
          <p>
            <Highlight color="green">
              The card tilts toward wherever your cursor goes.
            </Highlight>{" "}
            Move closer and it leans in; pull away and it settles flat. As it
            turns, the highlights drift forward — a translate going one
            direction and a shadow going the other, fooling your eye into
            reading depth.
          </p>
          <p
            className="mt-[10px] text-[20 px] text-foreground"
            style={{ fontFamily: "cursive" }}
          >
            Syed Mohammad Ammar
          </p>
        </article>
      </Perspective>
    </div>
  );
}