Svelte Hover Tilt

A beautiful hover tilt effect component for Svelte 5, available as both a Svelte Component and Web Component.
Works with any framework or vanilla JavaScript via the Web Component.

[!NOTE] Looking for the <HoverTilt /> component documentation?
👉 View the hover-tilt package README for installation, usage, and API details.

Features

• Svelte 5 Component - Native Svelte Component with full TypeScript support
• Web Component - Use it in any framework (Vue, React, Angular) or vanilla HTML/jQuery
• Framework Agnostic - Works everywhere via standard Web Components
• Spring Animations - Smooth, physics-based animations using Svelte's spring store
• Customizable - Extensive props for tilt, scale, glare, shadow, and more
• TypeScript - Full type definitions exported for your IDE
• Lightweight - Minimal dependencies, optimized bundle size

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

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

<script setup>
    // Import the web component
    import 'hover-tilt/dist/hover-tilt.js';
</script>

With React

import 'hover-tilt/dist/hover-tilt.js';

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>

Documentation

• Full Documentation - Complete API reference and examples

Monorepo Structure

This repository is a monorepo containing:

• packages/hover-tilt - The main library package
• apps/docs - Documentation site built with Astro + Starlight

Development

Prerequisites

• Node.js 20+
• pnpm 10+

Setup

# Install dependencies
pnpm install

Scripts

Development

# Run dev server for packages only (library)
pnpm dev

# Run dev servers for all packages and apps (library, docs)
pnpm dev:all

Build

# Build packages only
pnpm build

# Build all packages and apps
pnpm build:all

Lint

# Lint packages only
pnpm lint

# Lint all packages and apps
pnpm lint:all

Format

# Format packages only
pnpm format

# Format all packages and apps
pnpm format:all

Type Check

# Type check packages only
pnpm check

# Type check all packages and apps
pnpm check:all

Running Individual Packages

If you need to run a specific package directly:

# Library
pnpm --filter hover-tilt dev

# Documentation
pnpm --filter ./apps/docs dev

Contributing

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

License

MPL-2.0

Author

Simon Goellner (@simeydotme)