Perspective Highlight

A card that tilts toward your cursor while its highlighted phrases lift off the page.

Three nested wrappers, each with one job. Strip any of them out and the whole illusion collapses back into a flat rectangle on a page.

The whole effect rides on CSS's perspective property. 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.

The card tilts toward wherever your cursor goes. 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.

Syed Mohammad Ammar

Three nested wrappers, each with one job: the outer one sets up the 3D space with perspective, the middle one preserves it, and only the innermost card rotates. The tilt follows the cursor at full strength over the card and fades out over the next two card-widths, so it responds before you arrive.

Every frame the rotation eases toward its target and is written to CSS variables, along with a lift value for how far the card has turned. The highlights read that value: they translate one way and throw a hard, coloured shadow the other, which the eye reads as the marks rising off the page.

When the card has settled, the loop stops until the mouse moves again, so a still page isn't repainting every frame.