Tidal Image

Tidal Image is a Framer image hover effect component: a photo that ripples like water around the cursor and settles back when the cursor leaves. WebGL, with an optional ripple on scroll.

It can start in black and white and colour in on hover. Use it like an image fill. Keep one or two per page.

Controls:

• Image and Focus: the photo, and its focus point when cropped

• Trigger: Hover, Scroll, or both

• Strength, Speed, Size: how far the image bends, how fast the ripples move, how wide the area around the cursor is

• Settle: how quickly it calms down after the cursor leaves or scrolling stops

• Color Reveal: start in black and white and colour in on hover

• Phone Effect: run the WebGL effect on phones too. Off keeps phones fast

• Priority: load the image first. Only for an image at the top of the page

• Radius: corner radius

On phones the plain image shows unless Phone Effect is on. With Color Reveal the photo colours in as it reaches the middle of the screen. With reduced motion the image never distorts, and the colour reveal still works. Colour controls take your tokens, so dark mode follows the theme. It works on Arabic right-to-left pages.

Setup: paste the component onto the canvas, add an image, choose Hover or Scroll, and size the frame like any image.

After checkout: the component link to paste onto your Framer canvas, plus an editable Framer project with a demo page.

All nine components in one project, the Motion Kit, are USD 49: https://buy.stripe.com/bJeeVd3Pq0y116z5l4f3a0i

All sales are final, no refunds. If the component link does not work or you were charged twice, email hello@unreel.ae and we fix it.