Kinetic Ambient Aura

Overview

Kinetic Ambient Aura adds a soft decorative glow to a WordPress page.

Use it to create:

• Background lighting behind a hero
• Subtle color around feature sections
• Visual depth behind cards or typography
• Page-wide ambient atmosphere
• Decorative transitions between sections

The block is rendered as a CSS radial gradient and does not require frontend JavaScript.

It is decorative, creates no interactive controls, and is designed not to add visible height to the page layout.

Add the block

1. Open a page or post in the WordPress editor
2. Select the block inserter
3. Search for Kinetic Ambient Aura
4. Insert the block close to the section it should decorate
5. Configure the glow from the block sidebar
6. Update the page and check the frontend

The editor displays an Aura placeholder so the zero-height block remains easy to locate and select.

Aura Appearance

Open the Aura Appearance panel to configure the main visual effect.

Glow Color

Choose the primary color of the aura.

The color picker supports transparency, allowing the glow to blend more naturally with the page background.

For the best result, choose a color that complements the surrounding section rather than competing with its text and buttons.

Shape

The Free edition includes:

• Circle

KineticHub PRO also includes:

• Ellipse (Horizontal)
• Ellipse (Vertical)

Use a horizontal ellipse behind wide hero content or cards. A vertical ellipse works well beside portrait media or narrow content columns.

Intensity

Intensity (Opacity) controls how visible the glow is.

Available range:

0.01–0.35

Lower values create a subtle background accent. Higher values create a brighter and more noticeable effect.

Start with a low value and increase it gradually.

Spread Radius

Spread Radius controls the overall size of the aura.

Available range:

200–2500 px

Use:

• Smaller values for local accents
• Medium values behind cards or headings
• Larger values for hero sections or page-wide atmosphere

A large spread combined with high opacity can overpower foreground content.

Softness Falloff

Softness Falloff controls how gradually the glow fades into transparency.

Available range:

30–100%

Higher values create softer edges. Lower values create a more concentrated glow.

For most ambient backgrounds, a softer falloff produces the most natural result.

Positioning and Layout

Open Positioning & Layout to choose how the aura is positioned.

Fixed

Fixed (Global Page Glow) anchors the aura to the browser viewport.

The glow remains in the same screen position while the visitor scrolls.

Use Fixed for:

• Page-wide ambient lighting
• A persistent corner glow
• Background atmosphere spanning several sections
• Decorative lighting that should follow the viewport

Absolute

Absolute (Container/Hero Only) keeps the aura near the location where the block was inserted.

Use Absolute for:

• One hero section
• A specific feature area
• A card group
• A localized content background

Place the block close to the section it should decorate so its position remains easy to understand inside Gutenberg.

Position X

Position X controls the horizontal center of the glow.

Available range:

-50–150%

Typical values:

• 0% places it toward the left
• 50% centers it
• 100% places it toward the right
• Negative or values above 100% move part of the glow outside the visible area

Position Y

Position Y controls the vertical center of the glow.

Available range:

-50–150%

Negative values move the aura above its insertion point. Higher values move it farther down.

Partially positioning the glow outside the section often produces a more natural ambient effect.

KineticHub PRO controls

KineticHub PRO adds additional design and responsive controls.

Z-Index Layer

Controls the local stacking level of the aura.

Available range:

-10–100

Use a negative value to place the glow behind normal content.

Increase the value only when the aura is hidden behind an unintended section or background.

A high z-index can place the glow above text or interactive controls, so test the complete page carefully.

Optical Blend Mode

Available modes include:

• Normal
• Screen
• Overlay
• Color Dodge

Normal provides the most predictable result.

Screen can create softer light effects on dark backgrounds. Overlay and Color Dodge produce stronger interactions with the colors below the aura.

Blend-mode results depend heavily on the theme background and surrounding content.

Mobile Behavior

Choose how the aura appears on smaller screens:

• Reduce Opacity
• Hide Completely
• Show Unchanged

Reducing the aura is a useful default when the desktop glow feels too strong on a narrow screen.

Hide it when the effect adds no useful value to the mobile composition.

Disable Blend Mode on Mobile

This option removes the selected blend mode on mobile while preserving the aura.

It can create a more predictable mobile result and reduce the visual complexity of advanced blending.

Recommended starting settings

For a subtle hero glow, begin with:

• Shape: Circle
• Intensity: 0.12–0.18
• Spread Radius: 700–1100 px
• Softness Falloff: 70–90%
• Behavior: Absolute
• Position X: 50%
• Position Y: 0%

For a page-wide background accent:

• Intensity: 0.08–0.15
• Spread Radius: 1200–2000 px
• Behavior: Fixed
• Position the center partially outside one corner of the viewport

Adjust the values while viewing the actual frontend page.

Layering multiple auras

You can use more than one Ambient Aura on the same page.

For example:

• Blue glow near the top-left
• Purple glow near the center-right
• Green glow near a call-to-action section

Keep the number of overlapping effects limited.

Several large, highly visible glows can reduce readability and make the page feel visually crowded.

Accessibility

Ambient Aura is decorative.

Its frontend output is hidden from assistive technologies and does not enter the keyboard navigation order.

Do not use the glow as the only method of communicating:

• Status
• Selection
• Importance
• Required actions
• Content relationships

Text, buttons, links, and other essential information should remain clear without the aura.

Performance

Ambient Aura uses CSS-only frontend rendering and does not load a block-specific frontend JavaScript engine.

Because it is a static decorative effect, it does not depend on scroll, hover, or pointer initialization.

For better performance and visual clarity:

• Use a small number of auras
• Avoid excessive opacity
• Avoid stacking several large blend-mode effects
• Reduce or disable complex blending on mobile
• Check the final page on lower-powered devices

Troubleshooting

The aura is not visible

Check:

• Intensity is not extremely low
• The color contrasts with the background
• Position X and Y do not place it completely outside the viewport
• The block is enabled in the KineticHub dashboard
• A parent or section background is not covering it
• The z-index is appropriate in PRO

The aura appears above text

Reduce the Z-Index Layer in KineticHub PRO.

Also inspect parent stacking contexts and transformed containers.

The glow is clipped

Check nearby parent containers for:

• overflow: hidden
• overflow: clip
• Fixed height
• Rounded-corner clipping

The aura may extend beyond the section by design.

The aura follows the screen while scrolling

The block is using Fixed positioning.

Select Absolute when the glow should remain associated with one section.

The aura is too strong on mobile

In KineticHub PRO, set Mobile Behavior to Reduce Opacity or Hide Completely.

You can also enable Disable Blend Mode on Mobile.

The block creates no visible space in Gutenberg

This is intentional.

Ambient Aura uses a zero-height layout footprint so it does not push the surrounding content downward. Select it through the editor placeholder or WordPress List View.

Next step

Continue with Kinetic Audio Player to add a customizable audio player with artwork, waveform, playback, volume, seek, and responsive layout controls.