Anamorphic Type

About this component

A statement cut into thousands of fragments traced from its own font and scattered in depth, so it only reads from one exact viewpoint. The camera slowly orbits and most of the time the fragments drift as an abstract constellation, then every few seconds it eases into the true angle, the words snap into focus, hold and fall apart again. The cursor steers the camera; its center is the true viewpoint. Density, depth, orbit, timing, fragment shape and colors are props. The real text stays in the page, the fragment count adapts to the device, it pauses offscreen and shows the resolved words for reduced motion.

Usage

The import and the props worth knowing about, in one place.

import { AnamorphicType } from "@/components/beste/component/anamorphic-type";

<AnamorphicType
  as="h1"
  text="It only makes sense from here."
  className="text-8xl font-semibold tracking-[-0.045em]"
/>

<AnamorphicType
  text="Stand where we stood."
  depth={0.8}                   // deeper scatter, more abstract off-axis
  orbit={0.3}                   // the camera strays less
  interval={4}                  // seconds between resolves
  hold={3}                      // seconds the words stay in focus
  fragment="dashes"             // "dots" (default) | "dashes"
  accentColor="var(--primary)"  // any CSS color, tokens included
  accent={0.15}                 // share of accent fragments
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`text`*	`string`	—	The statement; it only reads from one exact viewpoint
`as`	`"h1" \| "h2" \| "h3" \| "p" \| "div"`	—	Element the text renders as; screen readers always get the plain text
`density`	`number`	—	How finely the letters are cut into fragments, 0 (coarse) to 1 (fine)
`depth`	`number`	—	How deep the fragments are scattered, 0 (shallow) to 1 (deep)
`orbit`	`number`	—	How far the camera wanders away from the true viewpoint, 0 to 1
`interval`	`number`	—	Seconds between the moments the words snap into focus
`hold`	`number`	—	Seconds the words hold in focus
`fragment`	`"dots" \| "dashes"`	—	Shape of each fragment
`color`	`string`	—	Color of the fragments. "currentColor" follows the text color; any CSS color or token works
`accentColor`	`string`	—	Color of the accent fragments
`accent`	`number`	—	Share of fragments drawn in the accent color, 0 to 1
`interactive`	`boolean`	—	The cursor steers the camera; the center of the text is the true viewpoint
`paused`	`boolean`	—	Hold the camera where it is
`className`	`string`	—

More Text components

View all Text

A clear glass perfume bottle and two small jars casting amber shadows on warm paper

Every letter, loose.

Seen from across the street. Read by someone in a hurry. Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.