Hover Tilt

https://hover-tilt.simey.me/
Admin
Hover Tilt is a component library that adds smooth tilt and glare effects to websites, available as...
Tokens:30,081
Snippets:241
Trust Score:7.4
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install hover-tilt with bun

Source: https://hover-tilt.simey.me/getting-started

Installs the hover-tilt package using the bun runtime and package manager. bun is a fast, all-in-one JavaScript toolkit.

```bash
bun add hover-tilt
```

--------------------------------

### Install hover-tilt with pnpm

Source: https://hover-tilt.simey.me/getting-started

Installs the hover-tilt package using the pnpm package manager. pnpm is known for its efficient disk space usage and faster installation times.

```bash
pnpm add hover-tilt
```

--------------------------------

### Install Svelte Integration for Astro

Source: https://hover-tilt.simey.me/usage

Provides the command to install the Svelte integration for Astro. This setup is necessary to use Svelte components, including Hover Tilt when configured as a Svelte component, within an Astro project.

```bash
npx astro add svelte
```

--------------------------------

### Install hover-tilt with npm

Source: https://hover-tilt.simey.me/getting-started

Installs the hover-tilt package using the npm package manager. This is the standard way to add JavaScript libraries to a project managed by npm.

```bash
npm install hover-tilt
```

--------------------------------

### Basic HoverTilt Web Component Example

Source: https://hover-tilt.simey.me/usage

Illustrates the basic usage of the Hover Tilt Web Component after its script has been included. It shows how to apply tilt and scale factors using HTML attributes and includes example styling for the content.

```html
<hover-tilt tilt-factor="1.5" scale-factor="1.1">
  <div class="card">
    <h2>Card Title</h2>
    <p>Hover over this card to see the effect!</p>
  </div>
</hover-tilt>


<style>
  .card {
    width: 300px;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2rem;
    color: white;
  }
</style>
```

--------------------------------

### Install hover-tilt with yarn

Source: https://hover-tilt.simey.me/getting-started

Installs the hover-tilt package using the yarn package manager. yarn is another popular choice for managing JavaScript dependencies.

```bash
yarn add hover-tilt
```

--------------------------------

### Basic Svelte Component with Hover Tilt

Source: https://hover-tilt.simey.me/getting-started

Demonstrates a basic implementation of the hover-tilt component within a Svelte application. It imports the HoverTilt component and applies it to a div with some internal content.

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


<HoverTilt>
  <div class="card">
    <h3>Basic Example</h3>
    <p>Hover over this card to see the default tilt effect</p>
  </div>
</HoverTilt>
```

--------------------------------

### Basic HoverTilt Svelte Example with Styling

Source: https://hover-tilt.simey.me/usage

Shows a basic Svelte example of the HoverTilt component with applied tilt and scale factors, along with custom CSS styling for the content inside the tiltable area. This allows for visually enhanced tilt effects.

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


<HoverTilt tiltFactor={1.5} scaleFactor={1.1}>
  <div class="card">
    <h2>Card Title</h2>
    <p>Hover over this card to see the effect!</p>
  </div>
</HoverTilt>


<style>
  .card {
    width: 300px;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2rem;
    color: white;
  }
</style>
```

--------------------------------

### Custom Hover Tilt Gradient Examples

Source: https://hover-tilt.simey.me/advanced/custom-gradient

This section provides various CSS examples for custom glare gradients that can be applied to the HoverTilt component. Each example demonstrates a different visual effect by utilizing CSS `calc()` and the `--gradient-x`, `--gradient-y` variables.

```css
/* Custom Colored Gradient */
:global(.custom-gradient) {
  --hover-tilt-custom-gradient: radial-gradient(
    circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
    rgba(125, 255, 194, calc(var(--hover-tilt-glare-intensity, 1) * 0.5)) 10%,
    rgba(255, 255, 255, 0) 80%,
    transparent 70%
  );
}


/* Specular Highlight */
:global(.specular-highlight) {
  --hover-tilt-custom-gradient: radial-gradient(
    80% 100% at var(--gradient-x, 50%) var(--gradient-y, 50%),
    rgb(255 255 255 / calc(var(--hover-tilt-glare-intensity, 1))) 50%,
    transparent 55%
  );
}


/* Aurora Sweep */
:global(.aurora-sweep) {
  --hover-tilt-custom-gradient: conic-gradient(
    from calc(var(--hover-tilt-angle, 0)) at center center,
    rgba(255, 255, 255, calc(var(--hover-tilt-glare-intensity, 1) * 0.9)),
    rgba(6, 182, 212, calc(var(--hover-tilt-glare-intensity, 1) * 0.7)),
    rgba(255, 255, 255, calc(var(--hover-tilt-glare-intensity, 1) * 0.9))
  );
}


/* Luminance Beam */
:global(.luminance-beam) {
  --hover-tilt-custom-gradient: linear-gradient(
    120deg,
    rgb(0 0 0 / 0) calc((var(--gradient-x, 50%) / 2 + var(--gradient-y, 50%) / 2) - 60%),
    rgb(249 218 173 / var(--hover-tilt-glare-intensity, 1)) calc((var(--gradient-x, 50%) / 2 + var(--gradient-y, 50%) / 2)),
    rgb(0 0 0 / 0) calc((var(--gradient-x, 50%) / 2 + var(--gradient-y, 50%) / 2) + 60%)
  );
}


/* Inverted Gradient */
:global(.inverted-gradient) {
  --hover-tilt-custom-gradient: radial-gradient(
    200% 200% at calc( var(--gradient-x, 50%) * 2 - 50% ) calc( var(--gradient-y, 50%) * 2 - 50% ),
    transparent 30%,
    rgb(255 255 255 / var(--hover-tilt-glare-intensity, 1)) 80%
  );
}
```

