Hover Transition - SB Tools

Controls

Intensity: 0.10

Drag to preview the value. Release or blur to apply it to the effect.

Speed (in/out): 1.50

One slider controls both speed-in and speed-out.

Displacement

Implementation

Copy and paste this code to add a hover transition effect to your project:

Astro Component

---
import { HoverEffect } from '@/components/HoverEffect';
import image1 from '@/assets/images/image1.jpg';
import image2 from '@/assets/images/image2.jpg';
import displacement from '@/assets/displacements/displacement.jpg';
---

<HoverEffect
  client:load
  image1={image1.src}
  image2={image2.src}
  displacementImage={displacement.src}
/>

React Component

import { useEffect, useRef } from 'react';
import hoverEffect from 'hover-effect';

export const HoverTransition = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      new hoverEffect({
        parent: containerRef.current,
        image1: 'path/to/image1.jpg',
        image2: 'path/to/image2.jpg',
        displacementImage: 'path/to/displacement.png',
        intensity: 0.5,
        speedIn: 1.5,
        speedOut: 1.5,
      });
    }
  }, []);

  return <div ref={containerRef} style={{ width: '600px', height: '400px' }} />;
};

Note: Requires hover-effect package (which includes Three.js and gsap). See hover-effect documentation for more details.