Hover Tilt

A simple, flexible tilt & glare component for Svelte 5.
Available as both a Svelte Component and Web Component.
Works with any framework or vanilla JavaScript via the Web Component.

Documentation

Getting Started - Installation and basic usage
Full Documentation - Complete API reference and examples

Installation

npm install hover-tilt
# or
pnpm add hover-tilt
# or
yarn add hover-tilt
# or
bun add hover-tilt

Quick Start

Svelte Component

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

<HoverTilt tiltFactor={1.5} scaleFactor={1.1}>
  <div class="card">Your content here</div>
</HoverTilt>

Web Component

Works in any framework or vanilla HTML:

<script type="module" src="node_modules/hover-tilt/dist/hover-tilt.js"></script>

<hover-tilt tilt-factor="1.5" scale-factor="1.1">
  <div class="card">Your content here</div>
</hover-tilt>

With Vue

<script setup>
import 'hover-tilt/web-component';
</script>

<template>
  <hover-tilt tilt-factor="1.5" scale-factor="1.1">
    <div class="card">Your content here</div>
  </hover-tilt>
</template>

With React

import 'hover-tilt/web-component';

function MyComponent() {
  return (
    <hover-tilt tilt-factor="1.5" scale-factor="1.1">
      <div className="card">Your content here</div>
    </hover-tilt>
  );
}

With jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="module" src="node_modules/hover-tilt/dist/hover-tilt.js"></script>

<hover-tilt tilt-factor="1.5" scale-factor="1.1">
  <div class="card">Your content here</div>
</hover-tilt>

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

License

MPL-2.0

Author

Simon Goellner (@simeydotme)