1

Dia TextNew

Diagonal clip-path reveal for bold display typography. Text sweeps into view with an angled edge as the component enters the viewport, creating a striking editorial entrance effect.

Dependencies

motion

Interaction Type

Scroll-triggered — text reveals via an animated diagonal clip-path polygon when the component enters the viewport. Direction and angle are configurable. Respects prefers-reduced-motion by showing text immediately.

Props

Options you can pass to customize this component.

Prop
Type
Description
children*
string

The text string to reveal with a diagonal clip-path sweep.

direction
'left' | 'right'

Direction of the diagonal sweep. "left" sweeps from left to right, "right" sweeps from right to left. Defaults to "left".

angle
number

Angle of the diagonal slant in degrees. Higher values create a steeper diagonal. Defaults to 12.

once
boolean

Only animate on first viewport entry. When false, re-animates each time it scrolls into view. Defaults to true.

className
string

Additional CSS classes merged onto the wrapper element.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/dia-text.json

How to use

import { DiaText } from "@/components/ui/dia-text"

export function Hero() {
  return (
    <DiaText direction="left" angle={12}>
      Fluid Precision
    </DiaText>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
Fluid Precision
npx shadcn@latest addhttps://ui.nexvyn.dev/r/dia-text.json