Kinetic Marquee

Overview

Kinetic Marquee creates a continuously scrolling horizontal gallery of images or logos.

Use it for:

• Client logos
• Brand partners
• Sponsors
• Press mentions
• Product images
• Technology stacks
• Portfolio projects
• Event partners
• Certification logos

The block automatically duplicates its visual track to produce a seamless loop.

Add the block

1. Open a page or post in Gutenberg
2. Search for Kinetic Marquee
3. Insert the block
4. Select one or more images
5. Reorder the images as needed
6. Add optional destination links
7. Configure speed and interaction
8. Adjust the visual styling
9. Update the page
10. Test the frontend

At least one image is required. The block produces no frontend output when the image list is empty.

Gallery and links

Open Gallery & Links to manage the marquee items.

Add Images

Select several images from the WordPress Media Library in one action.

KineticHub Free supports up to:

7 items

KineticHub PRO removes the Free limit. The current frontend renderer accepts up to 999 items, although using a very large gallery is not recommended for normal pages.

Reorder images

Use the Up and Down controls beside each item to change its order.

The displayed order also controls:

• The original marquee sequence
• Progress rail segments
• Active-center tracking
• Repeated loop order

Remove an image

Use the delete control beside an item to remove it from the marquee.

Removing it from the block does not delete the original attachment from the WordPress Media Library.

Destination Link

Each image can include an optional URL.

Use links for:

• Client websites
• Product pages
• Case studies
• Sponsor pages
• Portfolio projects
• External resources

When no link is entered, the image remains decorative and non-clickable.

Open links in New Tab

This setting applies to all linked marquee items.

When enabled, links open in a new browser tab and include:

noopener noreferrer

Use the current tab for normal internal navigation unless a separate tab provides a clear benefit.

Alternative text

The frontend uses the image alternative text stored in the WordPress Media Library.

Add meaningful alternative text when the image communicates information.

For decorative logos already identified by nearby text, use suitable concise alternative text and avoid repeating unnecessary descriptions.

Movement and engine

Open Movement & Engine.

Base Speed

Available range:

1–200 seconds

Default:

30

Lower values create faster movement.

Higher values create slower movement.

The value is a relative loop-duration control rather than the exact time required to show the original image list once.

Kinetic Marquee expands short galleries internally to maintain a seamless track and scales the final animation duration according to the number of rendered items.

Start with:

• 15–25 for a faster image strip
• 30–50 for a normal logo marquee
• 60–100 for slow ambient movement

Reverse Direction

Changes the movement direction.

Use two consecutive marquees with opposite directions to create a layered showcase section.

Avoid using several fast rows together because the page can become visually distracting.

Pause on Hover / Tap

Completely stops the track during interaction.

On desktop, the marquee pauses when:

• The pointer enters the block
• A linked item receives keyboard focus

On a coarse-pointer or touchscreen device, tapping a non-linked area of the marquee toggles its paused state.

Selecting an image link still follows the link rather than toggling the pause state.

This option is enabled by default.

Slow Down on Hover

Reduces the animation playback rate to approximately:

30%

The slowdown applies on desktop hover and when a linked item receives keyboard focus.

Use it when visitors should have more time to inspect images without stopping the track completely.

Pause and slowdown priority

Pause on Hover / Tap and Slow Down on Hover are mutually exclusive.

Enabling one disables the other.

If both values are present in saved data, Pause takes priority.

Visual styling

Open Visual Styling.

Logo Height — Desktop

Controls the height of every marquee item.

Available range:

30–300 px

Default:

120 px

Images preserve their proportions and use object-fit: contain.

Use:

• 40–80 px for compact logo strips
• 90–140 px for normal partner galleries
• Larger values for product or portfolio image bands

Logo Height — Mobile — PRO

Sets a separate image height for widths up to approximately:

768 px

Available range:

30–300 px

When no mobile value is set, the desktop height is reused.

A smaller mobile value usually provides a cleaner result on narrow screens.

Limit Logo Width — PRO

Prevents unusually wide images from dominating the marquee.

When enabled, Max Width becomes available.

Max Width — PRO

Available range:

50–400 px

Default:

200 px

The image still respects the selected item height, but its width cannot exceed this value.

This is useful when the gallery mixes square logos with very wide wordmarks.

Space Between — PRO

Controls the gap between items.

Available range:

0–200 px

Default:

50 px

KineticHub Free uses the default 50 px spacing.

Reduce the gap for compact image rows. Increase it for isolated partner logos or premium brand presentations.

Grayscale Effect — PRO

Displays images in grayscale during their normal state.

The image returns to color when:

• It is hovered
• It becomes the active center item, when Active Center Highlight is enabled

Use this for consistent logo galleries containing many different brand colors.

Subtle Opacity — Idle — PRO

Reduces inactive item opacity.

