ShaderHero

Show Preview
ShaderHero
ShaderHero

About ShaderHero

Every visual detail is wired to the property panel — swap gradient colors, adjust font sizes, toggle sections on and off, and tune the animation speed all from the right sidebar. Nothing is hardcoded.

What's inside:

  • 🌌 Live WebGL nebula — organic, looping background shader with adjustable animation speed (pause it at 0×, double it at 2×)

  • ✏️ Fluid gradient headlines — two-line heading with a responsive clamp() font size that scales automatically from mobile to desktop

  • 🏷️ Trust badge — toggleable pill with emoji, custom text, colors, and border

  • 📝 Subtitle — responsive size, weight, color, max-width

  • 🎯 Two CTA buttons — primary with gradient fill, secondary with glass blur; both have hover/press animations and on-click event handlers

  • 🎬 Entrance animations — staggered slide-up/down on mount, with duration control

  • 📐 Full layout control — text alignment, vertical alignment, padding, section gap, content max-width

60 property controls. 9 sections. Zero dependencies beyond Framer.

Drop it on any page, resize to fit, and publish.

From Anamika Yadav

Blur Overlay
RandomLetterSwap
Context Graph
Animated tabs

Related Components

wire grid board
Liquid Glass Footer
Testimonial Wave
Stacked Testimonials