Skip to content
Hover Tilt

Usage Examples

Basic Usage

Section titled “Basic Usage”

The simplest usage with default props. The component will apply a subtle tilt effect on hover.

<HoverTilt>
  <div class="card">
    <h3>Basic Example</h3>
    <p>Hover over this card to see the default tilt effect</p>
  </div>
</HoverTilt>

Tilt Factors

Section titled “Tilt Factors”

Control the intensity of the tilt effect with tiltFactor and tiltFactorY. The tiltFactor controls tilt on both axes, while tiltFactorY overrides control of the vertical tilt.

<!-- Default tilt -->
<HoverTilt>
  <div class="card">tiltFactor: 1</div>
</HoverTilt>


<!-- Increased tilt -->
<HoverTilt tiltFactor={2}>
  <div class="card">tiltFactor: 2</div>
</HoverTilt>


<!-- Different Y tilt -->
<HoverTilt tiltFactor={1.5} tiltFactorY={0.5}>
  <div class="card">tiltFactor: 1.5, tiltFactorY: 0.5</div>
</HoverTilt>

Scale Effect

Section titled “Scale Effect”

Add a scale effect on hover with scaleFactor. A value of 1 means no scaling, while values greater than 1 will scale up on hover.

<!-- No scale -->
<HoverTilt scaleFactor={1}>
  <div class="card">scaleFactor: 1</div>
</HoverTilt>


<!-- Subtle scale -->
<HoverTilt scaleFactor={1.05}>
  <div class="card">scaleFactor: 1.05</div>
</HoverTilt>


<!-- Prominent scale -->
<HoverTilt scaleFactor={1.2}>
  <div class="card">scaleFactor: 1.2</div>
</HoverTilt>


<!-- Negative scale -->
<HoverTilt scaleFactor={0.9}>
  <div class="card">scaleFactor: 0.9</div>
</HoverTilt>

Shadow Effects

Section titled “Shadow Effects”

Enable dynamic shadows that follow the cursor with the shadow prop. Control the blur intensity with shadowBlur.

<!-- No shadow -->
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<!-- With shadow -->
<HoverTilt shadow>
  <div class="card">shadow</div>
</HoverTilt>


<!-- Custom shadow blur -->
<HoverTilt shadow shadowBlur={60}>
  <div class="card">shadowBlur: 60</div>
</HoverTilt>

Want a static resting shadow that gives way to the dynamic effect? See Advanced → Shadows for a deep dive and interactive demo.

Glare Customization

Section titled “Glare Customization”

Control the glare effect intensity and color with glareIntensity and glareHue. The glare follows your cursor and adds a beautiful default lighting effect.

<!-- Default glare -->
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<!-- Reduced glare -->
<HoverTilt glareIntensity={0.5}>
  <div class="card">glareIntensity: 0.5</div>
</HoverTilt>


<!-- Intense glare -->
<HoverTilt glareIntensity={1.5}>
  <div class="card">glareIntensity: 1.5</div>
</HoverTilt>

Glare Hue Customization

Section titled “Glare Hue Customization”

Control the hue of the glare effect with glareHue. The hue is very mild, so it may not be noticeable on striking colours, but here’s a demo showing how it appears.

<!-- Default hue (lavender-ish) -->
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<!-- Custom hue (red) -->
<HoverTilt glareHue={20}>
  <div class="card">glareHue: 20</div>
</HoverTilt>

Spring Animations

Section titled “Spring Animations”

Customize the animation physics with springOptions and tiltSpringOptions. Control stiffness & damping for different feeling interactions.

  • A stiffer spring will create more pronouced elastic effects (more ‘boing-y’)
  • More damping will smooth out the motion at the start and end (less ‘zippy’)
<!-- Default spring -->
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<!-- Fast spring -->
<HoverTilt springOptions={{ stiffness: 0.5, damping: 0.2 }}>
  <div class="card">stiffness: 0.5, damping: 0.6</div>
</HoverTilt>


<!-- Slow spring -->
<HoverTilt springOptions={{ stiffness: 0.05, damping: 0.9 }}>
  <div class="card">stiffness: 0.1, damping: 0.9</div>
</HoverTilt>

Enter Delay

Section titled “Enter Delay”

Control how long the component waits before activating and animating when the cursor enters. Can be used to prevent flickering when the cursor briefly enters the element.

<!-- Default enter delay (0ms) -->
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<!-- Longer enter delay -->
<HoverTilt enterDelay={300}>
  <div class="card">enterDelay: 300ms</div>
</HoverTilt>

Exit Delay

Section titled “Exit Delay”

Control how long the component waits before animating back to the default state when the cursor leaves. Use exitDelay (in milliseconds) to create a smoother experience.

<!-- Default exit delay (200ms) -->
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<!-- Longer exit delay -->
<HoverTilt exitDelay={1000}>
  <div class="card">exitDelay: 1000ms</div>
</HoverTilt>


<!-- No exit delay -->
<HoverTilt exitDelay={0}>
  <div class="card">exitDelay: 0ms</div>
</HoverTilt>

Blend Modes

Section titled “Blend Modes”

Change how the glare effect blends with the content using the blendMode prop. Common values include overlay, screen, multiply, soft-light, and more.

<!-- Default blend mode (overlay) -->
<HoverTilt>
  <div class="card">Default (overlay)</div>
</HoverTilt>


<!-- Color dodge blend mode -->
<HoverTilt blendMode="color-dodge">
  <div class="card">blendMode: color-dodge</div>
</HoverTilt>


<!-- Plus lighter blend mode -->
<HoverTilt blendMode="plus-lighter">
  <div class="card">blendMode: plus-lighter</div>
</HoverTilt>

More…

Section titled “More…”

For more examples of the advanced features, check here;