Uilora Logo
Uilora.
Join
Uilora Logo
Uilora.
Join

Concrete Brutalism

Static rough texture using SVG turbulence filters creating a concrete surface.

Main Features of Concrete Brutalism

How to Use Concrete Brutalism in Next.js

Installation Guide for Concrete Brutalism

Props

Customize the component with these props

PropertyTypeDefaultDescription
backgroundColor
string#808080Background color
filterOpacity
number0.4Filter opacity
turbulenceBaseFrequency
string0.05Turbulence base frequency
turbulenceNumOctaves
number3Turbulence octaves
displacementScale
number20Displacement scale
surfaceScale
number3Surface scale
specularConstant
number1.5Specular constant
specularExponent
number20Specular exponent
lightingColor
string#ffffffLighting color
lightAzimuth
number45Light azimuth angle
lightElevation
number30Light elevation angle
gradientFrom
string#a3a3a3Gradient start color
gradientTo
string#525252Gradient end color
borderColor
string#000000Border color
borderWidth
string4pxBorder width
cardBgColor
string#ffffffCard background color
text
stringBrutalText label
className
stringAdditional CSS classes
PreviousAnalog Film
NextHolographic Shimmer

When to Use

Excellent for architectural portfolios, crypto dashboards, and Next.js sites that adopt a 'neo-brutalist' aesthetic. Use this React component for a rough concrete texture with realistic lighting, shadows, and SVG-powered displacement maps.

Best Practices

Follow React best practices by pairing this with bold, geometric typography and thick borders. Maintain scalable component architecture by using it as a high-impact background for specialized hero sections. Optimize for performance by managing the `turbulenceNumOctaves` for mobile devices.

Why This Component Matters in Modern UI Development

Brutalist design is a powerful visual statement of raw power and structural honesty. This production-ready UI component helpsคุณ build an interface that feels solid and unyielding, adding a unique architectural signature to your project.

Frequently Asked Questions

QHow is the texture generated?

It uses a sophisticated SVG turbulence filter combined with displacement mapping and specular lighting to create a 3D-feeling rough surface.

QCan I adjust the 'roughness'?

Yes, you can control the surface detail via `turbulenceBaseFrequency` and the light/shadow depth via `displacementScale`.

QIs it mobile responsive?

Absolutely, the displacement filter and lighting effects scale proportionally to ensure the concrete effect remains consistent on all screens.

Concrete Brutalism - React Noise Texture & Grain Effects | Uilora