Foil card

A collectible card tilts toward the pointer while its foil and glitter catch the light.

enhancer
hover
pointer
3d
card
holographic
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

Foil card example

Night owlNo. 042

Holo foil. Tilt the card and the light runs across it.

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>

<article class="m-foil-card" data-motion="foil-card">
  <header><b>Night owl</b><span>No. 042</span></header>
  <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='%23070b1f'/%3E%3Cstop offset='.6' stop-color='%2325195c'/%3E%3Cstop offset='1' stop-color='%233d2a7a'/%3E%3C/linearGradient%3E%3CradialGradient id='b' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%235effc4' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%235effc4' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Cellipse cx='150' cy='200' rx='190' ry='60' fill='url%28%23b%29'/%3E%3Ccircle cx='220' cy='80' r='22' fill='%23fdf6d8'/%3E%3Ccircle cx='60' cy='60' r='1.6' fill='%23fff'/%3E%3Ccircle cx='110' cy='120' r='1.2' fill='%23fff'/%3E%3Ccircle cx='260' cy='170' r='1.4' fill='%23fff'/%3E%3Ccircle cx='30' cy='160' r='1' fill='%23fff'/%3E%3Cpath d='M0 330 Q150 280 300 330 V400 H0Z' fill='%230b0a1f'/%3E%3C/svg%3E" alt="">
  <p>Holo foil. Tilt the card and the light runs across it.</p>
  <footer><span>★★★</span><span>Rare</span></footer>
</article>

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

<FoilCard>Your content</FoilCard>

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

<template>
  <FoilCard>Your content</FoilCard>
</template>

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

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

Options

Attribute	Default	What it does
`data-motion-max`	`14`	the largest tilt in degrees
`data-motion-scale`	`1.04`	how much the card grows while held
`data-motion-foil`	`0.7`	foil strength, 0 to 1
`data-motion-glitter`	`0.8`	glitter strength, 0 to 1

Tilt is a transform and the light is paint, so nothing around the card moves. On touch, a sideways drag tilts the card and an up or down swipe still scrolls the page. Keyboard focus inside the card tilts it to show the foil. Reduced motion: the card stays flat; the light still follows the pointer. The layers are decorative and hidden from screen readers.

Size

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