---
title: "ShaderHero — Free Framer component · Best of Framer"
description: "Free Framer component · by Anamika Yadav · Sections. A cinematic hero section with gradient"
canonical: "https://framer.elliotli.dev/component/shaderhero"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/ShaderHero

# ShaderHero

A cinematic hero section with gradient

[View on Framer](https://framer.com/marketplace/components/shaderhero/?via=elliot-li)

![ShaderHero preview image 1](https://framer.elliotli.dev/og/component/shaderhero/685b55703cb6635b/1600x1200.jpg)

## Summary

A cinematic hero section with gradient

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #4590

## Details

- **Author**: Anamika Yadav
- **Published**: 2026-06-05
- **Updated**: 2026-06-05
- **Added**: 2026-05-29
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes