Getting Started

Installation

Install the package using your preferred package manager:

npm install hover-tilt

pnpm add hover-tilt

yarn add hover-tilt

bun add hover-tilt

Usage

Because HoverTilt is available both as a Svelte Component (<HoverTilt />) and a Web Component (<hover-tilt />), there are options for using it;

Svelte
Web Component

Import and Use

Import the HoverTilt component in your Svelte file:

<script>
  import { HoverTilt } from 'hover-tilt';
</script>

<HoverTilt>Your content here</HoverTilt>

This would look pretty bad, though, so let’s add a bit of styling to make it look better:

Basic Example

The content of the <HoverTilt /> component is passed as a slot, and can be anything you want.

<script>
  import {HoverTilt} from 'hover-tilt';
</script>

<HoverTilt tiltFactor={1.5} scaleFactor={1.1}>
  <div class="card">
    <h2>Card Title</h2>
    <p>Hover over this card to see the effect!</p>
  </div>
</HoverTilt>

<style>
  .card {
    width: 300px;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2rem;
    color: white;
  }
</style>

Preview

Include the Script

Add the Web Component script to your HTML page:

<html>
  <head>
    <!-- import the Web Component from the local node_modules folder -->
    <script type="module" src="node_modules/hover-tilt/dist/hover-tilt.js"></script>
  </head>
  <body>
    <hover-tilt>
      Your content here
    </hover-tilt>
  </body>
</html>

Using a CDN

You can also use a CDN to load the Web Component:

<!-- import the Web Component from a CDN -->
<script type="module" src="https://cdn.jsdelivr.net/npm/hover-tilt/dist/hover-tilt.js"></script>

Basic Example

Once the Web Component script is included, you can use it like this:

<hover-tilt tilt-factor="1.5" scale-factor="1.1">
  <div class="card">
    <h2>Card Title</h2>
    <p>Hover over this card to see the effect!</p>
  </div>
</hover-tilt>

<style>
  .card {
    width: 300px;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2rem;
    color: white;
  }
</style>

Preview

Card Title

Hover over this card to see the effect!

Next Steps

Learn about all the props and options available to customize the component
Dive into the CSS Class / Style reference for styling the component
Explore Usage Examples to see different props in action
Find help with advanced use-cases in the advanced section