Motion & Animations
Framer Motion, simplified.
Pre-built slide, fade, scale and typing components built on top of Framer Motion — drag and drop, scroll-triggered, or on demand.
Motion primitives
Drop-in animation wrappers for React. Each component exposes a minimal API — one prop for direction, one for duration — and handles the Framer Motion boilerplate for you.
Hello, world.
Animates on mount — refresh to replay
TypingText
Each character springs in independently using Framer Motion's spring physics.
Devops-centric platform
cycles every 3 sTypingTexts
Cycles through an array of messages on a configurable interval. Each text can carry its own className.
Four banners will slide in from each corner simultaneously.
Motion — slide (all corners)
Slide a notification banner in from any screen corner. Set showDirection to control entry and hideDirection for dismissal.
Two panels fade in from opposite edges.
Motion — fade
type="fade" fades the element in or out with optional directional drift. Toggle to show / hide.
Items will appear and fly away in four directions over 5 s.
Motion — fadeOut
Elements appear instantly then animate away in their configured direction. Great for dismissible notifications that disappear on their own.
Motion2 — scale (repeat)
Scales the child up and back on a continuous loop. Use repeat + interval to control the rhythm. Motion2 is ref-aware so you can trigger it imperatively.
Backdrop fades in; card slides up from below.
Motion — layered popup (fade + slide)
Nest two Motion components: an outer fade for the overlay, an inner slide for the modal card. The stagger gives depth without extra code.
Custom banner built directly on motion.div + slideIn helper.
slideIn utility — raw Framer Motion
Use the exported slideIn() helper directly when you need a one-off motion.div outside a Motion wrapper.
Carousel
Swipe or drag between images with spring physics. Supports auto-scroll, custom speed, and overlay children for hero sections.
Motion — bounce (spring)
Spring-physics slide: the element overshoots and settles with a natural bounce. Stiffness and damping are pre-tuned.
Motion — zoom
Scales from zero with a spring overshoot. Perfect for card entrances, tooltips, or dialog reveals.
Motion — rotate
Spins in from a starting angle. Direction maps to a ±90° or ±180° rotation origin — ideal for icon reveals and badge entrances.