An item returns to full opacity when:

• It is hovered
• It becomes the active center item

This works especially well with Active Center Highlight.

Edge Fade Effect

Adds a soft mask at the left and right edges of the marquee.

This helps the images appear to enter and leave the viewport gradually.

Disable it when:

• The complete first and last visible images must remain sharp
• A parent background conflicts with the mask
• The marquee is placed inside another clipped or masked container

Smart Addons

Open Smart Addons.

These options are available in both Free and PRO.

Hover Lift Effect

Moves the hovered item upward.

The main item lift is approximately:

12 px

When card frames are enabled, the frame also receives a smaller additional lift.

Make sure the parent container provides enough vertical space and does not clip overflow.

Sibling Focus Blur

Blurs and reduces the opacity of all other items while one item is hovered.

The active item remains sharp.

This creates a stronger visual focus but can make moving items difficult to track.

KineticHub displays a warning when Sibling Focus Blur is enabled without Pause on Hover.

For the most usable result, enable both options together.

Blur Intensity

Appears when Sibling Focus Blur is enabled.

Available range:

1–10 px

Default:

3 px

Use a low value for logo rows. Strong blur can make nearby links difficult to recognize.

Segmented Progress Rail

Displays one visual segment for each original marquee item.

The active segment updates according to the item closest to the center of the marquee.

The rail represents the original image list, not every internal duplicate used to create the loop.

Rail Position

Appears when the progress rail is enabled.

Available positions:

• Right
• Bottom

Right

Displays a vertical rail near the right edge.

Bottom

Displays a horizontal rail near the bottom center.

Choose a position that does not cover important parts of the images.

Pause / Slow State Indicator

Displays a small state badge during interaction.

Possible states include:

• RUNNING
• PAUSED
• SLOW

The indicator is normally hidden until the marquee is hovered, focused, paused, or slowed.

Active Center Highlight

Tracks the image closest to the center of the marquee and emphasizes it.

The active item receives:

• Increased scale
• A visible center focus zone
• Additional frame glow when frames are enabled

The active item scale is approximately:

1.15

When combined with PRO Grayscale or Idle Opacity, the centered item also returns to full color and opacity.

Card Frames

Open Card Frames.

Enable Card Frame

Places every image inside a styled card.

Frames are useful when:

• Logos use different source backgrounds
• Images have inconsistent internal padding
• The marquee needs a card-based appearance
• Shadows should be applied to individual items

Disable frames for transparent logos that should appear directly over the page background.

Frame Background

Select the background color used behind each image.

Default:

#ffffff

Choose a color that provides sufficient contrast with every logo.

Corner Radius

Available range:

0–50 px

Default:

12 px

Use:

• 0–4 px for sharp technical cards
• 8–16 px for standard cards
• 20–50 px for heavily rounded frames

Frame shadow

KineticHub Free uses the default Soft frame shadow.

KineticHub PRO adds the Shadow Intensity control with:

• Soft & Subtle
• Medium
• Hard Edges
• Floating

The Floating style also raises the frame slightly.

Global Shadows — PRO

Global Shadows apply to the complete marquee container rather than each individual image frame.

Enable Container Shadow

Adds a shadow around the entire block.

Shadow Style

Available styles:

• Soft — Classic
• Crisp — Solid
• Floating — Diffused
• Dynamic Glow
• Elegant Luxury

Soft

Creates a standard diffused shadow.

Crisp

Creates a solid offset shadow with hard edges.

Floating

Adds a larger diffused shadow and slightly raises the complete marquee container.

Dynamic Glow

Creates a luminous glow around the marquee.

Elegant

Combines two subtle shadow layers for a softer premium appearance.

Avoid combining a strong container shadow with heavy shadows on every card.

Entrance Engine — PRO

The entrance animation applies when the page loads.

Available options:

• None
• Fade In
• Slide Up
• Zoom In

Animation Delay

Available range in the editor:

0–2 seconds

Use a short delay.

A long delay can make the marquee appear missing while the page is loading.

Visibility — PRO

Available options:

• Hide on Mobile
• Hide on Desktop

The responsive breakpoint is approximately:

768 px

Hide on Mobile applies up to 768 px.

Hide on Desktop applies from 769 px.

These settings hide the complete block, including its linked images.

WordPress design controls

Kinetic Marquee supports standard WordPress controls for:

• Wide alignment
• Full alignment
• Margin
• Background color
• Text color
• Gradient background
• Border color
• Border width
• Border style
• Border radius

The default block alignment is Full Width.

The final width still depends on the active theme and parent container.

Editor and frontend behavior

The editor shows an animated approximation of the marquee.

The final frontend engine:

• Creates a seamless repeated track
• Calculates the duration
• Handles hover and focus interaction
• Pauses the animation outside the viewport
• Updates the progress rail
• Detects the active center item
• Manages touch pause behavior
• Cleans up removed block instances

