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.

A cinematic hero section with gradient