<hyper-card> Web Component

A large assortment of UNO cards spread on a flat surface. A wild card sits in the middle

February 21, 2024

🚾@zachleat/hypercard

Web component to add a three-dimensional hover effect to a card.

Versions: 8 versions in 16 Feb 2024

2.0.3
11 Aug 2026
Audit: 0 reports
0 deps
Issues: 0
1
PRs: 0
4

<hyper-card> is a web component that adds a three-dimensional hover effect to any arbitrary content. Full credit to this 3D card hover effect CodePen from Mark Mironyuk. Used on the registration flow for conf.11ty.dev.

Features

Respects prefers-reduced-motion.
Customize scale with --hypercard-scale CSS custom property.

Installation

You can install via npm (@zachleat/hypercard) or download the hypercard.js JavaScript file manually.

npm install @zachleat/hypercard --save

Add hypercard.js to your site’s JavaScript assets.

Usage

<hyper-card>Hello.</hyper-card>

Not quite as big on hover

The default value is 1.07.

<hyper-card style="--hypercard-scale: 1.03">Hello.</hyper-card>

Tags: Project Web Components

Poster image by Karla Hernández

< Older
Newer >

Zach Leatherman is a builder for the web at Font Awesome and the creator of Build Awesome (née Eleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 89 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

1 Comment

Christian Alder
03 Aug 2026

Makes use of the hypercard webcomponent by @zachleat : https://www.zachleat.com/web/hypercard/ which itself uses the 3d card hover from Mark Mironyuk hypercard Web Component—zachleat.com

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.