--------------------------------

### Simple Custom Shadow in Web Component

Source: https://hover-tilt.simey.me/advanced/custom-shadow

Example of implementing a simple custom shadow for the Hover Tilt component when used as a Web Component. It utilizes the `::part(container)` selector to target the component's internal structure.

```html
<hover-tilt class="simple-card" shadow scaleFactor={1.1} glareIntensity={0.3}>
  <div class="demo-card">
    Simple Custom Shadow
  </div>
</hover-tilt>


<style>
  /* access the .simple-card with the ::part(container) Web Component selector */
  .simple-card::part(container) {
    /* define the custom shadow */
    --hover-tilt-custom-shadow:
      hsl(210 75% 15% / 0.4) calc(var(--shadow-x) * 4px) calc(var(--shadow-y) * 6px + 6px) calc(10px + var(--hover-tilt-opacity, 0) * 12px) 0px,
      hsl(210 75% 15% / 0.4) calc(var(--shadow-x) * 4px) calc(var(--shadow-y) * 2px + 2px) calc(2px + var(--hover-tilt-opacity, 0) * 4px) 0px;
  }
</style>
```

--------------------------------

### Use HoverTilt Web Component in React

Source: https://hover-tilt.simey.me/usage

Provides an example of integrating the Hover Tilt Web Component within a React application. It shows how to import the component and bind its content to React state, allowing for dynamic updates.

```javascript
import React, { useState } from 'react';
import 'hover-tilt/web-component';


export function MyComponent() {
  const [msg, setMsg] = useState('Tilt me!');


  return (
    <>
      <hover-tilt tilt-factor="1.5" scale-factor="1.1" shadow>
        <div className="card">
          <h1>{msg}</h1>
        </div>
      </hover-tilt>


      <input
        value={msg}
        onChange={(event) => setMsg(event.target.value)}
        placeholder="Type a message..."
      />
    </>


);
}
```

--------------------------------

### Simple Custom Shadow in Svelte

Source: https://hover-tilt.simey.me/advanced/custom-shadow

Example of implementing a simple custom shadow for the Hover Tilt component within a Svelte application. It uses the `:global()` selector to apply styles to the component's container.

```svelte
<HoverTilt class="simple-card" shadow scaleFactor={1.1} glareIntensity={0.3}>
  <div class="demo-card">
    Simple Custom Shadow
  </div>
</HoverTilt>


<style>
  /* access the .simple-card with the :global() svelte selector */
  :global(.simple-card) {
    /* define the custom shadow */
    --hover-tilt-custom-shadow:
      hsl(210 75% 15% / 0.4) calc(var(--shadow-x) * 4px) calc(var(--shadow-y) * 6px + 6px) calc(10px + var(--hover-tilt-opacity, 0) * 12px) 0px,
      hsl(210 75% 15% / 0.4) calc(var(--shadow-x) * 4px) calc(var(--shadow-y) * 2px + 2px) calc(2px + var(--hover-tilt-opacity, 0) * 4px) 0px;
  }
</style>
```

--------------------------------

### Basic Hover Tilt Effect (Svelte & Web Component)

Source: https://hover-tilt.simey.me/examples/props

Demonstrates the fundamental usage of the HoverTilt component. It applies a subtle tilt effect to the content within the component when the user hovers over it. This example shows the simplest implementation with default properties.

```svelte
<HoverTilt>
  <div class="card">
    <h3>Basic Example</h3>
    <p>Hover over this card to see the default tilt effect</p>
  </div>
</HoverTilt>
```

```html
<hover-tilt>
  <div class="card">
    <h3>Basic Example</h3>
    <p>Hover over this card to see the default tilt effect</p>
  </div>
</hover-tilt>
```

--------------------------------

### Configuring Glare Intensity and Hue (Svelte & Web Component)

Source: https://hover-tilt.simey.me/examples/props

Explains how to customize the glare effect, which follows the cursor and adds lighting. The `glareIntensity` prop controls the brightness of the glare, and `glareHue` can be used to adjust its color for a personalized aesthetic.

```svelte
<!-- Default Glare -->
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<!-- Subtler Glare -->
<HoverTilt glareIntensity={0.5}>
  <div class="card">glareIntensity: 0.5</div>
</HoverTilt>


<!-- Custom Glare Hue -->
<HoverTilt glareIntensity={0.8} glareHue="blue">
  <div class="card">glareIntensity: 0.8, glareHue: blue</div>
</HoverTilt>
```

