Usage in your framework

Because HoverTilt is available both as a Svelte Component (<HoverTilt />) and a Web Component (<hover-tilt />), you can use it in any framework or vanilla HTML.

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

This method would work for jQuery or other non-reactive JavaScript libraries.

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 could 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

Tilt me!

Import the Web Component and use

Here’s an example using the <hover-tilt> web component directly in your React app, binding the content to a state variable.

import React, { useState } from 'react';
import 'hover-tilt/web-component';

export function MyComponent() {
  const [msg, setMsg] = useState('Tilt me!');

  return (
    <>
      <hover-tilt tilt-factor="1.5" scale-factor="1.1" shadow>
        <div className="card">
          <h1>{msg}</h1>
        </div>
      </hover-tilt>

      <input
        value={msg}
        onChange={(event) => setMsg(event.target.value)}
        placeholder="Type a message..."
      />
    </>

);
}

Preview

View a React live demo here

Using the Web Component in Vue

Here’s an example using the <hover-tilt> web component in your Vue Single File Component and bind the content to a ref.

<script setup>
  import { ref } from 'vue'
  import 'hover-tilt';
  const msg = ref('Tilt me!')
</script>

<template>
  <hover-tilt>
    <div class="card">
      <h1>{{ msg }}</h1>
    </div>
  </hover-tilt>

  <input v-model="msg" placeholder="Type a message..." />
</template>

Preview

View a Vue live demo here

TypeScript Support

For TypeScript projects with Volar, you can also import hover-tilt/vue to enable template type-checking and IntelliSense at the app level.

import { createApp } from 'vue';
import App from './App.vue';

import 'hover-tilt'; // defines the custom element
import 'hover-tilt/vue'; // pulls in GlobalComponents typings (type-only)

createApp(App).mount('#app');

In Astro, you can use Hover Tilt in two ways: as a Svelte component or as a Web Component. Choose the approach that best fits your project.

Svelte Component
Web Component

Setup

To use Hover Tilt as a Svelte component in Astro, you’ll need to install the Svelte integration:

npx astro add svelte

This will automatically configure Astro to support Svelte components.

Import and Use

Import the HoverTilt component directly from the package:

import HoverTilt from 'hover-tilt/HoverTilt.svelte';

<HoverTilt client:only="svelte" 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>
</HoverTilt>

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

Import and Use

The Web Component approach doesn’t require any framework integration. Simply import the Web Component module in your Astro component’s frontmatter:

import 'hover-tilt/web-component';

<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>

The Web Component is automatically registered when you import 'hover-tilt/web-component', so you can use <hover-tilt> directly in your template.

Which Should I Use?

Svelte Component: Use this if you already have the Svelte integration installed, or if you want to use Svelte’s reactivity and component features alongside Hover Tilt.
Web Component: Use this if you want to keep your project lightweight, or if you’re not using Svelte elsewhere in your project. The Web Component works in any Astro component without additional setup.

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