DC Gradient Hero – Animated Gradient Hero for OpenCart 4

DC Gradient Hero is a modern hero section module for OpenCart 4, designed as an alternative to classic banners, sliders and video backgrounds.
Instead of heavy layouts and rotating content, it focuses on one clear message, enhanced by a smooth animated gradient rendered on canvas.

The module uses granim.js as a dedicated gradient animation engine, which allows creating visually dynamic backgrounds without affecting performance or Core Web Vitals.

---

Key features

• 🎨 Animated gradient background based on multiple color pairs

• 🖼️ Optional image blending (gradient + image using canvas blending modes)

• ⚡ Canvas-based rendering – no complex DOM structures

• 🚫 No sliders, no video, no jQuery on frontend

• 🧠 Autonomous cache & minification system (CSS & JS)

• ♻️ Assets loaded once per session, even with multiple module instances

• 🎯 Fully compatible with OpenCart 4

---

How it works

DC Gradient Hero renders the background using a single <canvas> element instead of layered divs.
Gradient animations are created from color pairs, which allows smooth transitions between multiple visual states without using video files or heavy JavaScript logic.

The module supports two display modes:

• Gradient only – clean animated background

• Gradient + image blending – image enhanced with animated color overlay

If no image is selected, the module automatically falls back to gradient-only mode.

---

Performance-first approach

The module was built with performance in mind:

• no frontend jQuery dependency

• no sliders, timeouts or observers

• minimal JavaScript footprint

• reduced DOM complexity

Thanks to this approach, DC Gradient Hero works perfectly with PageSpeed Insights and Core Web Vitals requirements.

---

Installation

DC Gradient Hero is delivered as an OCMOD package and can be installed using the built-in OpenCart extension installer.

• no manual file copying

• automatic module registration

• ready to use immediately after installation

---

Source & downloads

• 📦 Design Cart LAB – recommended, stable releases with documentation

• 🧑‍💻 GitHub repository – full source code, changelog and customization options

---

Who is it for?

DC Gradient Hero is ideal for:

• modern OpenCart stores

• custom and premium projects

• landing pages and brand-focused homepages

• stores that want visual distinction without performance loss

---

About Design Cart

DC Gradient Hero is part of the Design Cart ecosystem — a collection of performance-focused, custom OpenCart solutions built for real production use.

If you are looking not only for modules, but also for custom OpenCart store development, visit:
👉 https://www.designcart.pl/tworzenie-sklepow-internetowych.html