Trivision Type

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.

About this component

Type set on a trivision board: the statement is cut into vertical slats that are real 3D triangular prisms, and every few seconds they turn one after another in a wave to show the next statement, each printed on its own surface (paper, ink or accent). Faces darken as they turn away, and hairline seams drawn in difference sit over the slat joints, so every seam reads the same on paper, ink and accent. Pauses on hover and offscreen; with reduced motion the statement changes in place.

Usage

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

import { Text22 } from "@/components/beste/component/text22";

<Text22
  as="h1"
  faces={[
    { text: "Seen from across the street.", tone: "paper" },  // "paper" | "ink" | "accent"
    { text: "Read by someone in a hurry.", tone: "ink" },  // similar lengths wrap alike
    { text: "Remembered for years after.", tone: "accent" },
  ]}
  className="text-8xl font-semibold tracking-[-0.045em]"
/>

<Text22
  faces={[{ text: "Open late." }, { text: "Closed never.", tone: "ink" }]}
  slats={12}        // fewer, wider slats
  interval={4}      // seconds each statement holds
  stagger={0.06}    // a slower wave across the board
  seams={false}
/>

Props

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

Prop	Type	Default	Description
`faces`*	`TrivisionFace[]`	—	Statements the board turns through, in order
`as`	`"h1" \| "h2" \| "h3" \| "p" \| "div"`	—	Element the board renders as; screen readers read every statement
`slats`	`number`	—	Number of turning slats across the board
`interval`	`number`	—	Seconds each statement holds before the board turns
`turn`	`number`	—	Seconds one slat takes to turn
`stagger`	`number`	—	Seconds between neighboring slats starting to turn
`shading`	`number`	—	Darkening of faces as they turn away, 0 to 1
`seams`	`boolean`	—	Hairline seams between slats, drawn in difference so they read on every surface
`pauseOnHover`	`boolean`	—	Hold the current statement while the pointer is over the board
`paused`	`boolean`	—	Stop turning
`className`	`string`	—	Font and size of the statements
`faceClassName`	`string`	—	Padding inside each face, as Tailwind classes

More Text components

View all Text

Trivision Type

Usage

Props

More Text components

It only makes sense from here.It only makes sense from here.

See through everything.

It only makes sense from here.