Kinetic Cursor Reveal

Overview

Kinetic Cursor Reveal combines a text list with floating media previews.

Use it for:

• Portfolio projects
• Case studies
• Service lists
• Product collections
• Creative navigation
• Team or artist showcases
• Editorial indexes

On desktop, the preview appears when a visitor hovers over or focuses an item. On touch devices, visitors tap an item to reveal its media.

Add the block

1. Open a page or post in Gutenberg
2. Search for Kinetic Cursor Reveal
3. Insert the block
4. Open List Items
5. Add a title and media to each item
6. Add optional subtitles and links
7. Update the page
8. Test the interaction on the frontend

The editor shows a contained static preview. Cursor tracking and the complete reveal interaction run on the published frontend.

Create list items

Each item supports:

• Title
• Optional subtitle
• Image or video
• Optional link URL

Use the arrow controls to reorder items and the delete control to remove them.

The Free edition supports up to 3 items.

KineticHub PRO supports up to 50 items.

At least one valid item is required. An item must contain both a title and media before it is rendered on the frontend.

Add media

Select Upload Media inside an item and choose an image or video from the WordPress Media Library.

Supported video detection includes common formats such as:

• MP4
• WebM
• MOV
• OGG

For the most consistent layout:

• Use similar dimensions for all images
• Keep videos short and optimized
• Use the same aspect ratio across items
• Avoid very large media files

Videos play muted and loop while their reveal preview is active. Playback stops when the reveal closes.

Add item links

Enter an optional Link URL for each item.

Enable Open Links in New Tab when all linked items should open in a separate tab.

On touch devices, the first tap can reveal the preview. A linked item can then be activated through the normal link interaction.

Use clear titles so visitors understand the destination before opening it.

Desktop interaction

On pointer-based devices:

• Hovering an item opens its media
• Moving the pointer moves the floating preview
• Leaving the item closes the preview
• Keyboard focus also activates the reveal

The preview is positioned outside restrictive page containers when necessary, helping it avoid clipping from nearby layout wrappers.

Mobile interaction

The Free edition uses Tap to Reveal on touch devices.

Tap an item to display its media preview. Opening another item replaces the current preview.

KineticHub PRO adds three mobile behaviors:

• Tap to Reveal
• Always Visible Stack
• Hide Media

Choose Always Visible Stack when the images should remain visible without hover interaction.

Choose Hide Media when the text list should remain available but previews are unnecessary on mobile.

KineticHub PRO text controls

PRO adds detailed title and subtitle styling.

Text Reveal Style

Choose:

• Solid Text
• Outline to Solid
• Blur Reveal
• Lift & Float

Typography

Configure:

• Desktop font size
• Mobile font size
• Hover scale size
• Accent hover color
• Focus dimming

Focus Dimming reduces the visibility of inactive items while one item is active.

Subtitle Styling

Configure:

• Subtitle color
• Subtitle size
• Letter spacing

Keep subtitles short so the list remains easy to scan.

KineticHub PRO media controls

PRO adds control over the floating preview.

Media appearance

Configure:

• Media width
• Aspect ratio
• Container media style
• Media layer
• Blend mode
• Film grain
• Reveal mask
• Hover filter

Available aspect ratios include:

• 4:5
• 1:1
• 16:9
• 21:9

Available reveal masks include:

• Fade
• Circle Expand
• Diagonal Wipe
• Curtain

The Grayscale to Color filter displays desaturated media before revealing its normal colors.

Media layer

Choose whether the media appears:

• Over the content
• Under the content

Use the Over setting for a clear floating preview. Use Under when the media should feel integrated into the section background.

Blend modes

Available modes include:

• Normal
• Difference
• Exclusion
• Luminosity

Blend modes depend on the surrounding background. Test text readability after changing them.

KineticHub PRO physics

Open Physics Engine to configure the preview movement.

Magnetic Hover

Makes the active text respond to pointer movement.

Inner Parallax

Moves the media content in the opposite direction to the pointer, adding depth.

Position offsets

Use Offset X and Offset Y to move the floating preview away from the pointer.

Smoothness

Smoothness (Lerp) controls how quickly the preview catches up with the pointer.

Lower values create smoother, slower movement. Higher values make the preview respond more quickly.

Velocity Tilt

Rotates the preview according to pointer movement speed.

Use it subtly to avoid distracting from the list content.

Additional PRO controls

KineticHub PRO also includes:

• Custom cursor badge and badge text
• Container shadows
• Entrance animations
• Entrance delay
• Hide on mobile
• Hide on desktop

The cursor badge can display a short action such as:

• View
• Explore
• Open
• Discover

Accessibility

Kinetic Cursor Reveal supports:

• Semantic list markup
• Keyboard focus
• Enter and Space activation for linked items
• Touch interaction
• Reduced-motion handling

The media effect should enhance the list rather than contain essential information.

Use descriptive titles and meaningful link destinations. Important information should remain understandable without seeing the floating preview.

When reduced motion is enabled, pointer-heavy movement is reduced and the content remains usable.

Performance

For better performance:

• Optimize images before uploading
• Use short compressed videos
• Avoid many large videos in one block
• Keep list text concise
• Use consistent media dimensions

The block pauses hidden video previews and removes its active event handling when an instance is removed from the page.

Recommended starting setup

For a simple portfolio list:

• 3–6 items
• Short title
• One-line subtitle
• Consistent 4:5 images
• Optional project links
• Tap to Reveal on mobile

With PRO, begin with:

• Solid or Outline to Solid text
• Media width around 300–400 px
• Fade reveal
• Normal blend mode
• Small X or Y offset
• Smoothness around the default value
• Subtle Velocity Tilt or Inner Parallax, not both at maximum strength

Troubleshooting

The complete block is missing

Confirm that at least one item contains both:

• A title
• A valid media URL

Items without both values are excluded from frontend rendering.

Text appears, but media does not

Check:

• The media URL opens directly
• The file still exists
• Frontend JavaScript is loading
• Custom CSS does not hide the preview
• A security or CDN rule does not block the media

The preview is clipped

Check parent containers for:

• overflow: hidden
• overflow: clip
• Fixed height
• Transforms
• Stacking-context conflicts

Also test the block outside its current parent.

Hover does not work on mobile

Mobile devices do not provide normal desktop hover.

Tap the item to use the touch interaction.

The first tap does not open the link

With Tap to Reveal, the first interaction can open the media preview before navigation.

This prevents visitors from missing the visual preview entirely.

Video continues playing after closing

Update KineticHub and clear cached JavaScript. The current frontend behavior pauses video when its reveal state ends.

The editor does not follow the pointer

This is intentional. The editor uses a simplified preview so the block remains easy to select and configure.

Test the real interaction on the frontend.

Next step

Continue with Kinetic Hero Mesh to create animated hero backgrounds using canvas, generative patterns, pointer interaction, and advanced PRO visual modes.