```html
<!-- Default Glare -->
<hover-tilt>
  <div class="card">Default</div>
</hover-tilt>


<!-- Subtler Glare -->
<hover-tilt glare-intensity="0.5">
  <div class="card">glare-intensity: 0.5</div>
</hover-tilt>


<!-- Custom Glare Hue -->
<hover-tilt glare-intensity="0.8" glare-hue="blue">
  <div class="card">glare-intensity: 0.8, glare-hue: blue</div>
</hover-tilt>
```

--------------------------------

### Import and Use HoverTilt Web Component

Source: https://hover-tilt.simey.me/usage

Integrate the Hover Tilt Web Component into any Astro project without framework-specific setup by importing 'hover-tilt/web-component'. This registers the `<hover-tilt>` custom element, allowing direct use in templates with customizable props like 'tilt-factor' and 'scale-factor'.

```html
import 'hover-tilt/web-component';


<hover-tilt tilt-factor="1.5" scale-factor="1.1">
  <div class="card">
    <h2>Card Title</h2>
    <p>Hover over this card to see the effect!</p>
  </div>
</hover-tilt>


<style>
  .card {
    width: 300px;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2rem;
    color: white;
  }
</style>
```

--------------------------------

### Apply Hover Tilt Web Component to DOM

Source: https://hover-tilt.simey.me/examples/web-component

Applies the Hover Tilt Web Component to an element in the DOM. This example shows how to use the custom `<hover-tilt>` tag with attributes like `shadow` and `scale-factor` to customize the tilt effect.

```html
<hover-tilt shadow scale-factor="1.2">
  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <h3>Basic Example</h3>
    <p>Hover over this card to see the default tilt effect</p>
  </div>
</hover-tilt>
```

--------------------------------

### Apply PNG Mask with Luminance Mode (Svelte/Web Component)

Source: https://hover-tilt.simey.me/advanced/glare-masks

This example demonstrates applying a PNG mask to the glare effect using the 'luminance' mode. It shows how to reference a monochrome PNG asset for the mask and set the appropriate glareMaskMode. This is suitable for black & white PNG masks.

```svelte
<HoverTilt class="foil-card" glareMask="url(/aztec-pattern.webp)" glareMaskMode="luminance">
  Your content here
</HoverTilt>
```

```html
<hover-tilt class="foil-card" glare-mask="url(/aztec-pattern.webp)" glare-mask-mode="luminance">
  Your content here
</hover-tilt>
```

--------------------------------

### Implementing Shadow Effects on Hover (Svelte & Web Component)

Source: https://hover-tilt.simey.me/examples/props

Shows how to enable and customize dynamic shadow effects that follow the cursor during hover using the `shadow` and `shadowBlur` props. The `shadow` prop activates the effect, while `shadowBlur` controls its intensity, providing a dynamic visual enhancement.

```svelte
<!-- No shadow -->
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<!-- With shadow -->
<HoverTilt shadow>
  <div class="card">shadow</div>
</HoverTilt>


<!-- Custom shadow blur -->
<HoverTilt shadow shadowBlur={60}>
  <div class="card">shadowBlur: 60</div>
</HoverTilt>
```

```html
<!-- No shadow -->
<hover-tilt>
  <div class="card">Default</div>
</hover-tilt>


<!-- With shadow -->
<hover-tilt shadow>
  <div class="card">shadow</div>
</hover-tilt>


<!-- Custom shadow blur -->
<hover-tilt shadow shadow-blur="60">
  <div class="card">shadow-blur: 60</div>
</hover-tilt>
```

--------------------------------

### Configure Enter Delay for Hover Tilt Component

Source: https://hover-tilt.simey.me/examples/props

Control the delay before the hover tilt animation activates using the `enterDelay` prop. This prevents flickering by waiting for sustained cursor entry. The default is 0ms.

```html
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<HoverTilt enterDelay={300}>
  <div class="card">enterDelay: 300ms</div>
</HoverTilt>
```

```html
<hover-tilt>
  <div class="card">Default</div>
</hover-tilt>


<hover-tilt enter-delay="300">
  <div class="card">enter-delay: 300ms</div>
</hover-tilt>
```

--------------------------------

### Configure Exit Delay for Hover Tilt Component

Source: https://hover-tilt.simey.me/examples/props

Adjust the delay before the component returns to its default state after the cursor leaves using the `exitDelay` prop. This allows for smoother transitions. The default is 200ms.

```html
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<HoverTilt exitDelay={1000}>
  <div class="card">exitDelay: 1000ms</div>
</HoverTilt>


<HoverTilt exitDelay={0}>
  <div class="card">exitDelay: 0ms</div>
</HoverTilt>
```

```html
<hover-tilt>
  <div class="card">Default</div>
</hover-tilt>


<hover-tilt exit-delay="1000">
  <div class="card">exit-delay: 1000ms</div>
</hover-tilt>


<hover-tilt exit-delay="0">
  <div class="card">exit-delay: 0ms</div>
</hover-tilt>
```

--------------------------------

### Apply SVG Mask with Alpha Mode (Svelte/Web Component)

Source: https://hover-tilt.simey.me/advanced/glare-masks

