ShaderHero

Show Preview
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.