43 JavaScript Cards
Make your UI components pop with these JavaScript-powered cards. This collection showcases card designs enhanced with animations, gestures, and interactivity - from 3D flips and hover reveals to swipeable stacks and dynamically loaded content. Perfect for modern dashboards, product previews, and user profiles.
Last updated:
Uninvert Kitty
An interactive spotlight reveal where the cursor controls a negative mask and a physical 3D tilt effect.
Holographic Name Card with Hover Effects
An interactive 3D holographic card where JavaScript maps pointer coordinates to scoped CSS Custom Properties like --pointer-x. The physical lighting simulation relies on complex gradient layering, mask-image, and mix-blend-mode, all dynamically driven by these calculated values to create realistic depth and glare.
Folding/Collapsing Profile Card Starring Batwoman
An interactive profile card featuring a dynamic theme toggle triggered by clicks on the avatar or menu button.
Vertical Original vs. Negative Card (Hover and Drag)
An interactive card that reveals a negative version of the image on hover, with a draggable slider to compare the two versions, utilizing CSS blend modes and 3D transforms.
3D Patronus Magic Card
An enchanting 3D parallax card featuring a multi-layered depth effect driven by mouse interaction.
Interactive Card with Floating Lightbox Images
A lively, immersive page where the central element grabs attention with a flip effect, while the background creates a weightless atmosphere with clickable details to explore.
LapisCordis: A Greco-Roman Mythological Card Game
A high-quality, atmospheric Trading Card Game (TCG) interface featuring smooth animations, a tangible sense of depth, and “magical” visual effects upon interaction.
Rotating Navigation
An interactive card stack that fans out into a deck-like display upon toggling. JavaScript handles the state transition by toggling classes, triggering CSS cubic-bezier transitions that rotate and translate the cards from a bottom-center origin, creating a smooth, elastic opening animation accompanied by a rotating navigation button.
Interactive 3D Tilt Hover Effect
An interactive 3D card selector featuring a dynamic parallax effect where cards rotate in perspective based on mouse coordinates. JavaScript calculates angular transforms and constraints for a ‘chef’ character that playfully follows the cursor along the card’s axis.
Multi-Card Spotlight Effect
An interactive 3D card effect where JavaScript tracks pointermove, calculates the relative cursor position, and passes it to --ratio-x and --ratio-y CSS variables, while CSS uses calc() to drive rotateX and rotateY.
Marvel Snap Card Pseudo-3D Effect
A pseudo-3D card effect that mimics the “split parallax” technique using multiple image layers and the key transform-style: preserve-3d property; the card’s dynamic tilt (rotateY/rotateX) is driven by vanilla JavaScript based on cursor/touch position.
Cards with Parallax Tilt Effect
Dive into a stunning card effect utilizing CSS 3D transforms and precise mouse tracking to create a realistic, multi-layered depth and parallax illusion on hover.
3D Page Fold Transition (FLIP Principle)
An elegant implementation of the FLIP animation principle to create a stunning shared element transition between two views, where JS calculates the positions and CSS performs the inverse transform for a smooth change.
Card Beam Animation Effect
Implemented motion physics for an interactive carousel: uses an requestAnimationFrame loop for smooth movement and applies an inertia effect after dragging (Drag/Touch) by gradually decaying this.velocity with friction (this.friction).
Expanding Card Page Transition
This demo illustrates how to create a smooth transition effect from a card to a full-screen page, simulating an expanding animation. It relies on native JavaScript for precise element positioning and sizing, coupled with CSS transitions to deliver a visually pleasing and performant user experience.
Shine Foil Card
A simple yet elegant implementation of an interactive “3D card” hover effect. The code uses getBoundingClientRect() to calculate the element’s center and then applies an offset to inner layers, achieving a parallax effect with just a few lines of JavaScript and CSS.
Product Slider with 3D Flip
A simple but effective interactive product card that uses the GSAP library for animated flipping and rotation. The demo shows how JavaScript and CSS can create a 3D-like transition effect between products, making the UI feel dynamic and engaging.
Colored Glowing Edge Card
Based on CSS variables, this card showcases an advanced technique of gradient and mask layering, where glowing edges and background patterns adapt in real-time to the cursor’s position
Parallax TechTrades™ Holographic Trading Card
A feature-rich web animation showcasing an interactive 3D card with a hover-based parallax effect, a card-flipping animation, and dynamic SVG drawing and lighting effects all orchestrated by the powerful GSAP library.
