@zachleat/hypercard
Advanced tools
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 Mironyuk.
conf.11ty.dev.prefers-reduced-motion.--hypercard-scale CSS custom property.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.
<hyper-card>Hello.</hyper-card>
The default value is 1.07.
<hyper-card style="--hypercard-scale: 1.03">Hello.</hyper-card>
The default value is min(2000px, 100vw).
<hyper-card style="--hypercard-perspective: 20vw">Hello.</hyper-card>
The default value is 0.03.
<hyper-card style="--hypercard-glow-opacity: .5">Hello.</hyper-card>
v2.0.3 adds --hypercard-glow-color. Thanks @chriskirknielsen (via #5)!v2.0.2 better transition on hover. Thanks @chriskirknielsen (via #3)!v2.0.1 adds --hypercard-glow-opacity. Thanks @ZackBoe (via #2)!v2.0.0 changes default perspective, configurable via --hypercard-perspective. Thanks @chriskirknielsen (via #1)!FAQs
Web component to add a three-dimensional hover effect to a card.
The npm package @zachleat/hypercard receives a total of 42 weekly downloads. As such, @zachleat/hypercard popularity was classified as not popular.
We found that @zachleat/hypercard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Security News
GPT-6 Astra hits 100% on ExploitBench and finds zero-days autonomously, while independent tests reveal scope violations and monitoring gaps.
Product
Socket can now send alerts and supply chain attack notifications to Microsoft Teams, with filters that route the right updates to each channel.
Security News
pnpm 12 rewrites the package manager in Rust, cutting install times by up to 90% while preserving pnpm 11 workflows and lockfiles.