Neo-Brutal Acid Trip
Vibrant conic gradient with neo-brutalist design creating an acid trip aesthetic.
Main Features of Neo-Brutal Acid Trip
How to Use Neo-Brutal Acid Trip in Next.js
Installation Guide for Neo-Brutal Acid Trip
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #E0F43F | Background color |
conicGradientColors | string | #E0F43F 0%, #FF00FF 25%, #00FFFF 50%, #000000 75%, #E0F43F 100% | Conic gradient colors |
conicOpacity | number | 1 | Conic gradient opacity |
conicBlur | string | 3xl | Conic gradient blur |
conicScale | number | 1.5 | Conic gradient scale |
conicDuration | number | 20 | Conic gradient rotation duration |
patternColor | string | rgba(0,0,0,0.1) | Pattern color |
patternSize | string | 40px | Pattern size |
patternAngle | number | 45 | Pattern angle |
circleBorderColor | string | #000000 | Circle border color |
circleBorderWidth | string | 100px | Circle border width |
circleSize | string | 80vw | Circle size |
circleOpacity | number | 0.1 | Circle opacity |
circleScale | number[] | [0.8, 1.1, 0.8] | Circle scale animation |
circleRotate | number | -90 | Circle rotation |
circleDuration | number | 10 | Circle animation duration |
grainOpacity | number | 0.2 | Grain overlay opacity |
grainBaseFrequency | string | 0.65 | Grain base frequency |
grainOctaves | number | 3 | Grain octaves |
title | string | Neo-Acid | Title text |
className | string | Additional CSS classes |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QCan I tone it down?
Yes, by increasing the `conicBlur` and reducing the `conicOpacity`, you can achieve a softer, less aggressive version of this look.
QDoes it support custom patterns?
The background uses a geometric pattern defined by size and angle, which can be customized to match your brand's iconography.
QIs the central circle interactive?
The circle pulses on a loop to add life to the design, but it can be easily extended to react to scroll or hover events.