Components

Motion-first UI components built with Framer Motion and TypeScript.

52 components across 9 categories

Layout

Components for structuring and organizing content

Card

Flexible container with customizable styling

Skeleton

Loading placeholder with shimmer animation

Gradient Border

Container with animated gradient borders

Glow Card

Card with dynamic glow effects

Expandable Card

Card that expands on interaction

Wobble Card

Card with subtle wobble animation

Navigation

Components for navigation and wayfinding

Nav Menu

Responsive navigation menu

Breadcrumbs

Hierarchical navigation trail

Tabs

Tabbed interface component

Animated Tabs

Tabs with smooth animations

Stepper

Multi-step process indicator

Magnetic Dock

MacOS-style dock with magnetic effects

Feedback

Components for user feedback and notifications

Toast

Temporary notification messages

Tooltip

Contextual information on hover

Dialog

Modal dialog component

Drawer

Slide-out panel component

Progress Ring

Circular progress indicator

Data Display

Components for displaying data and information

Badge

Small status or label indicator

Accordion

Collapsible content sections

Code Block

Syntax-highlighted code display

Code Display

Code snippet with copy functionality

Number Ticker

Animated number counter

Animated Counter

Counter with spring animations

Overlay

Components that overlay other content

Popover

Floating content container

Context Menu

Right-click context menu

Dropdown

Dropdown menu component

Command Palette

Keyboard-driven command interface

Spotlight

Search spotlight overlay

Input

Form controls and input components

Button

Interactive button with multiple variants

Input

Text input with enhanced styling

Toggle

Toggle switch component

Multi Select

Multi-option selection component

Date Range Picker

Date range selection interface

Schedule Picker

Time scheduling interface

Animation

Components focused on motion and visual effects

Typewriter

Typewriter text animation

Marquee

Scrolling text marquee

Text Shimmer

Shimmering text effect

Staggered List

List with staggered animations

Scroll Reveal

Reveal elements on scroll

Parallax Tilt Card

3D tilt effect card

Parallax Scroll

Parallax scrolling effect

Spring Carousel

Carousel with spring physics

Swipe Cards

Swipeable card stack

Morphing Shape

Shape morphing animations

Cursor Trail

Cursor trail effect

Buttons

Specialized button components with unique interactions

Magnetic Button

Button with magnetic hover effect

Ripple Button

Button with ripple click effect

Liquid Button

Button with liquid morphing effect

Morphing Hamburger

Animated hamburger menu button

Utility

Utility components for special functionality

Component Switcher

Switch between different components

Control Panel

Control panel for component demos

Mode Switcher

Dark/light mode toggle

Ready to get started?

Physics Playground GitHub