Sleek Custom Video Player
A highly customized HTML5 video player built to replace standard browser control overlays. Engineered with tailored controls, interactive seek bars, and precise volume / speed states for an immersive viewing experience.
Tactile Switch Controls
An ultra-realistic, mechanical-feeling toggle switch design. Utilizes complex, multi-layered CSS box shadows, inset styles, and smooth cubic bezier transitions to mimic physical tactile feedback.
Liquid Metal Gooey Tabs
A liquid metal category selector utilizing SVG Gaussian blur and color matrix filters. Menu tabs organically morph, blend, and stretch into one another during active item transitions.
Elastic Edge-Bounce Slider
An interactive range slider utilizing physics-based springs and motion values. Dragging past its boundaries triggers elastic edge expansion and realistic deceleration spring-backs.
Magnetic Filter Switcher
A layout-animating navigation filter category picker. Leverages layout IDs to animate filter indicators smoothly and slide adjacent text labels aside dynamically during choice changes.
Proximity-Scaling Circle Grid
A grid of circles that dynamically scale based on mouse proximity. Each circle calculates distance from the cursor and animates its size with a spring effect, creating an interactive depth illusion.
Concentric Bubble Color Picker
A minimal color palette picker arranged in a perfect hexagonal ring layout with zero spacing. Features proximity-scaling bubble transitions and one-click copy-to-clipboard functionality.
3D Kinetic Lyrics Scroller
A typography showcase engine displaying character-by-character letter flipping in 3D perspective. Features smooth stagger-delayed rotations and a custom minimal search field.
Grid Magnification Canvas
An interactive grid of image slices that magnify based on mouse proximity. When the cursor stops, the tiles slowly scale back to normal size with a satisfying decay. Inspired from @manupaji
Perspective Drag Carousel
A three-dimensional dragging carousel showcasing fluid depth transformations, perspective rotations, and smooth inertia physics during gesture navigation.
Staggered Brand Rotator
A clean, dynamic company trust bar with logo sets that periodically cycle using staggered spring entries, pop exits, and blur effects. Inspired from @manupaji
Kinetic Character Roller
Interactive text links where each individual character flips vertically on hover with customizable staggered delays, creating a smooth text roll.
Swipable Spring Deck
A fluid stack of images that can be dragged left/right. Releasing the card sends it to the back of the deck with realistic spring dynamics. Inspired from @manupaji
Pill Slider Navigation
A high-fidelity navigation menu bar featuring a sliding pill background selector that dynamically transitions using responsive spring easing.
Isometric Grid Typography
An interactive, isometric vector grid representing stylized letterforms. Features micro-animations that shift tile depths on click/tap, styled dynamically with SVG line patterns and client-side transitions. Inspired from @iamncdai
Spring-loaded Character Reel
A dynamic numeric ticker that animates value changes on a spring-driven rolling reel. Computes digit-level changes and transitions tabular numeric columns smoothly to accommodate layout updates.
- Buy Groceries
- Walk the dog
- Finish project
- Call mom
Peerlist Todo List Challenge
Animated Checkboxes Design checkbox interactions that bring personality and satisfaction to the simple act of completing tasks. Interaction by Rauno Frielberg
Active Dot Curved Motion
A layout-animating navigation menu dot. Translates the active item dot smoothly along a customized arc path using Framer Motion v12 layout path interpolators.
Morphing Svg Switch
A micro-interactive play/pause button that morphs its SVG path vectors smoothly using spring physics upon trigger selection.
Variable Font Weight Wave
A smooth, staggered kinetic wave animating the font wght axis across individual text letters, using absolute overlaid layouts to prevent word wrapping shifts.