@zachleat/hypercard

1.0.3 • Public • Published

hypercard

A web component to add a three-dimensional hover effect to any arbitrary content.

Full credit to this 3D card hover effect CodePen from Mark Miro.

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>

Readme

Keywords

none

Package Sidebar

Install

npm i @zachleat/hypercard

Weekly Downloads

8

Version

1.0.3

License

MIT

Unpacked Size

7.09 kB

Total Files

5

Last publish

Collaborators

  • zachleat