Melt card

A picture tears and melts as the pointer moves, then pulls itself back together.

enhancer
pointer
image
distortion
card
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Melt card example

An evening sky over layered hills — **Melt card**Sweep the pointer across the picture

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<figure class="m-melt-card" data-motion="melt-card"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233b2a6b'/%3E%3Cstop offset='.55' stop-color='%23ff6b8b'/%3E%3Cstop offset='1' stop-color='%23ffb36b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='190' cy='238' r='44' fill='%23ffe2b0'/%3E%3Cpath d='M0 290 Q70 240 140 285 T300 270 V400 H0Z' fill='%238a3b6e'/%3E%3Cpath d='M0 330 Q90 290 170 330 T300 320 V400 H0Z' fill='%234a2152'/%3E%3Cpath d='M0 365 Q120 340 300 372 V400 H0Z' fill='%2324122e'/%3E%3C/svg%3E" alt="An evening sky over layered hills"><figcaption><b>Melt card</b><span>Sweep the pointer across the picture</span></figcaption></figure>

import { MeltCard } from "./motion/react/MeltCard";

<MeltCard>Your content</MeltCard>

<script setup lang="ts">
import MeltCard from "./motion/vue/MeltCard.vue";
</script>

<template>
  <MeltCard>Your content</MeltCard>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "melt-card";

The wrappers: MeltCard.tsx (React, TypeScript) and MeltCard.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-strength`	`1`	how much each move melts it
`data-motion-max`	`120`	the largest tear in pixels
`data-motion-recover`	`0.97`	how fast it pulls together (closer to 1 is slower)

An SVG displacement filter on the picture, set only while it melts and removed once it has pulled together, so the picture stays sharp at rest and nothing around it moves. Touch: a drag melts it, a tap gives a small shiver. Reduced motion: the picture stays as it is.

Size

melt-card.js is 1.4 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.