This example demonstrates using a transparent SVG sourced from a local folder as a glare mask with the 'alpha' mode. It highlights how to link an SVG file and use 'alpha' mode when the SVG has a transparent background.

```svelte
<HoverTilt class="mask-card" glareMask="url(/circuit-board.svg)" glareMaskMode="alpha">
  Your content here
</HoverTilt>
```

```html
<hover-tilt class="mask-card" glare-mask="url(/circuit-board.svg)" glare-mask-mode="alpha">
  Your content here
</hover-tilt>
```

--------------------------------

### Configure Blend Mode for Hover Tilt Component

Source: https://hover-tilt.simey.me/examples/props

Customize how the glare effect integrates with the content using the `blendMode` prop. This prop accepts various CSS blend modes such as 'overlay', 'screen', 'multiply', etc. The default is 'overlay'.

```html
<HoverTilt>
  <div class="card">Default (overlay)</div>
</HoverTilt>


<HoverTilt blendMode="color-dodge">
  <div class="card">blendMode: color-dodge</div>
</HoverTilt>


<HoverTilt blendMode="plus-lighter">
  <div class="card">blendMode: plus-lighter</div>
</HoverTilt>
```

```html
<hover-tilt>
  <div class="card">Default (overlay)</div>
</hover-tilt>


<hover-tilt blend-mode="luminosity">
  <div class="card">blend-mode: luminosity</div>
</hover-tilt>


<hover-tilt blend-mode="plus-lighter">
  <div class="card">blend-mode: plus-lighter</div>
</hover-tilt>
```

--------------------------------

### Svelte Neon Underglow with Hover Tilt

Source: https://hover-tilt.simey.me/advanced/custom-shadow

Implements a neon underglow shadow effect in Svelte using the HoverTilt component. This example defines custom shadow styles within a Svelte style block, accessible via the :global() selector.

```svelte
<HoverTilt class="neon-card" shadow scaleFactor={1.1} glareIntensity={0.3}>
  <div class="demo-card">
    Neon Underglow
  </div>
</HoverTilt>


<style>
  /* access the .neon-card with the :global() svelte selector */
  :global(.neon-card) {
    /* define the custom shadow */
    --hover-tilt-custom-shadow:
      hsl(322 87% 56% / calc(var(--hover-tilt-opacity, 0) * 0.41 + 0.05)) calc(var(--shadow-x) * 2px) calc(var(--shadow-y) * 4px + 1px) 0px 2px,
      hsl(322 87% 56% / calc(var(--hover-tilt-opacity, 0) * 0.31 + 0.05)) calc(var(--shadow-x) * 4px) calc(var(--shadow-y) * 8px + 2px) 0px 4px,
      hsl(322 87% 56% / calc(var(--hover-tilt-opacity, 0) * 0.21 + 0.05)) calc(var(--shadow-x) * 6px) calc(var(--shadow-y) * 12px + 3px) 0px 6px,
      hsl(322 87% 56% / calc(var(--hover-tilt-opacity, 0) * 0.11 + 0.05)) calc(var(--shadow-x) * 8px) calc(var(--shadow-y) * 16px + 4px) 0px 8px,
      hsl(322 87% 56% / calc(var(--hover-tilt-opacity, 0) * 0.05 + 0.05)) calc(var(--shadow-x) * 10px) calc(var(--shadow-y) * 20px + 5px) 0px 10px;
  }
</style>
```

--------------------------------

### Applying Scale Effects on Hover (Svelte & Web Component)

Source: https://hover-tilt.simey.me/examples/props

Demonstrates how to add a scaling effect to the hovered element using the `scaleFactor` prop. This prop allows for adjusting the size of the element during the hover state, from no scaling to prominent or even negative scaling.

```svelte
<!-- No scale -->
<HoverTilt scaleFactor={1}>
  <div class="card">scaleFactor: 1</div>
</HoverTilt>


<!-- Subtle scale -->
<HoverTilt scaleFactor={1.05}>
  <div class="card">scaleFactor: 1.05</div>
</HoverTilt>


<!-- Prominent scale -->
<HoverTilt scaleFactor={1.2}>
  <div class="card">scaleFactor: 1.2</div>
</HoverTilt>


<!-- Negative scale -->
<HoverTilt scaleFactor={0.9}>
  <div class="card">scaleFactor: 0.9</div>
</HoverTilt>
```

```html
<!-- No scale -->
<hover-tilt scale-factor="1">
  <div class="card">scale-factor: 1</div>
</hover-tilt>


<!-- Subtle scale -->
<hover-tilt scale-factor="1.05">
  <div class="card">scale-factor: 1.05</div>
</hover-tilt>


<!-- Prominent scale -->
<hover-tilt scale-factor="1.2">
  <div class="card">scale-factor: 1.2</div>
</hover-tilt>


<!-- Negative scale -->
<hover-tilt scale-factor="0.9">
  <div class="card">scale-factor: 0.9</div>
</hover-tilt>
```

--------------------------------

### Configure Spring Animations for HoverTilt

Source: https://hover-tilt.simey.me/examples/props

