Contact Section With Shader
A stunning two-column contact section that combines a WebGL shader background with rotating testimonials and a clean contact form. The left side features an animated mesh gradient with flowing colors, while testimonial cards fade in and out with a blur effect.
Features
- Animated Shader Background: WebGL-powered mesh gradient with simplex noise for smooth, flowing colors
- Customizable Colors: Pass your own color palette using hex values or CSS variables
- Rotating Testimonials: Auto-rotating testimonial cards with blur fade transitions
- Glassmorphism Cards: Testimonials use backdrop blur and semi-transparent backgrounds
- Responsive Layout: Two columns on desktop, stacked on mobile with shader section below
- Dark Mode Support: Full support for light and dark themes
Customizing Colors
You can customize the shader colors by passing an array of 5 colors:
<ContactSectionWithShader
colors={[
"#064e3b", // Base color
"#16a34a", // Layer 1
"#14b8a6", // Layer 2
"#22d3ee", // Layer 3
"#047857", // Layer 4
]}
/>Colors can be hex values, RGB, or CSS variables like var(--color-red-500).
Explore more
Part of Contact Sections ยท All blocks
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time