Always verify the final speed and spacing on the published frontend.

Reduced motion

When the visitor enables reduced motion:

• Continuous marquee animation stops
• The gallery becomes horizontally scrollable
• Items use scroll snapping
• Progress Rail is hidden
• Interaction Indicator is hidden
• Active Center focus zone is hidden

The images and links remain available.

This provides a usable static alternative without forcing continuous movement.

Accessibility

The block uses a labeled group structure.

Linked items support:

• Keyboard focus
• Visible focus outline
• Normal link activation
• Focus-based pause or slowdown

The repeated secondary track is marked as hidden from assistive technologies to reduce duplicated screen-reader announcements.

Do not place essential instructions only inside a moving marquee.

Important content should also exist elsewhere in normal page content.

Performance

Kinetic Marquee uses transform-based animation through the browser’s Web Animations API, with CSS animation available as a fallback.

For a seamless loop:

• Short galleries are repeated internally
• The visual track contains at least 30 rendered items
• A second matching group continues the loop

The first few images in the primary group are loaded eagerly. Remaining images use lazy loading.

The frontend also:

• Pauses animation outside the viewport
• Hides images that fail to load
• Cleans up observers and animations when the block is removed
• Detects dynamically inserted marquee blocks

For better performance:

• Optimize images before uploading
• Use WebP, PNG, or JPEG appropriate to the artwork
• Avoid large source dimensions for small logos
• Avoid an unnecessarily large number of items
• Use consistent image proportions

Recommended settings

Client logo strip

• Speed: 35–50
• Desktop Height: 60–90 px
• Pause on Hover: Enabled
• Edge Fade: Enabled
• Hover Lift: Enabled
• Sibling Blur: Disabled
• Card Frames: Disabled or Soft
• Alignment: Full

Framed partner gallery

• Speed: 45–70
• Desktop Height: 90–130 px
• Pause on Hover: Enabled
• Sibling Blur: 2–3 px
• Card Frames: Enabled
• Frame Radius: 10–16 px
• Frame Shadow: Soft or Medium
• Progress Rail: Bottom

PRO visual showcase

• Separate mobile height
• Limit Logo Width: Enabled
• Gap: 40–70 px
• Grayscale: Enabled
• Idle Opacity: Enabled
• Active Center Highlight: Enabled
• Slow Down on Hover instead of Pause
• Subtle container shadow

Troubleshooting

The block is missing on the frontend

Confirm that at least one image is selected.

Kinetic Marquee returns no frontend markup when the image list is empty.

The marquee moves too quickly

Increase Base Speed.

Remember that higher values create slower movement.

The marquee moves too slowly

Reduce Base Speed.

Hover does not pause the marquee

Check:

• Pause on Hover / Tap is enabled
• Slow Down on Hover is not enabled instead
• You are testing the frontend
• Reduced Motion is not active
• Frontend JavaScript is loading

Tap does not pause on mobile

Tap a non-linked area of the marquee.

Selecting an image link follows the link instead of toggling pause.

Slow Down does not work on a touchscreen

Slow Down on Hover is designed for hover and keyboard focus.

Touch devices use the tap-pause behavior when Pause on Hover / Tap is enabled.

Sibling blur is difficult to follow

Enable Pause on Hover / Tap or reduce Blur Intensity.

Images look uneven

Use:

• Similar source dimensions
• Consistent transparent padding
• Card Frames
• PRO Limit Logo Width
• PRO separate gap and mobile height controls

Wide logos dominate the row

In PRO, enable Limit Logo Width and set a suitable maximum width.

The lift effect is clipped

Check the block and its parents for:

• overflow: hidden
• overflow: clip
• Fixed heights
• Insufficient vertical spacing

The progress rail does not update

Check:

• Segmented Progress Rail is enabled
• Reduced Motion is disabled
• Frontend JavaScript is loading
• The block is visible in the viewport
• Optimization has not delayed the script

The center highlight does not change

Confirm that Active Center Highlight is enabled and reduced motion is disabled.

The active item is recalculated while the track moves.

Links open in the wrong tab

Review Open links in New Tab.

This option applies to all marquee item links.

One image disappears

Open the image URL directly.

The frontend hides an image when its loading request fails.

Check for a deleted file, invalid URL, CDN restriction, or 403/404 response.

The marquee stops after leaving the viewport

This is intentional performance behavior.

It resumes when the block returns near the visible area.

The marquee becomes horizontally scrollable

The visitor may have Reduced Motion enabled.

This is the intended accessible fallback.

The editor and frontend speeds differ slightly

The editor provides an approximation.

Use the frontend result as the final speed reference because the actual width and repeated-track geometry are calculated there.

Next step

Continue with Kinetic Scroll Divider to create SVG divider lines that draw themselves when they enter the viewport.