June 2024
Beta launch with 16 founding components.
Animata launched in public beta on June 28, 2024. The idea was simple: a collection of animated React components that you copy directly into your project. No package to install, no abstraction layer you can't see into. Just code you own from the moment you paste it.
Founding components
Marquee is the horizontal and vertical infinite scroll component. It handles the seamless loop by repeating content and uses a CSS animation on the compositor thread. A gradient mask fades the edges. This was the first component in the library and established the pattern that most others follow — CSS-first, no JavaScript animation where CSS is sufficient.
CyclingText rotates through a list of words in place, animating between them with a flip or fade. Commonly used in hero sections to cycle through a product's key benefits.
TextBorderAnimation draws an animated border around text using an SVG path that traces the outline of the letters on hover or loop.
MenuAnimation is a navigation menu with enter and exit transitions on the list items. Items stagger in on open and stagger out on close.
FlippingText flips between two strings with a 3D flip on the Y axis. Useful anywhere a value updates and you want the change to feel intentional rather than instant.
CardSpread shows a stack of cards that fan out on hover, revealing the cards behind the top one.
EightItemsBentoGrid is a responsive asymmetric grid layout for eight cells.
ThreeItemBentoGrid is the smaller variant — one large cell and two smaller ones.
AvatarList stacks avatar images with a small overlap, showing up to a configurable limit with a +N overflow indicator.
OrbitingList places items around a circular path centered on a fixed element.
SwapTextCard shows a card where a line of text swaps to a different value on hover using a vertical slide animation.
DeliveryStatusCard shows a package delivery progress tracker with a step indicator, estimated delivery date, and current status label.
SecurityAlertWidget is a notification card for security events — icon, severity, title, and a message body. The border pulses on a loop to indicate an active alert.
ExpandableCarousel is a carousel where the focused item expands to a larger size and the surrounding items compress proportionally.