Enables fine-tuning of animation physics for the hover tilt effect using springOptions. Users can adjust stiffness and damping to alter the feel of the interaction, making it more 'boing-y' or smoother. This functionality is available for Svelte and Web Components, with Web Components requiring JSON string values for options.

```svelte
<!-- Default spring -->
<HoverTilt scaleFactor={1.1} >
  <div class="card"></div>
</HoverTilt>


<!-- Fast spring -->
<HoverTilt scaleFactor={1.1} springOptions={{ stiffness: 0.4, damping: 0.3 }}>
  <div class="card"></div>
</HoverTilt>


<!-- Slow spring -->
<HoverTilt scaleFactor={1.1}  springOptions={{ stiffness: 0.05, damping: 0.9 }}>
  <div class="card"></div>
</HoverTilt>
```

```webcomponent
<!-- Default spring -->
<hover-tilt scale-factor="1.1">
  <div class="card"></div>
</hover-tilt>


<!-- Fast spring (requires JSON string) -->
<hover-tilt scale-factor="1.1" spring-options='{"stiffness": 0.4, "damping": 0.3}'>
  <div class="card"></div>
</hover-tilt>


<!-- Slow spring (requires JSON string) -->
<hover-tilt scale-factor="1.1" spring-options='{"stiffness": 0.05, "damping": 0.9}'>
  <div class="card"></div>
</hover-tilt>
```

--------------------------------

### Customize Tilt Spring Options Independently

Source: https://hover-tilt.simey.me/examples/props

Provides separate control over the spring physics for tilt animations using tiltSpringOptions, distinct from the general springOptions. This allows for nuanced interactions, such as a bouncy scale with a soft tilt. Supported in Svelte and Web Components, with Web Components requiring JSON string values for these options.

```svelte
<!-- Default spring -->
<HoverTilt scaleFactor={1.1} >
  <div class="card"></div>
</HoverTilt>


<!-- Fast spring -->
<HoverTilt scaleFactor={1.1} springOptions={{ stiffness: 0.08, damping: 0.15 }} tiltSpringOptions={{ stiffness: 0.1, damping: 0.2 }}>
  <div class="card"></div>
</HoverTilt>


<!-- Slow spring -->
<HoverTilt scaleFactor={1.1}  springOptions={{ stiffness: 0.05, damping: 0.5 }} tiltSpringOptions={{ stiffness: 0.1, damping: 0.075 }}>
  <div class="card"></div>
</HoverTilt>
```

```webcomponent
<!-- Default spring -->
<hover-tilt scale-factor="1.1">
  <div class="card"></div>
</hover-tilt>


<!-- Bouncey Scale, Soft Tilt -->
<hover-tilt scale-factor="1.1" spring-options='{"stiffness": 0.08, "damping": 0.15}' tilt-spring-options='{"stiffness": 0.1, "damping": 0.2}'>
  <div class="card"></div>
</hover-tilt>


<!-- Soft Scale, Elastic Tilt -->
<hover-tilt scale-factor="1.1" spring-options='{"stiffness": 0.05, "damping": 0.5}' tilt-spring-options='{"stiffness": 0.1, "damping": 0.075}'>
  <div class="card"></div>
</hover-tilt>
```

--------------------------------

### Apply CSS Gradient Mask with Alpha Mode (Svelte/Web Component)

Source: https://hover-tilt.simey.me/advanced/glare-masks

This example shows how to use a CSS repeating-radial-gradient as a glare mask with the 'alpha' mode. It illustrates the flexibility of using CSS gradients for masking effects and how to apply the 'alpha' mode for transparency interpretation.

```svelte
<HoverTilt
  class="mask-card"
  glareMask="repeating-radial-gradient(circle at 30% 30%, #fff, #fff 12px, #fff0 12px, #fff0 24px)"
  glareMaskMode="alpha"
>
  Your content here
</HoverTilt>
```

```html
<hover-tilt
  class="mask-card"
  glare-mask="repeating-radial-gradient(circle at 30% 30%, #fff, #fff 12px, #fff0 12px, #fff0 24px)"
  glare-mask-mode="alpha"
>
  Your content here
</hover-tilt>
```

--------------------------------

### SV Era ex Holo Card Tilt with CSS Pseudo-element

Source: https://hover-tilt.simey.me/bespoke/pokemon-cards

Simulates the SV Era ex card effect using a linear gradient and a star-pattern image applied via a CSS pseudo-element (`::after`). It leverages background blending and mix-blend modes for the holo effect, with dynamic positioning of the holo image based on tilt.

```html
<hover-tilt
  shadow
  scale-factor={1.1}
  glare-mask="url(/pokemon/sv9_en_056_std.foil.webp)"
  glare-mask-mode="luminance"
  glare-intensity={1.5}
  blend-mode="hard-light"
  class="ex-holo [&::part(container)]:rounded-[4.55%/3.5%]"
>

  <img
    src="/pokemon/sv9_en_056_std.webp"
    alt="Pokémon Lillie's Clefairy (ex Holo)"
    loading="lazy"
    class="rounded-[inherit]"
  />
</hover-tilt>


<style>
  .ex-holo::part(tilt)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
      url(https://poke-holo.b-cdn.net/foils/151/birthday-holo-dank-2.webp),
      var(--hover-tilt-default-gradient);
    background-size: 120% 160%, cover;
    background-position:
      calc(50% + var(--hover-tilt-x, 0) * 5px)
      calc(50% + var(--hover-tilt-y, 0) * 5px),
      center;
    background-repeat: no-repeat;
    background-blend-mode: color-burn;
    mix-blend-mode: soft-light;
    opacity: calc(var(--hover-tilt-opacity, 0) * 0.75);
    will-change: background-image, opacity;
  }
</style>
```

