Components
Loading preview...
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.
@smammar100
npx shadcn@latest add https://21st.dev/r/smammar100/perspective-highlightimport { 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>
);
}