@tween-ui

A pill button whose icon pill expands on hover or focus, playing out a staggered chevron trail before it parks. CSS transitions and a small state machine — no …

Usage examples for Icon Trail 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 ta…

Usage examples for Sliding Tabs.

Three stacked avatars that scale and unblur in from the left on an elastic ease, then a caption slides in from the right.

Usage examples for Avatar Reveal.

A login modal: the backdrop fades, the panel scales up, then the close button, title, sign-in providers and email field stagger in. Closing plays the sequence …

Usage examples for Auth Modal.

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 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…

Usage examples for Voice Sample Player.

A card that flips in 3D on hover or tap — the front rotates out while the back rotates in with its description, feature list and CTA staggering into place.

Usage examples for Flip Card.

A single-open accordion that animates its height open while the answer reveals line by line through a SplitText mask and the icon morphs from plus to minus.

Usage examples for FAQ Accordion.

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.

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-char…

Usage examples for Text Roll 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 dependen…

Usage examples for Slide Arrow Button.

A pill button floating over a soft red, amber, violet and cyan glow that sharpens as the button lifts and a chevron slides through its slot. Pure CSS — no GSAP…

Usage examples for Glow Button.

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 lea…

Usage examples for Magnetic Button.

A button whose leading dot blooms into a fill that floods the whole surface on hover, while the label rolls up to a fresh copy and flips to the contrasting col…

Usage examples for Dot Bloom Button.

A label slab paired with a detached arrow tile: the tilt variant has the tile knock the slab so its letters topple in a wave away from it and spring upright, a…

Usage examples for Arrow Tile Button.

A framed button that locks on like a viewfinder on hover: the hairline folds into its corners, the brackets snap shut while the label rolls up and a fresh retu…

Usage examples for Focus Frame Button.

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 …

Usage examples for Slant Morph Button.

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.

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.

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.

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. Pur…

Usage examples for Image Fan Slider.

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…

Usage examples for Morphing Text.

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 th…

Usage examples for Wordmark Reveal.

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 i…

Usage examples for SVG Draw.

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 cr…

Usage examples for Spring Tooltip.

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 it…

Usage examples for Pricing Plan Switch.

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; cli…

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 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 directi…

Usage examples for Strip Wipe.

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 call-to-action with a fanned photo stack auto-advancing above the headline and a shiny button below. Built from Image Fan Slider and Shiny Button.

Usage examples for CTA Image Fan.

A call-to-action where avatars pop in above a heading with two photos tucked into the copy — a pill that grows from the left, then a tilted square that drops i…

Usage examples for CTA Photo Headline.

A three-post blog row where the hovered card grows wider, its photo scales and tilts, and the title draws an underline. Pure CSS.

Usage examples for Blog Hover Expand.

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 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 card row where the hovered card grows wider, its photo fades in and the title drops to the bottom over a gradient. Every card stays expanded on small screens…

Usage examples for Card Hover Expand.

A staggered project grid — tile heights cycle every six cards — where the hovered tile tilts toward the cursor in 3D while its siblings scale back and dim. Poi…

Usage examples for Card Spotlight Grid.

Three columns of review cards that swing in from the sides as the section scrolls, then drift past each other at different speeds. Cards lift on hover with an …

Usage examples for Column Drift.

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…

Usage examples for Team Scatter Focus.

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 …

Usage examples for Tab Wipe.

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…

Usage examples for Logo Wall Shuffle.

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 b…

Usage examples for Testimonial Line Sweep.

A dark call-to-action section under a slow field of drifting stars lit by a violet bloom. The field is full on the first frame rather than spawning over time, …

Usage examples for CTA Starfall.

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 beh…

Usage examples for Pricing Usage Slider.

A three-up testimonial grid that pages a whole set at a time — the current cards drop away on a stagger, then the next set cascades in from above, so the two n…

Usage examples for Grid Cascade.

A numbered section index where each row is a 3D drum that rolls a quarter turn onto a filled face on hover. The roll follows the pointer — in from the top roll…

Usage examples for Cube Roll Item.

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, co…

Usage examples for Shutter Slider.

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 scroll…

Usage examples for Testimonial Reel Focus.

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 dark site footer that rises into view over a glow swelling off the bottom edge, closed by a giant wordmark fitted to the column whose letters climb out of th…

Usage examples for Footer Wordmark Rise.

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 midd…

Usage examples for Loader Line Fold.

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 a…

Usage examples for Loader Iris Ring.

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. Whichev…

Usage examples for Testimonial Ring.

Gallery tiles riding three concentric, counter-rotating orbits on one tilted plane, like the rings of a gyroscope. The rig turns to face the pointer and calms …

Usage examples for Gyro Gallery.

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…

Usage examples for Navbar Push Menu.

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 …

Usage examples for Navbar Pill Glide.

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 unde…

Usage examples for Navbar Corner Panel.

A dark site footer where every link label rolls up letter by letter into lime on hover while a heartbeat line draws itself in underneath, closed by a wordmark …

Usage examples for Footer Pulse Links.

A showcase carousel whose cards hang on a downward arc, each one further out turned a little more. Stepping swings the whole arc round, the centre card easing …

Usage examples for Arc Carousel.

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 s…

Usage examples for Navbar Gooey Bloom.

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, …

Usage examples for Project Hover Reveal.