--------------------------------

### Controlling Tilt Intensity with tiltFactor and tiltFactorY (Svelte & Web Component)

Source: https://hover-tilt.simey.me/examples/props

Illustrates how to control the intensity and direction of the tilt effect using the `tiltFactor` and `tiltFactorY` props. `tiltFactor` affects both axes, while `tiltFactorY` specifically modifies the vertical tilt, allowing for customized tilt behavior.

```svelte
<!-- Default tilt -->
<HoverTilt>
  <div class="card">tiltFactor: 1</div>
</HoverTilt>


<!-- Increased tilt -->
<HoverTilt tiltFactor={2}>
  <div class="card">tiltFactor: 2</div>
</HoverTilt>


<!-- Different Y tilt -->
<HoverTilt tiltFactor={1.5} tiltFactorY={0.5}>
  <div class="card">tiltFactor: 1.5, tiltFactorY: 0.5</div>
</HoverTilt>
```

```html
<!-- Default tilt -->
<hover-tilt>
  <div class="card">tilt-factor: 1</div>
</hover-tilt>


<!-- Increased tilt -->
<hover-tilt tilt-factor="2">
  <div class="card">tilt-factor: 2</div>
</hover-tilt>


<!-- Different Y tilt -->
<hover-tilt tilt-factor="1.5" tilt-factor-y="0.5">
  <div class="card">tilt-factor: 1.5, tilt-factor-y: 0.5</div>
</hover-tilt>
```

--------------------------------

### Customize Glare Hue with HoverTilt

Source: https://hover-tilt.simey.me/examples/props

Allows customization of the glare effect's hue using the glareHue prop. This prop takes a numerical value to define the hue, offering subtle color variations. It is supported in both Svelte and Web Component implementations.

```svelte
<!-- Default hue (lavender-ish) -->
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<!-- Custom hue (red) -->
<HoverTilt glareHue={20}>
  <div class="card">glareHue: 20</div>
</HoverTilt>
```

```webcomponent
<!-- Default hue (lavender-ish) -->
<hover-tilt>
  <div class="card">Default</div>
</hover-tilt>


<!-- Custom hue (red) -->
<hover-tilt glare-hue="20">
  <div class="card">glare-hue: 20</div>
</hover-tilt>
```

--------------------------------

### Card with Multiple Glare Masks using Hover Tilt

Source: https://hover-tilt.simey.me/bespoke/pokemon-cards

This snippet demonstrates creating a card effect with multiple, overlapping foil masks using the hover-tilt component. It utilizes multiple `glare-mask` values combined with `glare-mask-composite='intersect'` to ensure only the overlapping areas are illuminated. The `glare-intensity`, `scale-factor`, and `shadow-blur` are increased to exaggerate the visual effect.

```html
<hover-tilt
  shadow
  shadow-blur={60}
  scale-factor={1.5}
  glare-mask="url(/pokemon/sv8-5_en_074_mph.etch.png), url(/pokemon/sv8-5_en_074_mph.foil.webp)"
  glare-mask-mode="luminance"
  glare-intensity={4}
  glare-mask-composite="intersect"
  blend-mode="luminosity"
  class="[&::part(container)]:rounded-[4.55%/3.5%]"
>
  <img
    src="/pokemon/sv8-5_en_074_std.webp"
    alt="Pokémon #0133: Eevee Reverse Holo Masterball"
    loading="lazy"
    class="rounded-[inherit]"
  />
</hover-tilt>
```

--------------------------------

### Special Illustration Art Card with Hover Tilt

Source: https://hover-tilt.simey.me/bespoke/pokemon-cards

This snippet demonstrates creating a special illustration art card effect using the hover-tilt component. It layers a rainbow gradient, sparkles image, and glare gradient with specific blend modes and opacity. The `will-change` CSS property is utilized for performance optimization. It takes an image source and applies various hover effects.

```html
<hover-tilt
  shadow
  scale-factor={1.2}
  glare-mask="url(/pokemon/sv9_en_184_std.foil.webp)"
  glare-mask-mode="luminance"
  glare-intensity={3}
  blend-mode="hard-light"
  class="sparkles [&::part(container)]:rounded-[4.55%/3.5%]"
>
  <img
    src="/pokemon/sv9_en_184_std.webp"
    alt="Pokémon Trainer Lille's Clefairy (Special Illustration Art)"
    loading="lazy"
    class="rounded-[inherit]"
  />
</hover-tilt>


<style>
  .sparkles::part(tilt)::before {
    --sparkle-rainbow-gradient: linear-gradient(to top left, #f9b3eb, #e2a6fc, #88a2f8, #a2f5a9 90%);
    --sparkles-image: url(/pokemon/sparkles.webp);
    --sparkles-offset: calc(50% + var(--hover-tilt-x, 0) * 1.5px) calc(50% + var(--hover-tilt-y, 0) * 1.5px);
    background-image:
      var(--sparkle-rainbow-gradient),
      var(--sparkles-image),
      var(--hover-tilt-default-gradient);
    background-size: cover, 200px 200px, cover;
    background-position: center, var(--sparkles-offset), center;
    background-repeat: no-repeat, repeat, no-repeat;
    background-blend-mode: color-burn, color-dodge;
    opacity: calc(var(--hover-tilt-opacity, 0) * 0.6);
    will-change: background-image, background-position, opacity;
  }
</style>
```

