MARKETPLACE
PLUGINS
ANIMATED HERO SECTION
Animated Hero Section logo

Animated Hero Section

Published July 2026
   •    Updated July 2026

Plugin details

Animated Hero Section is a responsive, interactive hero component for Bubble web apps. It includes editable eyebrow text, multi-line headline, supporting description, accent colour, optional image URL, floating-card content, and up to two call-to-action buttons. The CTA buttons trigger separate Bubble workflow events, while exposed states report when the element is ready and which button was last clicked. When no image is supplied, the element displays a built-in animated dashboard scene with a chart, metric cards, floating insight panels, aurora mesh lighting, orbit effects, and staggered entrance transitions. Motion controls let you enable or disable animations, cursor-following spotlight and 3D parallax, magnetic button hover effects, and set motion intensity from 0 to 2. The element is responsive, supports multiple instances on a page, uses no external scripts or APIs, stays within its own Bubble canvas, and automatically respects visitors' reduced-motion accessibility preference.

$3

One time

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

TTS logo
TTS
Joined 2024   •   7 Plugins
View contributor profile

Instructions

# Animated Hero Section
A premium hero section for SaaS, product launches, agencies, and high-impact landing pages.

## Built-in experiences
- Animated aurora mesh lighting and orbit system.
- Pointer-following spotlight plus 3D visual parallax.
- Magnetic CTA buttons.
- Staggered entrance transitions and animated dashboard chart.
- No external scripts, APIs, or dependencies.
- Motion switches off automatically when a visitor uses Reduce Motion in their operating-system settings.

## Content fields
Use the existing eyebrow, headline, description, CTA, image, floating-card, and accent-colour fields to customise the hero. Leave **Image URL** blank to use the animated dashboard visual.

## Motion controls
- **Enable motion effects** turns the visual animation system on or off.
- **Enable mouse parallax** enables the cursor spotlight and 3D stage tilt.
- **Enable magnetic buttons** enables the CTA hover pull effect.
- **Motion intensity** accepts a value from 0 to 2. Use 1 for the default experience.
- **Verbose logging** outputs safe diagnostics to the browser console.

## Workflow events
- Primary button clicked
- Secondary button clicked

## States
- Is ready
- Last clicked button (`primary` or `secondary`)

The hero stays fully within its Bubble element canvas and supports multiple instances on the same page.

Editor: https://bubble.io/page?id=tentenstack&tab=Design&name=hero_section&type=page

Preview: https://tentenstack.bubbleapps.io/version-test/hero_section

Types

This plugin can be found under the following types:
Element   •   Event

Categories

This plugin can be found under the following categories:
Containers   •   Productivity   •   Media   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Bubble is Global
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales