Neo-Brutalism
Bold neo-brutalist testimonial section with marquee animation.
Main Features of Neo-Brutalism
How to Use Neo-Brutalism in Next.js
Installation Guide for Neo-Brutalism
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
backgroundColor | string | #F0F0F0 | Background color of the component (hex, rgb, or hsl). |
headerBgColor | string | #FF4D00 | Background color of the header section (hex, rgb, or hsl). |
headerBorderColor | string | #000000 | Border color of the header section (hex, rgb, or hsl). |
headerTextColor | string | #ffffff | Text color of the header section (hex, rgb, or hsl). |
headerRotate | number | -1 | Rotation angle of the header in degrees. |
headerShadowColor | string | rgba(0,0,0,1) | Shadow color of the header (hex, rgb, or hsl). |
title | string | Unfiltered Feedback | Main title text. |
cardBgColor | string | #ffffff | Background color of the testimonial cards (hex, rgb, or hsl). |
cardBorderColor | string | #000000 | Border color of the testimonial cards (hex, rgb, or hsl). |
cardShadowColor | string | rgba(0,0,0,1) | Shadow color of the cards (hex, rgb, or hsl). |
cardHoverShadowColor | string | rgba(0,0,0,1) | Shadow color of cards on hover (hex, rgb, or hsl). |
cardHoverTranslate | number | 2 | Translation distance of cards on hover in pixels. |
avatarBorderColor | string | #000000 | Border color of the avatar images (hex, rgb, or hsl). |
avatarBgColor | string | #fef08a | Background color of the avatar images (hex, rgb, or hsl). |
starFillColor | string | #000000 | Fill color of the star icons (hex, rgb, or hsl). |
starTextColor | string | #000000 | Text color for star rating (hex, rgb, or hsl). |
quoteColor | string | #000000 | Color of the quote text (hex, rgb, or hsl). |
quoteUppercase | boolean | true | Whether to display quotes in uppercase. |
dividerBorderColor | string | #000000 | Border color of dividers (hex, rgb, or hsl). |
authorNameColor | string | #000000 | Color of the author name text (hex, rgb, or hsl). |
authorNameUppercase | boolean | true | Whether to display author names in uppercase. |
companyBadgeBgColor | string | #000000 | Background color of company badges (hex, rgb, or hsl). |
companyBadgeTextColor | string | #ffffff | Text color of company badges (hex, rgb, or hsl). |
companyBadgeUppercase | boolean | true | Whether to display company badges in uppercase. |
Related Components
When to Use
Perfect for high-energy brands, street-wear e-commerce, and experimental Next.js portfolios. Use this React component for a bold, neo-brutalist testimonial section with a continuous marquee animation and chunky card shadows.
Best Practices
Follow React best practices by pairing this with thick, monospaced typography and saturated primary colors. Maintain scalable component architecture by using it for high-impact social proof. Optimize for performance by using CSS-based marquee animations.
Why This Component Matters in Modern UI Development
Neo-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
QDoes the marquee pause on hover?
Yes, the animation automatically pauses when a user hovers over a card, allowing them to read the testimonial at their own pace.
QCan I adjust the rotation?
The `headerRotate` prop allows you to control the exact tilt of the 'Unfiltered Feedback' banner for a custom 'hand-placed' look.
QAre the shadow colors customizable?
Each card's shadow color is fully customizable via the `cardShadowColor` prop, supporting both solid blacks and vibrant secondary colors.