Tilt Svelte A smooth 3D tilt Svelte Attachment		Version	v0.1.1
		Updated	2025-12-31
Author	Savy	License	MIT

Contents

• Introduction
• Installation
• Examples
• Basic Usage
• Glare Effect
• Reverse Tilt
• Keep floating
• Full page listening
• Scale on hover
• Start tilt position
• Disable X axis
• Disable Y axis
• Credits

Introduction

A smooth 3D tilt Svelte attachment based on vanilla-tilt.js

You can play around and test different options for the attachment in the Playground

Installation

The package is available on npm and jsr.

• Using npm

# If you are using npm
npm install @savy011/tilt-svelte

# if you are using pnpm
pnpm add @savy011/tilt-svelte

# if you are using Yarn
yarn add @savy011/tilt-svelte

# If you are using Bun
bun add @savy011/tilt-svelte

• Using jsr:

# if you are using a recent version of pnpm (>10.9)
pnpm install jsr:@savy011/tilt-svelte

# if you are using a recent version of Yarn (>4.9)
yarn add jsr:@savy011/tilt-svelte

# If you are using npm, an older version of pnpm or Yarn
npx jsr add @savy011/tilt-svelte
pnpm dlx jsr add @savy011/tilt-svelte
yarn dlx jsr add @savy011/tilt-svelte

# If you are using Bun
bunx jsr add @savy011/tilt-svelte

Examples

Basic Usage

1. Import tilt from the package.
2. Simply attach it to the target element using the `@attach` syntax

<script>
  import tilt from "@savy011/tilt-svelte";
</script>

<div {@attach tilt()}></div>

Glare Effect

Setting this option will enable a glare effect. You can tweak the glare value with "max-glare" option.

1. Import tilt.
2. Attach it to the target element.
3. Pass the config object with glare set to `true`.
4. Optionally pass max glare intensity.

<script>
  import tilt from "@savy011/tilt-svelte";
</script>

<div {@attach tilt({ glare: true, "max-glare": 0.8 })}></div>

Reverse Tilt

Setting this option will reverse the tilt.

<script>
  import tilt from "@savy011/tilt-svelte";
</script>

<div {@attach tilt({ reverse: true })}></div>

Keep floating

Setting this option will not reset the tilt element when the user mouse leaves the element.

<script>
  import tilt from "@savy011/tilt-svelte";
</script>

<div {@attach tilt({ reset: false })}></div>

Full page listening

Setting this option will make the element respond to any mouse movements on page.

<script>
  import tilt from "@savy011/tilt-svelte";
</script>

<div {@attach tilt({ "full-page-listening": true })}></div>

Scale on hover

Setting this option will scale tilt element on hover.

<script>
  import tilt from "@savy011/tilt-svelte";
</script>

<div {@attach tilt({ scale: 1.2 })}></div>

Start tilt position

Setting this option will tilt the element at specific degrees at page load. `reset-to-start` - on mouse leave will reset the position to [startX, startY]

<script>
  import tilt from "@savy011/tilt-svelte";
</script>

<div {@attach tilt({ startX: 20, startY: -20, "reset-to-start": true })}></div>

Disable X axis

Setting this option will disable the X-Axis on the tilt element.

<script>
  import tilt from "@savy011/tilt-svelte";
</script>

<div {@attach tilt({ axis: "y" })}></div>

Disable Y axis

Setting this option will disable the Y-Axis on the tilt element.

<script>
  import tilt from "@savy011/tilt-svelte";
</script>

<div {@attach tilt({ axis: "x" })}></div>

Credits

• Original idea: tilt.js
• Based on: vanilla-tilt
• Documentation styling using: The Monospace Web

---

↑