ShaderHero — A cinematic hero section with gradient

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.