HERO KIT · AI SAAS · FREE
Each hero is a component with Desktop, Tablet and Phone variants and editable text, links and logos. Copy any of them into your own project.
A
HEROES 01–05
Product showcase
The product UI is the hero. The pattern buyers expect first.
Beacon · Eclipse · Gridline · Stackview · Waitlist Wave
View family
B
HEROES 06–10
Prompt-native
An input box replaces the email field. The most AI-specific pattern.
Ember Prompt · Meadow · Home Base · Ask & Answer · Scribble
View family
C
HEROES 11–15
Developer & technical
Mono type, install commands and construction lines for APIs, agents and infra.
Install · Blueprint · Pixel Loop · Marker · Neon Console
View family
D
HEROES 16–20
3D centerpiece
One object carries the page, built with Framer shaders and native 3D layers.
Glass Loop · Chrome Knot · Sparkle · Liquid · Chipset
View family
E
HEROES 21–25
Ambient & generative
Light, particles and motion fields on dark grounds.
Neural Globe · Vortex · Aurora · Lightspeed · Signal
View family
F
HEROES 26–30
Cinematic photography
Real photographs and serif type for a calm, premium tone.
Rim Light · Monolith · Summit · Deep Field · Profile
View family
G
HEROES 31–35
Bento & cards
Headline on top, a composed grid of cards below.
Bento Below · Halftone Field · Fan Deck · Glass Notes · Candy Bento
View family
H
HEROES 36–40
Floating UI & media
Devices, chat windows and media surrounded by floating chips.
Phone Float · Writer · Live Call · Chat Duet · Gallery Wall
View family
I
HEROES 41–45
Poster type
Oversized display type and saturated color.
Loud · Wordmark · Grain Swiss · Flow State · Brutal
View family
J
HEROES 46–50
Systems & workflows
Agents, pipelines and integrations drawn as live diagrams.
Checklist Agent · Node Canvas · Hub · Soundscape · Orbit
View family