MegaHero

About this template

AI SaaS Hero Kit is a collection of 50 hero sections for AI products, built in Framer. Each hero is one component with desktop, tablet and phone variants, so it works on every screen as soon as you drop it into a page.

The heroes come in ten styles, with five heroes in each:

Product showcase: dashboards and product UI front and center

Prompt-native: a prompt box where the email field used to be

Developer & technical: install commands, terminals and mono type

3D centerpiece: one object carries the page, built with Framer shaders

Ambient & generative: particles, light and motion on dark backgrounds

Cinematic photography: real photos paired with serif type

Bento & cards: a headline over a grid of cards

Floating UI & media: devices and chat windows with floating chips

Poster type: oversized display type and bold color

Systems & workflows: agents, pipelines and integrations drawn as live diagrams

Headlines, subheads, buttons, links and images are all component properties, so you edit them from the properties panel instead of digging through layers. Shared Nav, Button, Badge and Logo Bar components keep everything consistent. 12 code components add the motion: live counters, a typewriter, flowing connectors, a particle globe, aurora light and more.

All copy, brand names and logos are original placeholders, and the photos are from Unsplash. Swap in your own and publish.