Clip Path Library
Components and built by Karan Kendre
Profile Card with Clip Path
An interactive profile card component featuring custom clip-path shapes that expand on click. The card uses smooth layout animations to transition between collapsed and expanded states, creating an engaging user experience.
Karan Kendre
Design Engineer
Clip Toggle Theme Switcher
Experience smooth theme transitions powered by CSS View Transitions API. Each toggle button triggers a beautiful clip-path animation that reveals the new theme with an elegant geometric reveal effect. The animation uses custom keyframes to create a seamless transition between light and dark modes.
Navigation Bar
A sophisticated navigation bar with an elegant dropdown menu featuring smooth clip-path animations powered by Framer Motion. The dropdown uses a combination of height, opacity, and clipPath inset transitions to create a seamless reveal effect. Interactive menu items with hover states provide smooth transitions and visual feedback.
Floating Navigation Bar
A beautiful floating navigation bar with smooth clip-path animations. The active tab features a gradient pill that smoothly transitions between items using CSS clip-path transitions, creating an elegant and modern navigation experience with a glassmorphic design. This component is inspired from animations.dev.
Image Reveal - Top to Bottom
A vertical image reveal animation that unveils content from top to bottom using CSS clip-path. The animation creates a sense of progression and discovery, ideal for storytelling or sequential content presentation. This component is inspired from animations.dev.
Video Text Masking
A creative video masking effect using SVG masks to carve text out of video content. The 'Clip Path Library' text is dynamically masked from a looping video background, creating an elegant typographic effect that combines motion graphics with text-based masking. This component is inspired from the UI Layouts library.
Text Reveal Animation
A dynamic text reveal animation using CSS clip-path to create a geometric reveal effect. The text transitions from hidden to visible through a series of clip-path polygon transformations, creating an engaging entrance animation with smooth keyframe transitions.
Loading
Clip-Path
Library
Infinite Scroll Text Animation
An elegant infinite scrolling text animation with a circular clip-path reveal effect. The text continuously scrolls horizontally while a circular mask reveals a portion of the animated text, creating a dynamic and eye-catching visual effect. The animation uses CSS keyframes for smooth, continuous motion.