Component

VanishingPoint

Move the point directly across a small viewfinder, or use its arrow keys. The notice stays in the same place but its actual 3D tilt follows the chosen camera, creating a precise perspective for content that was already flat.

Possible use

It could let a reviewer angle a handoff note toward the part of a room where a conversation happened, or let a presenter make an agenda line lean toward a speaker. Neither use improves the copy’s legibility.

Reasonable alternative

A reasonable local alternative is normal flat flow with one deliberate emphasis style. A pointer-controlled camera is an expensive way to apply a small transform.

01 / Preview

Try it yourself.

Park this note in the ordinary plane

Mechanism

1: Drag the crosshair around the viewfinder.
2: The card stays put while its actual 3D tilt follows the camera.
3: Use arrow keys or return the imaginary point to center.

02 / Usage

Put it somewhere.

example.tsxTSX

import { VanishingPoint } from "gra-ui";
import "gra-ui/styles.css";

export function PerspectiveNotice() {
  return <VanishingPoint><span>Park this note in the ordinary plane</span></VanishingPoint>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe notice whose perspective responds to the directly manipulated point.