An interactive set of 3D-perspective dashboard buttons styled with vibrant neon glowing highlights. Hovering over a card rotates its panel dynamically along the X and Y axes using native CSS preserve-3d and perspective properties, while styling the SVG icon with custom scaling and color-matched drop-shadow filters. Clicking triggers a quick, synchronized scale-pulse animation.

An advanced visual sandbox showcasing a highly configurable multi-layered image deck. Users can tweak live variables in real time — including 3D perspective depth offsets, pointer tilt multipliers, rotation spreads, chromatic saturation filters, and custom CSS clip-path geometries (hexagon, diamond, circle, rectangle). Features smooth velocity mouse tracking using GSAP quickTo alongside direct CSS Custom Property overrides. (Requires: gsap.js)

An advanced 3D carousel slider engineered with glassmorphic cards, multi-depth parallax shifts, and tilt physics. Using native Pointer Events and inertia-drag calculations, the carousel projects slides along a 3D hemisphere with variable depth sorting and optional keyboard navigation. Features an automated progress timer with accessible, tab-compliant pagination.

An interactive 3D card utilizing pointer tracking to calculate tilt angle and rotation dynamically. By measuring mouse position relative to the element’s center, the card tilts along the X and Y axes while scaling. A radial gradient overlay shifts concurrently, mimicking realistic surface glare and light reflections.

An accessible quote rotator featuring fluid GSAP slide-fade transitions and dynamic theme switching. It loads quotes asynchronously from a target JSON file, outputting them into semantic citation structures. Includes native ARIA live-regions (aria-live), responsive height clamps, and keyboard-mapped theme toggles. (Requires: gsap.js)

An interactive memory game using custom CSS animations and linear() easing curves to reveal hidden emojis behind playful masks. Built with semantic button elements, accessibility attributes, and experimental squircle corners, it tracks active combos, tries, and high scores. Each card features a distinct CSS transform transition triggered on hover, focus, and selection states.

An experimental, zero-JavaScript custom select dropdown leveraging cutting-edge HTML customizable select specifications. When opened, the custom picker formats standard <option> tags into an interactive circular radial layout using native CSS Anchor Positioning, @starting-style entry transitions, and mathematical sibling-index() and sibling-count() functions. Includes gorgeous vector potion SVG assets mapped with variable custom properties.

An advanced e-commerce prototype demonstrating a highly customizable fly-to-cart animation. On click, a duplicate product image is projected into coordinates calculated via active client measurements, traveling along a dual-axis curved motion path toward the cart badge. Built with custom Web Components, it includes live Bezier timing trackpads and elastic cart bump physics. (Requires: gsap.js, tweakpane.js)

An advanced full-screen navigation overlay. Toggling the menu scales, translates, and rotates the active page content into a stunning perspective viewport canvas while a polygon clip-path mask slides the overlay into view. Hovering over menu links triggers seamless background image crossfades and zooms, accompanied by staggered split-character text reveals. (Requires: gsap.js)

An advanced WebGL jigsaw puzzle simulation featuring realistic glass-like pieces powered by Three.js and Cannon.js. Each puzzle shape combines extruded spline geometries with compound rigid-body collision shapes to precisely model the jigsaw tabs and gravity. It includes an interactive preview container styled with a complex SVG halftone dot filter that fades dynamically using CSS @property transitions. (Requires: three.js, cannon.js)

An advanced styling demonstration showing how to convert native <progress> elements into gorgeous glassmorphic ‘gel’ meters. Using native webkit and gecko pseudo-elements combined with oklch gradients, radial lighting masks, and @property Houdini variables, it builds high-performance indeterminate loading animations and responsive color themes with completely clean, semantic markup.

An advanced interactive subscription form starring a playful cartoon character with dual eye-tracking modes. Pupils react in real time, following the pointer position or snapping directly to the input text caret inside the email field. Dragging the character horizontally triggers fluid physics, rubber-band borders, and elastic drag resets, while error states morph the SVG mouth. (Requires: canvas-confetti.js)

An interactive 3D isometric token usage chart powered by manual SVG path morphing. Instead of relying on heavy drawing libraries, a custom JavaScript interpolator parses matching vector commands and applies organic sine easing. Clicking the menu controls morphs the column heights and cylinder top caps synchronously, highlighted by vibrant rainbow keyframe animations.

An elegant neumorphic volume slider featuring an active thumb focus glow and directional icon highlights. Built with a single native range input and styled with modern CSS Custom Properties, it implements the Houdini @property API to transition colors smoothly across sliding states. Dragging shifts opacity focus to the corresponding volume icon based on directional vector calculations in pure CSS.

An interactive numeric range slider combining the Svelte Range Slider Pips library and the NumberFlow web component. Dragging the slider handle updates a floating badge indicator that slides horizontally, dynamically shifting its layout alignment to the left of the handle whenever it exceeds a 70% bar-width threshold. Includes a value-rolling automated intro animation. (Requires: svelte-range-slider-pips.js, number-flow.js)

