GSAP & CSS animated React components and blocks. One file each, no shared runtime, reduced-motion handled.
A Swiper testimonial row of rating cards: drag or swipe it, and off-window cards fade and blur as they leave. Autoplay pauses on hover, and dots jump to a card.
Usage examples for Rating Carousel.
A pill button with a diagonal light sweep that glides across on hover while the leading sparkle twinkles. Pure CSS — no GSAP dependency.
Usage examples for Shiny Button.
An autoplaying feature slider. Each image opens through vertical slats that alternate from the top and bottom, the headline letters roll in like drum faces, copy lines rise through masks and the caption pulls into focus — all mirrored when you travel back.
Usage examples for Shutter Slider.
A slanted label and arrow tile whose diagonal seam smoothly flips its lean like a hinge on hover with GSAP MorphSVG, while the colors trade places and a fresh arrow slides through.
Usage examples for Slant Morph Button.
A pill button whose label rolls up on hover while the chevron slides out of its lime badge and a fresh one slides in from the left. Pure CSS — no GSAP dependency.
Usage examples for Slide Arrow Button.
A pill nav whose lime indicator scales in under the first tab, then slides to follow the pointer or keyboard focus. Leaving the nav returns it to the active tab.
Usage examples for Sliding Tabs.
One tooltip shared by a toolbar of icon buttons. It unfurls from a nub at the button, then travels: moving to a neighbour slides it across and resizes it on critically damped springs while a soft mask wipes the old label out and the new one in, and a fast sweep keeps its velocity instead of restarting. GSAP ticker, no provider.
Usage examples for Spring Tooltip.
A split testimonial slider whose photo wipes in as tiled strips beside the quote, the index ticking over on Number Flow. Prev and next reverse the wipe direction.
Usage examples for Strip Wipe.
Wrap any inline SVG and it draws itself in: every path, line, circle, rect and polygon traces its outline, one after another, then its fill fades in. Outline icons draw in their own stroke, filled logos are traced in a thin line that fades as they fill. Plays when it scrolls into view or on mount. GSAP DrawSVG and ScrollTrigger.
Usage examples for SVG Draw.
A centered screenshot stage that wipes between slides on a clip-path edge while the incoming shot settles out of a slight scale and drift. The thumbnail strip is a real tablist, and the stage autoplays between clicks.
Usage examples for Tab Wipe.
A scattered team collage whose cards each fly in from their own direction, then blur and shrink back from whichever one you hover. Falls back to a stacked grid below lg.
Usage examples for Team Scatter Focus.
A paged testimonial pair whose text sweeps out line by line behind masks while the portrait irises shut, then the next quote arrives the same way. Pages with buttons or arrow keys. GSAP + SplitText.
Usage examples for Testimonial Line Sweep.
A reel of testimonial cards wider than the window, run sideways by vertical page scroll from inside a sticky stage. Each card rises as it crosses in, so scrolling sends a swell along the row; a tick strip reads the run back like a scrubber, and hovering a card pulls it into focus while the rest of the row dims and blurs behind it.
Usage examples for Testimonial Reel Focus.
Testimonial cards stood on a 3D ring over a reflecting grid floor. Drag it and it spins with inertia before snapping to a card; scrolling turns it too. Whichever card comes to the front blurs its quote in and rolls its metric on Number Flow.
Usage examples for Testimonial Ring.
A pill button whose label rolls up character by character on hover — the current text lifts out the top as a fresh copy rolls in from below, on a fine per-character stagger.
Usage examples for Text Roll Button.
A pill toggle labelled Light mode or Dark mode. Click it and the new theme is drawn in pixels out from the toggle, in one of eight reveals: circle, diamond, equalizer bars, a diagonal sweep, a zipper closing from top and bottom, sparks, sonar rings or a spiral. View Transitions API with the cross-fade switched off; the sun pulls in its rays and the label turns like a drum.
Usage examples for Theme Toggle Reveal.
An audio player pill: press play and the name slides away, a lime waveform equalizer slides in and starts oscillating, and the icon morphs to pause. Pass a src to play real audio.
Usage examples for Voice Sample Player.
A display wordmark text reveal that assembles itself on the first scroll — every letter turns in on its own vertical axis, then a script line leans in along the baseline. A cue holds the screen until you answer it, or it plays on mount with `instant`. ScrollTrigger and SplitText.
Usage examples for Wordmark Reveal.