--------------------------------

### HTML Structure for Hover Tilt Card with Multiple Masks

Source: https://hover-tilt.simey.me/bespoke/pokemon-cards

This HTML snippet defines the structure of a hover-tilt card component. It utilizes custom properties and nested elements to apply complex visual effects like glare and etching masks. The component relies on external assets for mask images and specific styling classes.

```html
<hover-tilt
  shadow
  shadow-blur={60}
  scale-factor={1.2}
  glare-mask="url(/pokemon/sv8-5_en_059_mph.foil.webp)"
  glare-mask-mode="luminance"
  glare-mask-composite="intersect"
  blend-mode="hard-light"
  class="reverse-ball [&::part(container)]:rounded-[4.55%/3.5%] hover:z-10"
  style="--hover-tilt-etch-image: url(/pokemon/sv8-5_en_059_mph.etch.webp);"
>
  <img
    src="/pokemon/sv8-5_en_059_std.webp"
    alt="Pokémon #0197: Umbreon Reverse Holo Masterball"
    loading="lazy"
    class="rounded-[inherit]"
  />
  <div class="reverse-ball-etch"></div>
</hover-tilt>
```

--------------------------------

### Basic Pokémon Card Tilt

Source: https://hover-tilt.simey.me/bespoke/pokemon-cards

Applies a basic tilt effect to a Pokémon card image. It wraps the image in a hover-tilt component and uses TailwindCSS for rounded corners on the container, which are inherited by the inner parts of the web component.

```html
<hover-tilt
  shadow
  class="[&::part(container)]:rounded-[4.55%/3.5%]"
>
  <img
    src="/pokemon/sv3-5_en_035_std.webp"
    alt="Pokémon #0035: Clefairy"
    loading="lazy"
    class="rounded-[inherit]"
  />
</hover-tilt>
```

--------------------------------

### Include HoverTilt Web Component Script Locally

Source: https://hover-tilt.simey.me/usage

Explains how to include the Hover Tilt Web Component script directly from your local 'node_modules' folder in an HTML file. This method requires the 'hover-tilt.js' file to be accessible via the specified path.

```html
<html>
  <head>
    <!-- import the Web Component from the local node_modules folder -->
    <script type="module" src="node_modules/hover-tilt/dist/hover-tilt.js"></script>
  </head>
  <body>
    <hover-tilt>
      Your content here
    </hover-tilt>
  </body>
</html>
```

--------------------------------

### Include HoverTilt Web Component Script via CDN

Source: https://hover-tilt.simey.me/usage

Demonstrates how to load the Hover Tilt Web Component using a Content Delivery Network (CDN). This is a convenient way to include the component without needing to manage local files.

```html
<!-- import the Web Component from a CDN -->
<script type="module" src="https://cdn.jsdelivr.net/npm/hover-tilt/dist/hover-tilt.js"></script>
```

--------------------------------

### Complete Custom Shadow Implementation (Svelte & Web Component)

Source: https://hover-tilt.simey.me/advanced/custom-shadow

This is the final consolidated code for a basic custom shadow implementation using CSS variables. It combines dynamic positioning and opacity control for the shadow effect, compatible with both Svelte and Web Component targets.

```svelte
:global(.simple-card) {
  --hover-tilt-custom-shadow:
    calc(var(--shadow-x) * 10px) calc(var(--shadow-y) * 10px + 5px) 5px 10px
      hsl(0 0% 0% / calc(var(--hover-tilt-opacity, 0) * 0.5 + 0.2));
}

```

```css
.simple-card::part(container) {
  --hover-tilt-custom-shadow:
    calc(var(--shadow-x) * 10px) calc(var(--shadow-y) * 10px + 5px) 5px 10px
      hsl(0 0% 0% / calc(var(--hover-tilt-opacity, 0) * 0.5 + 0.2));
}

```

--------------------------------

### Control Glare Intensity with HoverTilt

Source: https://hover-tilt.simey.me/examples/props

Adjusts the intensity of the glare effect on the hover tilt component. The glareIntensity prop accepts a number, with higher values resulting in a more intense glare. This feature is available for both Svelte and Web Component versions.

```svelte
<HoverTilt>
  <div class="card">Default</div>
</HoverTilt>


<HoverTilt glareIntensity={0.5}>
  <div class="card">glareIntensity: 0.5</div>
</HoverTilt>


<HoverTilt glareIntensity={1.5}>
  <div class="card">glareIntensity: 1.5</div>
</HoverTilt>
```

