Brutalist Text

About This Component

Brutalist Text creates a layered typography effect where text is repeated, cropped, and progressively faded to produce a bold brutalist-inspired visual style.

The component works with any typography setup and gives you full control over layering, spacing, opacity falloff, and responsive scaling. Whether used for hero sections, posters, editorial layouts, or experimental interfaces, it creates strong graphic compositions with minimal setup.

Customization options include:

• Text content (single word or multiple words)

• Full typography controls (font, size, line-height, spacing, etc.)

• Responsive Fit mode to scale text automatically to the component width

• Layers controls how many repeated text rows are displayed

• Row Height controls the visible cropped height of each layer

• Decay progressively reduces layer height to create the slicing effect

• Opacity Step controls how quickly layers fade out

• Gap adjusts spacing between layers

• Select mode controls text selection behavior (auto, only first, none)

• Accessible HTML Tag support (span, p, h1 → h6)

Clean, lightweight, and easy to integrate into modern editorial or brutalist layouts.