Components

Animated Landing Page Sections for React

Larger blocks for marketing and product pages. A pricing table whose prices roll on toggle, an FAQ accordion, integration beams and hub diagrams, a dotted world map and globe, a radar, a live activity feed, a mega menu that reshapes per panel, and a pinned scroll stage that hands its children progress.

10 components · Browse all components

Pricing Table

A pricing section with a billing toggle, prices that roll when you switch, and a highlighted popular tier.

Mega Menu

A navigation panel that reshapes to each menu's content instead of swapping — measured width and height, a caret that tracks the trigger, keyboard-driven.

FAQ Section

An FAQ accordion where rows pop in, panels unfold on a spring, and the plus icon twists into a close mark.

Integration Beams

Integration logos fire a synchronized wave of light pulses along drawn beams that converge on a central hub, which swells and ripples as they land together.

World Map

A dotted world map where comets of light arc between cities, each landing with a ripple. Markers pulse idly and reveal their labels on hover.

Dotted Globe

A rotating globe of land dots with your locations glowing as accent markers, each sending out a slow ripple. Drag to spin it — momentum hands back to the idle rotation.

Activity Feed

Notification cards stream in from the top, springing the stack down as older ones dissolve through a soft fade at the bottom.

Radial Hub Diagram

A hub-and-spoke diagram with dashed connectors. Hover it and every node swells on a spring while the lines brighten and their dashes flow toward the hub.

Scroll Stage

A pinned stage that hands its children a 0–1 scroll progress motion value, so any transform can be scrubbed by the thumb instead of played on a timer.

Radar Sweep

A radar with a glowing sweep arm that lights up blips as it passes, each flaring with a ripple before fading until the next pass.