51 JavaScript Cards

We accept flatness in web interfaces as a constraint, but it is merely a habit. This component breaks the fourth wall, transforming a static modal into a tangible, digital artifact. By coupling mouse physics with deep perspective, we create an interaction that feels less like clicking a link and more like holding a rare collectable.

This 3D Parallax Card Slider brings a tangible, high-fidelity feel to web galleries. It goes beyond simple sliding by implementing a physics-based tilt effect that reacts to mouse movement, giving each card weight and depth. The background adapts seamlessly to the active slide, creating an immersive atmosphere perfect for luxury travel sites or premium portfolios.

This Split Staggered Reveal Card creates a dramatic, cinematic effect suitable for portfolios or featured content sections. Upon interaction, the background image recedes while two semi-transparent overlays slide in to create a high-contrast backdrop. Simultaneously, the title and description animate in with a precise staggered delay - letters for the title and words for the paragraph - powered by CSS variables.

This GSAP Flip Layout Expansion demonstrates how to animate complex layout changes that are usually impossible with pure CSS. By utilizing the FLIP (First, Last, Invert, Play) technique via GSAP, a list item transforms from a horizontal row into a vertical, detailed card. It smoothly handles the resizing of nested elements (like the avatar) and the repositioning of surrounding items without jumpy reflows.

This Hyperplexed Evervault Card Hover Effect utilizes dynamic character generation and CSS masking to create a high-tech “decryption” visual. It replicates the sophisticated card interactions found on the Evervault website, blending procedural text with mouse-responsive radial gradients.

Three card variations where content (text, photo, or combined) rotates like faces of a 3D cube when swiped or dragged.

A holographic card effect driven by mouse tracking via JavaScript, which updates CSS variables to position dynamic gradients.

A collection of interactive profile cards that flip in 3D to reveal more information, powered by Swiper.js for seamless navigation.

An interactive spotlight reveal where the cursor controls a negative mask and a physical 3D tilt effect.

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.

An interactive profile card featuring a dynamic theme toggle triggered by clicks on the avatar or menu button.

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.

An enchanting 3D parallax card featuring a multi-layered depth effect driven by mouse interaction.

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.

A high-quality, atmospheric Trading Card Game (TCG) interface featuring smooth animations, a tangible sense of depth, and “magical” visual effects upon interaction.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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.

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

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.