U
iurvish/uselayouts
3D Book3d-bookAn interactive 3D book component with page flip animations.
Accessible Actionaccessible-actionInteractive draggable card stack with 3D tilt, swipe-to-back gestures, click interactions, random rotation, and smooth spring animations.
AccordionOSaccordionosInteractive accordion showcase with animated content, image transitions, hover effects, keyboard navigation, autoplay, and responsive design.
Analog Stickanalog-stickA metallic stick that tilts into the press. Hover a quadrant and the cap leans, the shadow shifts, and the matching arrow goes amber.
Animated Collectionanimated-collectionA collection of items with smooth layout transitions and animations.
Bento Cardbento-cardAn interactive bento card with animated tabs and workspace preview.
Bottom Menubottom-menuA floating bottom navigation menu with smooth interactions.
BucketbucketAn interactive card component that simulates a bucket where chips are tossed and replaced with smooth physics-inspired animations.
Card Foldercard-folderThis component creates an animated folder-style card with a background image, floating 3D object, hover effects, and customizable colors and text. You can easily change the images, colors, content, and animation settings from the card props.
Client Cardclient-cardA client CRM card with payment and deadline rings, plus a morphing avatar stack.
Confidential Folderconfidential-folderA charcoal sleeve that pulls a letter out, flips it, and lands it in front of you.
Corner Videocorner-videoA compact corner video player with smooth open/close morphing, autoplay, mute, enlarge, hover controls, and video scrubbing.
Coverflow Dragcoverflow-dragA drag coverflow of portraits that scale, dim, and snap as you swipe.
Create Menucreate-menuA Start Creating pill that springs open into a list of create actions.
Curve Drawercurve-drawerSide drawers whose inner edge starts as a bulge and morphs into a straight line as the panel settles.
Day Pickerday-pickerA custom day picker component with smooth animations.
Delete Buttondelete-buttonA confirmation button with smooth icon transitions.
Discover Buttondiscover-buttonAn interactive button with expanding discovery state.
Discrete Tabsdiscrete-tabsA tab component with discrete sliding animations.
Drawer Buttonsdrawer-buttonsTwo buttons that open side drawers with a 3D fold. Payment comes from the right, cart from the left, and the fields stagger in.
Dynamic Grid Gallerydynamic-grid-galleryA 3×2 photo grid that grows the hovered row and column so one still takes the stage.
Dynamic Toolbardynamic-toolbarA toolbar that adapts its size and layout based on content.
Editorial Deckeditorial-deckA stacked editorial story deck. Drag the front card and it springs back into the pile.
Empty Testimonialempty-testimonialAn interactive empty state for testimonials with a playful folder animation.
Expandable Galleryexpandable-galleryA photo gallery with smooth item expansion.
Feature Carouselfeature-carouselA smooth carousel for showcasing product features.
Filter Interactionfilter-interactionInteractive list items with hover and focus effects.
Fluid Expanding Gridfluid-expanding-gridA responsive gallery grid that fluidly shifts and expands items using motion layout.
Focus Testimonialsfocus-testimonialsInteractive testimonial section with hover-based focus effects, animated author tooltips, and expandable testimonials.
Folder Interactionfolder-interactionA folder management system with drag-and-drop-like feel.
Get In Touchget-in-touchA glossy contact pill. Hover and the label lifts away so a portrait and YOU merge, then Let’s Talk! writes in.
Gooey Navbargooey-navbarA pill nav that melts into its neighbor when you hover — liquid bridges, active dot.
Holographic Referral Cardholographic-referral-cardA dark invite card that tilts in 3D with the pointer. A holographic glow follows. Touch stays still. Tab for a quiet glow.
Infinite Canvasinfinite-gridA free-panning product canvas that tiles forever — drag, scroll, and skim an endless grid of images and captions.
Inline Editinline-editAn input that switches between read and edit modes.
Liquid Indexliquid-indexA feature list whose hover badge is a WebGL liquid gradient that tracks the row.
Magnified Bentomagnified-bentoA bento card component with a draggable magnifying lens effect over scrolling chips.
Morphing Inputmorphing-inputAn input field that morphs between different states.
Multi Step Formmulti-step-formA dynamic, animated multi-step form with validation.
Overlapping Slideroverlapping-sliderA full-width landing row of portrait cards. They sit flat until you move — then the card on the left scales back.
Paper Shred Buttonpaper-shred-buttonHover Delete and a page appears above it. Click and the page clips away while paper strips draw in below. After a few seconds it resets so you can shred again.
Perspective Text Scrollperspective-text-scrollA polished example interaction built with React and Motion.
Photo Albumsphoto-albumsTilted album stacks that expand into a shared-element photo grid.
Polaroid Dragpolaroid-dragDraggable Polaroid photo gallery with realistic tilt, stacking, smooth animations, and customizable captions, sizes, and decorations.
Polaroid Stackpolaroid-stackSeven Polaroids sit in a pile. Hover and they fan into an arc from one corner.
Pop Tilt Cardspop-tilt-cardsInteractive tilt card deck with smooth hover animations, 3D popping effects, images, links, and customizable card styling.
Pricing Cardpricing-cardA focused pricing card layout with clear hierarchy.
Prompt Boxprompt-boxA collapsed chat composer that expands into a textarea with a model menu and send control.
Rolling Card Stackrolling-card-stackIt’s a responsive, animated rolling card stack component built with React, TypeScript, Tailwind CSS, and Framer Motion. It supports desktop/mobile layouts, swipe and keyboard navigation, autoplay, pagination, and customizable card content
Save Buttonsave-buttonA button with animated states for idle, loading, and success.
Scan Documentscan-documentClick Scan and a page unfolds, flips, and a glowing bar reads it. Done holds, then it resets.
Scroll Split Cardsscroll-split-cardsOne photograph that splits into three panels as you scroll, then flips to copy.
Scroll Stack Deckscroll-stack-deckScroll-linked project cards that pin in the viewport and stack, scale, and settle as you move down the page.
Set Timerset-timerA dark timer pill that morphs into a minute wheel picker, then into a running timer with pause, cancel, and a rounded-rectangle progress border.
Shake Testimonial Cardshake-testimonial-cardAn eye-catching testimonial card with playful animations.
Slide Subscribeslide-subscribePick a billing period, then slide to start a trial.
Smooth Dropdownsmooth-dropdownA dropdown menu with premium layout transitions.
Stack Scroll Revealstack-scroll-revealScroll-linked case-study cards that pin in the viewport and peel, scale, and fade as you move down the page.
Stacked Liststacked-listAn expandable list widget with a stacked layout and smooth morphing transitions.
Stacked Outline Textstacked-outline-textHeavy outlined type you can drag. Speed leaves a stacked white-on-black trail that springs back when you stop.
Tactile Buttontactile-buttonA liquid-glass rocker that tilts into its well when you press it.
Theme Toggletheme-toggleA physical switch with a dotted grip. Click and the knob slides across a recessed track.
Vertical Tabsvertical-tabsA vertical tab interaction with smooth content switching.
Wheel Carouselwheel-carouselThis component creates a smooth wheel-style carousel with photos and selectable items. It supports drag, scroll, keyboard controls, snapping, momentum, themes, image crossfades, and customizable layout and colors.