An elegant numeric stepper component styled as a cohesive rounded pill, built with React and SCSS. By translating the internal value into relative percentages, the control buttons, background fill, and icon symbols slide smoothly during interactions. Includes split focus-ring indicators built with the CSS :has() selector and native light-dark() modern theme support. (Requires: react.js, react.dom.js, lucide.react.js)

An advanced procedural 2D canvas simulation generating an atmospheric stormy night window scene. Combining multiple layered canvas contexts, the code programmatically draws mountain skylines, math-driven falling rain, running window drops, and recursive branching lightning. It utilizes screen blend-modes, composite operations, and a custom frame-rate time-delta smoothing loop.

An advanced WebGL video player constructed using REGL and custom GLSL fragment shaders. Moving the pointer renders an elongated faux-refractive glass lens that distorts the underlying video stream dynamically. Includes customized resolution scaling, an integrated cos-gradient rainbow progress timeline, and canvas-level click interception to control video playback and seeking. (Requires: regl.js)

An advanced WebGL filter engine that transforms CORS-enabled images and videos into refractive stained glass structures. Operating on custom fragment shaders, the canvas allows users to toggle procedural cell geometries — including hexagon, triangle, and diamond tiles — while dynamically adjusting chromatic aberration offsets, drag-and-drop panning, spotlight coordinate tracking, and mathematical ripple distortions.

A zero-JavaScript responsive mosaic gallery built entirely on native CSS Grid. The grid system adapts dynamically through CSS Custom Variables and column-span mappings across responsive breakpoints, utilizing performance containment properties (contain: size) to prevent layout shifting. Features a centered, overlapping circular highlight portrait.

An experimental custom select dropdown menu built on native HTML5 base-select specifications. The picker popover displays options in a vertically scroll-snapped viewport that fades and blurs adjacent values based on scroll proximity. A lightweight GSAP scrolling script automatically centers and aligns selected items in real time, while modern @starting-style manages discrete popover overlay entry transitions. (Requires: gsap.js, tweakpane.js)

An advanced infinite loop carousel engineered with GSAP, ScrollTrigger, and Draggable. By binding a proxy playhead to window scrolls and pointer drag deltas, cards move smoothly across a custom scaling path. A specialized timeline looping mathematical function builds overlapping clones, ensuring a zero-gap continuous navigation experience. (Requires: gsap.js, scroll-trigger.js, draggable.js)

An advanced semantic accordion using native <details> elements synchronized with a parallax image gallery. Height transitions are made fluid through modern interpolate-size: allow-keywords and complex linear() bounce easings. JavaScript connects active toggles to external navigation buttons, aligning the active image block to match disclosure states. (Requires: gsap.js, tweakpane.js)

Animated CSS Hamburger Menu Icon transforms a standard three-line menu into a close button. JavaScript toggles an active class, while CSS handles the heavy lifting. The middle line slides out using translateX, and the outer lines rotate 45 degrees via transform. Simultaneously, the background and icon colors invert. A clean, lightweight micro-interaction for mobile navigation headers.

Artillery Gorilla Canvas Retro Game is a plain JavaScript clone of the MS-DOS classic, QBasic Gorillas. Two gorillas on city rooftops take turns throwing explosive bananas, with calculations factoring in gravity, adjustable angles, and wind speed shown via an animated SVG windmill. It features single-player AI simulation, local two-player, dark/light modes, and destructible building hitboxes.

Direction-Aware CSS Box Shadow provides a reusable JavaScript class (DirectionAwareShadow) that calculates the mouse’s offsetX and offsetY relative to an element’s center. It then dynamically updates the element’s inline box-shadow property to cast a shadow in the opposite (or same) direction of the cursor. The class is highly configurable, allowing developers to easily adjust blur, spread, color, and offset intensity.

Interactive CSS Tear Strip Animation simulates the satisfying physical action of tearing open a cardboard package. It cleverly uses an invisible <input type="range"> linked to the CSS Scroll-Driven Animations API (animation-timeline: --thumb). As the user drags the slider, CSS variables dynamically update clip-path, box-shadow, and transform properties to reveal the content beneath while curling the torn strip. A JavaScript fallback ensures compatibility for browsers without native scroll-timeline support.

JavaScript Object Smartwatch Concept turns a standard digital clock into a clever developer joke. The UI mimics an Apple Watch using pure CSS (box-shadow for the bezel, linear-gradient for the strap). Inside, JavaScript’s requestAnimationFrame continuously updates a formatted string, rendering the current time and date as a syntax-highlighted JS object. A fun, lightweight snippet for developer portfolios.

“Morphing Stripe-Style Dropdown Navigation” replicates the famous Stripe header effect. A single background element dynamically resizes and moves behind the active content. JavaScript calculates dimensions using getBoundingClientRect() and updates CSS properties to animate the panel. This approach keeps the DOM clean and ensures smooth transitions between menu sections.

Pure CSS Trigonometric Flight Range Slider uses CSS math functions like sin() and clamp() to dynamically scale a custom airplane thumb and cast realistic altitude shadows based on the input’s current percentage. It features a responsive container query that swaps the plane for a helicopter on narrow screens, and includes dedicated high-contrast mode styles for robust accessibility.