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.
- Getting Started - Installation and basic usage
- Full Documentation - Complete API reference and examples
npm install hover-tilt
# or
pnpm add hover-tilt
# or
yarn add hover-tilt
# or
bun add hover-tilt<script>
import { HoverTilt } from 'hover-tilt';
</script>
<HoverTilt tiltFactor={1.5} scaleFactor={1.1}>
<div class="card">Your content here</div>
</HoverTilt>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><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>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>
);
}<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>We welcome contributions! Please see CONTRIBUTING.md for guidelines.
MPL-2.0
Simon Goellner (@simeydotme)