GSAP & CSS animated React components and blocks. One file each, no shared runtime, reduced-motion handled.
An image gallery slider: a fan of photos that auto-advances — the active one large and sharp, its neighbors rotated and blurred on each side. Hover pauses. Pure CSS transitions.
Usage examples for Image Fan Slider.
A hero wheel of photo cards set on a large circle so only the top arc shows, spinning slowly so the next idea always comes into view.
Usage examples for Infinite Rotating Cards.
A hub-and-spoke integrations diagram: the center pops in, paths draw out to six logos, then a dot travels each line. Uses MotionPathPlugin.
Usage examples for Integration Hub.
A phrase wrapped once around a ring in real 3D. A falling dot pulls the letters out of a blur, then drag or scroll spins the ring.
Usage examples for Kinetic Type Ring.
A page preloader built around a ring gauge: the arc fills in uneven steps while images flash through its lens and four corner counters sync and go live. Then an iris opens from the lens and the ring flies into the logo in your nav.
Usage examples for Loader Iris Ring.
A page preloader: the wordmark rises letter by letter while a hairline fills with a counter riding its tip. Once the page is ready the line travels to the middle, folds into a single point, and the page opens out of that point to every edge.
Usage examples for Loader Line Fold.
A logo row that holds a fixed count and cycles the extras: the current set staggers up and blurs out as the next slides in from below. Hover pauses the loop.
Usage examples for Logo Cycle.
Logos spaced evenly around a ring that rotates continuously, each mark counter-rotated so it always stays upright. Hover pauses the orbit.
Usage examples for Logo Orbit.
An integrations wall of staggered logo tiles where one mark at a time lifts away and the next rises in behind it. Every tile is visited before any repeats, and the loop pauses off-screen and in background tabs.
Usage examples for Logo Wall Shuffle.
An endless logo strip where the mark nearest the midpoint rises and scales up while its neighbors step down into a wave. Hover pauses the marquee.
Usage examples for Logo Wave.
A pill button pulled toward the cursor once it comes near, its label drifting a little further for parallax depth, then easing back to rest when the cursor leaves the field.
Usage examples for Magnetic Button.
A frosted pill search bar that turns terms into filter chips. Focus it and a panel of recent searches and suggestions blooms out of the bar like a drop of goo; press Enter and the word you typed lifts out of the field, flashes lime and lands in the bar as a teal chip. Remove a chip and the word flies back into the recent list.
Usage examples for Morphing Search.
A headline text animation whose last word cycles through a list with a gooey blur morph — an SVG alpha threshold fuses the outgoing and incoming words into one liquid shape while the slot eases between word widths.
Usage examples for Morphing Text.
A navbar that keeps its whole menu in one small frosted square in the corner. Opening it grows the square into a tall panel whose links drop in with their underlines drawing out, while the page dims behind and a lime close bubble follows the pointer.
Usage examples for Navbar Corner Panel.
A glass navbar whose hover highlight is liquid: a lime pool stretches from link to link with a droplet dragging behind, while the label inverts to ink. Menus swell out of a drop into one gooey panel that leans toward its trigger and morphs between layouts, and inside it a lime blob flows from icon to icon.
Usage examples for Navbar Gooey Bloom.
A navbar with its links in a frosted pill, where a soft highlight glides to whichever link you point at and a lime line along the pill tracks how far down the page you are. The logo dot circles its ring as you scroll, the bar slips away going down, and on narrow screens a round toggle wipes the full menu open from where it sits, with large rolling links and a poster that swaps as you hover them.
Usage examples for Navbar Pill Glide.
A navbar whose menu sits behind the page. Opening it pushes the page down into a rounded, inset card and wipes the link cards up one after another, each poster settling as it lands, while the toggle fills lime and its bars cross. The bar hides as you scroll down the page, returns on the way up and blurs what passes beneath it.
Usage examples for Navbar Push Menu.
An animated stats counter whose digits spin up once when the stat scrolls into view. ScrollTrigger fires it, Number Flow handles the count.
Usage examples for Number Counter.
An outlined mono button split by a dashed rule. Hover and teal pixels bloom out from the exact point the cursor came in, each flashing lime before it settles, so a lime edge rides the wave; leave and they drain out through the point you left by. The label rolls up and the arrow slides through as it fills.
Usage examples for Pixel Fill Button.
A pricing section where picking a plan morphs the name badge, crossfades the description and spins the price with Number Flow, while the checklist lights up its included rows. A monthly/yearly toggle re-spins the price.
Usage examples for Pricing Plan Switch.
A two-plan pricing section where the second card prices itself from a volume slider, the figure spinning with Number Flow as you drag while the track fills behind the handle.
Usage examples for Pricing Usage Slider.
Numbered steps on a timeline whose connector fills before the next card slides and blurs into place — image one way, copy the other. Hover pauses the loop; clicking a step jumps there.
Usage examples for Process Card Reveal.
A process block whose heading, divider and step numbers stay sticky inside the section while the cards scroll past them. No GSAP — just Intersection Observer.
Usage examples for Process Sticky Steps.
A split selected-projects list: titles on the left, one stage on the right. Pointing at a project opens its image like an iris from the edge nearest that row, over the dimming last one, and rolls in its role, timeline, year and team line by line.
Usage examples for Project Hover Reveal.