Tilt Svelte

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

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

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

Advanced examples for the package are available on the project homepage

Credits

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