```webcomponent
<hover-tilt>
  <div class="card">Default</div>
</hover-tilt>


<hover-tilt glare-intensity="0.5">
  <div class="card">glare-intensity: 0.5</div>
</hover-tilt>


<hover-tilt glare-intensity="1.5">
  <div class="card">glare-intensity: 1.5</div>
</hover-tilt>
```

--------------------------------

### Import and Use HoverTilt in Svelte

Source: https://hover-tilt.simey.me/usage

Demonstrates how to import and use the HoverTilt Svelte component. It requires importing the component from the 'hover-tilt' package and then using it as a custom element. The content to be tilted is passed as children.

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


<HoverTilt>Your content here</HoverTilt>
```

--------------------------------

### Use HoverTilt Web Component in Vue

Source: https://hover-tilt.simey.me/usage

Demonstrates how to use the Hover Tilt Web Component in a Vue Single File Component. It shows how to import the component and bind its content to a Vue ref for reactive updates, along with a note on potential Vue component resolution warnings.

```vue
<script setup>
  import { ref } from 'vue'
  import 'hover-tilt';
  const msg = ref('Tilt me!')
</script>


<template>
  <hover-tilt>
    <div class="card">
      <h1>{{ msg }}</h1>
    </div>
  </hover-tilt>


  <input v-model="msg" placeholder="Type a message..." />
</template>
```

--------------------------------

### Enable Custom Shadow with 'shadow' Prop (Svelte & Web Component)

Source: https://hover-tilt.simey.me/advanced/custom-shadow

This code demonstrates how to enable the dynamic shadow feature in the HoverTilt component by applying the 'shadow' prop. This action instructs the component to render the shadow layer and emit the necessary CSS variables for customization.

```svelte
<HoverTilt class="simple-card" shadow> ... </HoverTilt>

```

```html
<hover-tilt class="simple-card" shadow> ... </hover-tilt>

```

--------------------------------

### Configure Tilt Animation Physics

Source: https://hover-tilt.simey.me/options/props

Provides separate physics options for tilt animations, allowing different animation feels from scale/opacity. Accepts an object with optional 'stiffness' and 'damping' numbers, or undefined. Defaults to 'springOptions'.

```svelte
<HoverTilt tiltSpringOptions={{ stiffness: 0.3, damping: 0.7 }}>
```

```html
<hover-tilt tilt-spring-options='{"stiffness": 0.3, "damping": 0.7}'>
```

--------------------------------

### Full Art Foil Pokémon Card Tilt

Source: https://hover-tilt.simey.me/bespoke/pokemon-cards

Generates a full art foil effect for a Pokémon card with a metallic sheen. It uses a complex glare mask, a 'hard-light' blend mode, and a controlled glare intensity, along with a scale factor for an enhanced tilt.

```html
<hover-tilt
  shadow
  scale-factor={1.1}
  glare-mask="url(/pokemon/me1_en_169_std.foil.webp)"
  glare-mask-mode="luminance"
  glare-intensity={2}
  blend-mode="hard-light"
  class="[&::part(container)]:rounded-[4.55%/3.5%]"
>
  <img
    src="/pokemon/me1_en_169_std.webp"
    alt="Pokémon Trainer Lillie (Full Art)"
    loading="lazy"
    class="rounded-[inherit]"
  />
</hover-tilt>
```

--------------------------------

### Load Hover Tilt Web Component

Source: https://hover-tilt.simey.me/examples/web-component

Loads the Hover Tilt Web Component script from a CDN. This script enables the custom element without needing any framework or build process.

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/hover-tilt/dist/hover-tilt.js"></script>
```

--------------------------------

### Reverse Holo Pokémon Card Tilt with Glare Mask

Source: https://hover-tilt.simey.me/bespoke/pokemon-cards

Creates a reverse holographic effect on a Pokémon card using the `glare-mask` prop. It specifies a luminance-based mask and sets the blend mode to 'luminosity' for a shiny effect. Note: Safari has rendering issues with luminance-based masks.

```html
<hover-tilt
  shadow
  glare-mask="url(/pokemon/sv3-5_en_035_ph.foil.webp)"
  glare-mask-mode="luminance"
  glare-intensity={4}
  blend-mode="luminosity"
  class="[&::part(container)]:rounded-[4.55%/3.5%]"
>
  <img
    src="/pokemon/sv3-5_en_035_std.webp"
    alt="Pokémon #0035: Clefairy Reverse Holo"
    loading="lazy"
    class="rounded-[inherit]"
  />
</hover-tilt>
```

--------------------------------

### HTML Structure for Custom Glare - HTML

Source: https://hover-tilt.simey.me/bespoke/stacked-3d

Sets up the necessary HTML structure for applying a custom glare effect. It uses nested divs and an img tag, with a comment indicating the use of an ::after pseudo-element for the glare.

```html
<div class="stacked-3d-custom-bg">
  <img src="bikini-bottom.jpg" alt="Bikikin Bottom" class="stacked-3d-bg rounded-2xl" />
  <!-- we'll use an ::after pseudo-element to apply the glare effect -->
</div>
```
Tokens:
Raw